<aside> 💡 인쇄 업계에서 빌려온 '페이지'라는 멋진 단어의 개념은 우리 일에서 점점 의미를 잃어가고 있다. 이제는 페이지를 구축하는 게 아니라고 감히 말할 수 있다. 대신 반응형 디자인을 여러 개의 소형 레이아웃 시스템이 모인 네트워크로 생각해야 한다.
</aside>
개발자 스콧 차일즈(Scott Childs)는 은행 캐피털 원(Capital One) 사이트의 레이아웃을 4주 만에 다시 구축한 사례를 이야기하면서, 페이지가 아니라 컴포넌트에 초점을 맞춘 것이 핵심이었다고 주장했다.
비록 페이지 수가 엄청나게 많을지라도, 2,500페이지에 페이지 설정이 4,000개가 넘을지라도 모든 것은 정말 두어 가지 정도로 압축된다. 우리가 갖고 있는 컴포넌트가 전부 몇 개였는지 아는가? 약 20개였다. 이 20개의 컴포넌트를 페이지 4,000개에 끼워 맞추고 확장시킬 수 있겠다고 생각했다. 핵심을 파고들었을 때는 ...... 그렇게 많은 것을 다룰 필요가 없다.
작업의 범위와 복잡도가 커지면서, 작업을 모듈화해야 한다는 필요성이 대두되며 디자인 내에서 컴포넌트에 초점을 맞추게 되었다. 그러나 버진 아메리카(Virgin America) 항공이 사이트를 반응형으로 다시 디자인할 때 디자인 파트너로 일했던 조 스튜어트(Joe Stewart)의 설명에 따르면, 컴포넌트에 초점을 맞추면 모듈화라는 이익 외에도 더 큰 이익이 따라온다.
우리는 레고와 같은 시스템을 만들었다. 우리는 여러 크기에서 동작할 수 있는 다양한 박스 유형과 모듈 유형을 디자인했다. 이 유형들은 태블릿에서, 데스크톱에서, 스마트폰에서 동작할 수 있으며 그 안에서 콘텐츠는 바뀔 수 있다. 이런 방식에는 두 가지 장점이 있다.
더 작은 블록들을 조립하여 인터페이스를 구축한다는 논의가 활발해지면서, 최근 몇 년 사이에는 패턴 라이브러리 혹은 스타일가이드를 만드는 것에도 새롭게 관심이 집중되었다. 나는 이 두 가지 용어를 바꿔가며 사용하는데 여러분이 어떤 용어를 더 선호하든 그 의미는 동일하다. 패턴 라이브러리 혹은 스타일가이드는 복잡한 인터페이스를 구축하기 위해 사용되는 모든 '블록'의 재고 명세인 것이다. 색상, 서체, 폼 요소, 그리드 레이아웃 등 재사용될 수 있는 컴포넌트를 흔히 디자인 패턴이라고 칭한다. 재사용이 가능한 모듈 특성에 경의를 표한다. 스타벅스는 반응형 사이트에 사용한 패턴 라이브러리를 공개한 최초의 대형 조직 중 하나였으며 그 후 다른 회사들도 스타벅스의 예를 따랐다.
Starbucks React Pattern Library
넓은 화면에서는 내비게이션 전체가 다 보이지만, 작은 뷰포트에서는 화면 속 공간 하나하나가 더 소중하기에 디자인 상단에 오직 Menu 링크만 보인다. 이 Menu 링크를 손으로 터치하거나 마우스로 클릭하거나 키보드로 선택하면 메뉴 전체가 나타난다.
메뉴가 들어갈 공간이 부족하다면 감추어버리는 이 방법은 반응형 디자인에서 복잡한 내비게이션 시스템을 처리할 때 사용하는 흔한 방식 가운데 하나다. 이 방식은 최소한 두 가지 요소가 필요하다. 하나는 특정 분기점에서 감춰지는 내비게이션 요소이며 또 하나는 감춰진 내비게이션을 사용자 상호작용을 통해 보이게 하는 '트리거(trigger)' 요소다.
우리는 점진적 향상(progressive enhancement) 전략을 적용한 내비게이션을 구축할 수 있다. 우선 보편적으로 접근할 수 있으며 단순하고 사용하기 편한 경험을 기본적으로 디자인해둔다. 그러고 나서 우리가 추구하는 기능에 대한 실제 혜택을 받을 수 있는 브라우저와 기기에서만 사용자 경험을 향상시키는 것이다. 이 경우 테스트에 통과하면 HTML 요소의 enhanced 클래스는 해당 브라우저가 '향상된' 경험을 받아들일 준비가 되어 있다고 알려준다. 즉, 사이트가 로드될 때 자바스크립트 테스트 코드를 통해 기능 수행이 어려운 브라우저를 걸러내고, 그런 브라우저에는 자바스크립트로 구동되는 UI를 대부분 제외하여 깨끗하고 간결하며 핵심적인 사용자 경험만 남겨둔다.