웹사이트 해부하기 : 실무에 적용하는 인터랙션 디자인 프레임워크

반복적인 디자인 작업에 소모되는 시간을 절약하기 위한 방법 중 하나가 ‘디자인 패턴’이다. 자주 사용되고 이미 검증된 UI 요소들을 각각 정의하고 문서화시켜 디자인 패턴으로 만들어 놓음으로써, 예전에 만들어 본 적이 있는 UI 요소들은 패턴을 재사용해서 효율적으로 디자인하고 새로 디자인하게 된 부분에 집중하고 전체적인 디자인을 다듬을 수 있는 여유를 가질 수 있다. 이 책에서는 여기서 한 단계 더 나아가, 디자인 작업의 재사용을 UI 요소 단위가 아닌 사용의 맥락 단위까지 확대한다.

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