반복적인 디자인 작업에 소모되는 시간을 절약하기 위한 방법 중 하나가 ‘디자인 패턴’이다. 자주 사용되고 이미 검증된 UI 요소들을 각각 정의하고 문서화시켜 디자인 패턴으로 만들어 놓음으로써, 예전에 만들어 본 적이 있는 UI 요소들은 패턴을 재사용해서 효율적으로 디자인하고 새로 디자인하게 된 부분에 집중하고 전체적인 디자인을 다듬을 수 있는 여유를 가질 수 있다. 이 책에서는 여기서 한 단계 더 나아가, 디자인 작업의 재사용을 UI 요소 단위가 아닌 사용의 맥락 단위까지 확대한다. 이를테면 로그인 화면의 디자인 패턴뿐만 아니라 회원가입과 로그인, 회원정보 관리를 하나의 사용맥락으로 분석하고 여러 측면을 고려해 사용성이 검증된 하나의 프레임워크로 작성해 둠으로써, 단지 일관성 있는 UI가 아닌 완성도 높은 사용자 경험(UX)을 효율적으로 제공할 수 있는 기반이 마련되는 것이다.

1부 프레임워크 개념의 소개 1. 인터랙션 디자인 프레임워크의 의의 _재사용 전략 _패턴: 요구되는 행동의 모음집 _컴포넌트: 재사용할 수 있는 코드의 가치 _프레임워크: 퍼즐의 마지막 조각 _표준 그 이상의 개념 _작업량의 분배 _오래된 문제에 대한 새로운 해결 방법 _질문, 답변, 그리고 통찰력 2. 재사용의 3 요소 _디자인 패턴 _디자인 패턴의 구성요소 _패턴 라이브러리 _컴포넌트 _컴포넌트의 구성요소 _컴포넌트 라이브러리 _인터랙션 디자인 프레임워크 _인터랙션 디자인 프레임워크의 구성요소 _프레임워크의 특성 _최초의 프레임워크 라이브러리 _실무에서의 프레임워크 2부. 프레임워크 3. 카탈로그 프레임워크 _프레임워크 설명 _사용맥락 _작업흐름 _연계 프레임워크 _관련 프레임워크 _구성요소 _분류 페이지 _갤러리 페이지 _콘텐츠 페이지 _안내 링크 _디자인 설계기준 _탐색 지원 _공개적인 콘텐츠 분류 4. 검색 프레임워크 _프레임워크 설명 _사용맥락 _작업흐름 _구성요소 _빠른 검색 _검색결과 페이지 _검색의 성과 _고급검색 _필터 _페이지 매김 _디자인 설계기준 _콘텐츠에 도달할 수 있는 경로를 여러 개 제공하라 _사용자가 쓰는 용어를 콘텐츠와 연관지어라 _콘텐츠를 알아보기 쉽게 만들어라 5. 회원가입 프레임워크 _프레임워크 설명 _사용맥락 _작업흐름 _구성요소 _가치제안 _투자명세 _추천글 _행동유도 문구 _백지양식(= 즉석사용) _회원가입 양식 _디자인 설계기준 _분명한 가치를 제안하라 _사용시 필요한 사항을 설명하라 _기능이 제대로 동작한다는 것을 보여줘라 _행동을 유도하고 그 절차를 보완하라 _사용자의 행동을 그 사용자와 연관시켜라 6. 회사소개 프레임워크 _프레임워크 설명 _사용맥락 _작업흐름 _구성요소 _회사연혁 _재정 상태 _고객목록 _조직정보 _보도자료 및 관련뉴스 _채용정보 _연락처 _디자인 설계기준 _브랜드 신뢰감을 형성하라 _의사소통을 강화하라 7. 영화 웹사이트 프레임워크 _프레임워크 설명 _사용맥락 _구성요소 _스플래시 페이지 _예고편 _배우 및 촬영진 _시놉시스 _디자인 설계기준 _유명세를 구축하라 _입소문 마케팅을 활용하라 _사용자들을 사로잡아라 _일상 속에서 자리 잡도록 하라 3부. 프레임워크의 실무 적용 8. 표준 프레임워크의 구축 _프레임워크 작성 _문제 파악 _기존 사례 연구 _문서화 작업 _업무 부하의 분산 9. 프레임워크의 실무 적용 _사전 준비 _프레임워크를 활용한 웹사이트 구축 _실무 맥락에서의 사용맥락 _패턴 선택 _디자인 설계기준의 적용 _실용적인 가치가 있는 프레임워크 _라이브러리 _스텐실 10. 프레임워크의 미래 _좌절비용 _참고자료