방향성을 스타일 타일로 만들기
왜 필요한가: 무드보드는 너무 모호해서 발전시키기 어렵고, 전체 페이지 목업은 너무 구체적이어서 사람들이 이미 4단계에서 결정한 구조에 대해 논의하기 시작합니다. 스타일 타일(Samantha Warren)과 요소 콜라주(Dan Mall)는 그 중간에 위치합니다. 페이지 레이아웃 없이 색상, 타이포그래피, 인터페이스 요소만 보여주므로 논의가 '느낌'에 머물게 됩니다. AI 덕분에 변형을 만드는 데 비용이 거의 들지 않으므로, 선택이 병목이 됩니다. 따라서 이 단계에서는 의도적으로 방향성을 분산시키고 선택의 기준을 제공합니다.
필요한 파일: brand.md, taste-profile.md, anti-defaults.md, sitemap.md 및 하나의 와이어프레임(카피용), personas.md.
생성되는 파일: 06-directions/tiles/r<round>/*.html, 06-directions/direction.md.
1. 축 선택
취향 프로필에서 열려 있는 지점을 바탕으로 방향성이 다른 두세 가지 축을 정하세요. 예: 차분함 ↔ 화려함, 빽빽함 ↔ 경쾌함, 따뜻함 ↔ 차가움, 에디토리얼 ↔ 기술적, 평평함 ↔ 질감 있음. 각 방향을 서로 다른 지점에 배치하세요. 강조 색상만 다른 세 가지 방향은 하나의 방향으로 간주합니다.
무드보드의 A 단계에서 개별 보드를 생성했다면, 그 보드에서 시작하세요.
2. 세 개의 타일 만들기
방향별로 하나의 독립적인 HTML 파일. 각 타일은 다음을 보여줘야 합니다:
- 이름과 그 아이디어를 설명하는 한 문장 (트렌드가 아닌 브랜드에서 유래)
- 역할(배경, 텍스트, 강조, 액션)이 표시된 견본 형태의 색상 팔레트와 텍스트 및 버튼의 대비 비율(WCAG AA: 텍스트의 경우 4.5:1)
- 타이포그래피: 디스플레이 및 본문 서체, 몇 가지 크기, 카피 초안에서 가져온 실제 제목과 문단
- 인터페이스 요소: 기본 버튼과 보조 버튼, 링크, 입력 필드, 네비게이션 바, 하나의 카드
- 히어로 조각 (전체 히어로 섹션이 아님) 및 특징적인 요소 하나 더: 인용문, 숫자, 목록, 가격표
- 이미지: 스타일 샘플 또는 사진, 일러스트레이션, 스크린 처리 방식에 대한 설명
- 오직 이 브랜드만이 가질 수 있는 하나의 디테일 (로고에서 가져온 모양, 업계 용어, 측정 단위)
규칙:
- 먼저
anti-defaults.md를 읽으세요. 사용 가능한 라이선스(Google Fonts, OFL, 클라이언트의 라이선스 폰트)가 있는 소스에서만 폰트를 사용하고, 라이선스와 파일 크기를 기록하세요. - 프로젝트의 실제 카피를 사용하고, 절대 로렘 입숨을 사용하지 마세요. 샘플 인터페이스 텍스트는
facts.md의 사실만 사용합니다: 가상의 기능, 제안, 가용성, 숫자는 사용하지 않습니다. - 전체 페이지 레이아웃, 전체 네비게이션 트리, 푸터는 포함하지 마세요.
- 각 타일을 390px와 1440px로 렌더링한 후 보여주기 전에 확인하세요.
3. 평가
리뷰 페이지에서 세 개의 타일을 나란히(모바일에서는 하나씩) 보여주세요. 각 타일에 대해:
- 단어 테스트: 타일당 하나의 질문. 사용자(가능하면 동료도 함께)가 브랜드 속성과 그 반대 극을 혼합한 목록에서 단어 세 개를 선택합니다(체크박스,
data-max="3"). 어느 쪽이 승리했는지 집계합니다. - 요소별 평가: 요소(색상, 타이포그래피, 버튼, 이미지, 디테일)당 하나의 질문: 해당 요소가 A, B, C 중 어느 타일에서 왔는지, 또는 '해당 없음', 그리고 이유 필드. 이렇게 하면 설문지는 약 8개 질문으로 유지됩니다.
- 선택적 5초 테스트: 프로젝트 외부인에게 타일을 5초 동안 보여주고 "이 회사는 어떤 종류의 회사인가요? 어떤 단어 세 개가 떠오르나요?"라고 물어보세요.
4. 병합
평가 결과를 바탕으로 direction.md를 작성합니다: 카테고리별로 선택된 요소, 각 요소가 어떤 타일에서 왔으며 그 이유, 7단계를 위해 열려 있는 사항. 병합이 상당하다면 결합된 타일 하나를 만들어 2라운드에서 다시 보여주세요. 3라운드 이상 진행하지 마세요. 수렴되지 않으면 일반적으로 브랜드 속성에 문제가 있는 것이므로 3단계로 돌아가세요.
완료 조건: direction.md가 확인되고, 결합된 방향에 대한 단어 테스트가 브랜드 속성을 가리킬 때.