Step 3. 프로토타입 - 와이어프레임 선택과 보정

들어가며

토큰을 정의한 다음 프로토타입을 산출합니다. tmp/ 폴더에 단계별 문서를 시간순으로 적재하였습니다.

1tmp/
2├── desktop-check/      — 첫 데스크톱 시안 4종
3├── tag-compare/        — 레퍼런스 vs 우리 시안 비교
4├── final-check/        — 최종 데스크톱 12페이지 검증
5├── redesign-check/     — 재디자인 라운드 (스크롤 검증)
6├── mobile-before/      — 모바일 12페이지 (보정 전)
7└── mobile-after/       — 모바일 보정 후

폴더 이름으로 어느 단계에서 무엇을 중점적으로 보았는지 알 수 있습니다.

1. 핵심 페이지로 디자인 컨셉 잡기

전체 사이트를 한 번에 그리지 않습니다. home, about, posts, post-detail 핵심 네 페이지를 먼저 그립니다. 전체적인 디자인 컨셉을 잡기 위함입니다. 나머지 페이지(태그, 시리즈, 북마크, 검색 등)는 이후 파생시켜 그립니다.

2. 요구사항 도출 및 시안 기반 선택

제가 추구하던 디자인은 미니멀하면서도 있을건 다 있는, 너무 화려하진 않지만 너무 수수하지도 않고, 글에 집중할 수 있는 안정감이 있는것이었습니다. 다소 요구사항이 많기는 했지만, 컴포넌트 별로 시안을 받아 선택하고 단계적으로 개선하는 과정을 거쳐 지금과 같은 디자인을 산출할 수 있었습니다.

3. 나머지 페이지 일괄 생성, tweaks 활용

핵심 4페이지의 톤이 확정된 뒤 나머지 페이지를 일괄 생성하고 한 화면에 모아 봤습니다. 일관적인 톤으로 작성되었는지 확인하고, 튀거나 잘못 구현된 부분을 직접 수정합니다.

claude-design의 tweaks의 토글을 통해서 dark/light 모드, 여러 시안 비교, 글씨 크기, 라우팅 바로 이동 등.. 동적으로 비교하며 디테일하게 수정할 수 있습니다.

4. 디자인을 선택한 기록 남기기

어떤 과정을 통해 현재의 디자인에 도달하게 되었는지 정본 문서에 기록하였습니다.

닫으며

프로토타입 단계에서 페이지 시안을 산출하였습니다. 다음 스텝에서 드디어 코드 구현 단계를 진행합니다.
기획 때 미뤄둔 질문들에 답을 내고, 마크다운을 직접 설계 합니다.