Design Showcase Websites

빈약한 브리프와 흩어진 소스 자료를 대상, 청중, 언어 및 목적에 특화된 사이트로 전환합니다. 집중된 랜딩 페이지, 다중 페이지 웹사이트 및 인터랙티브 웹 제품을 지원합니다. 이 스킬을 워크플로우의 중심으로 사용하고, 사용자가 명시적으로 언급한 디자인, 브라우저, 이미지, 제품 인터페이스 또는 프레임워크 스킬과 결합하세요.

핵심 규칙

매력적인 섹션 모음이 아니라 전환 경험을 설계하세요.
정체성은 비즈니스, 청중, 장소, 제품 및 실제 이미지에서 도출하세요. 사용자가 요청하지 않는 한 이전 프로젝트의 비주얼 스타일을 재사용하지 마세요.
검증된 사실과 창의적 해석을 분리하세요. 주소, 가격, 영업 시간, 리뷰, 고객, 수상 내역, 기능 또는 성과 주장을 절대 허위로 만들지 마세요.
원본 사용자 에셋을 보존하세요. 프로젝트 내에서 복사본을 최적화하고 생성되거나 임시 이미지를 문서화하세요.
청중과 브리프에서 언어를 선택하세요. 증거 없이 한국어, 중국어, 영어, 일본어 또는 이중 언어 콘텐츠라고 가정하지 마세요.
지역화된 타이포그래피, 줄 바꿈, 구두점, 읽기 순서, 콘텐츠 밀도 및 문화적으로 익숙한 동작을 디자인의 일부로 취급하세요.
유행하는 효과의 콜라주보다 하나의 강력한 아트 디렉션을 선호하세요.
사용자가 창의적 자유를 부여할 때, 사이트를 설계해달라고 요청하는 대신 정당화된 방향을 추론하고 결정하세요.
구현이 요청되면 프로토타입이 진정으로 클릭 가능하고 시연 가능하도록 만드세요. 사용자가 전략만 요청하지 않는 한 작성된 개념에서 멈추지 마세요.
모든 필수 정보를 애니메이션 없이 볼 수 있도록 유지하고 축소된 모션 선호도를 존중하세요.

참여 모드 선택

컨셉 전용: 포지셔닝, 페이지 흐름, 비주얼 방향 및 주요 화면 설명을 제공합니다. 요청하지 않는 한 파일을 변경하지 마세요.
프로토타입: 기본 상호 작용 및 프레젠테이션 품질의 콘텐츠가 포함된 반응형 단일 페이지 또는 다중 페이지 사이트를 구축합니다.
리디자인: 먼저 기존 페이지와 리포지토리를 감사하고, 기능 요구 사항과 현재 스택을 유지한 다음 인터페이스를 개선합니다.
폴리싱: 라이브 또는 로컬 페이지를 검사하고, 가장 영향력 있는 격차를 식별하고, 집중된 변경 사항을 구현하고, 다시 확인합니다.
웹 제품: 작업 흐름, 상태, 탐색 및 데이터 프레젠테이션을 설계합니다. 작업이 애플리케이션 중심일 때 이 스킬을 제품 인터페이스 스킬과 짝을 이루세요.

리포지토리가 없으면 상호 작용 요구 사항에 맞는 가장 단순한 유지 관리 가능한 스택을 선택하세요. 리포지토리가 있으면 해당 규칙을 검사하고 재사용하세요.

워크플로우

1. 결과물 프레이밍

결과에 실질적으로 영향을 미치는 결정만 해결하세요:

청중 및 로케일;
사이트 유형, 콘텐츠 규모 및 경험이 단일 페이지인지, 다중 페이지인지, 애플리케이션과 유사한지;
기본 및 보조 전환 작업;
전달 형식 및 필요한 상호 작용;
소스 자료 및 사용 권한;
원하는 첫인상 및 허용할 수 없는 방향;
스택, 경로, 뷰포트 또는 포트와 같은 시작 제약 조건.

한 번에 최대 세 가지 간결한 질문을 하세요. 사용자가 창의적 자유를 부여하고 증거가 충분하면 합리적인 가정을 명시하고 진행하세요.

빈약한 브리프, 링크 지도 또는 혼합 로컬 에셋의 경우 콘텐츠를 수집하기 전에 discovery-and-research.md를 읽으세요.

중국어, 영어, 일본어, 한국어로 작업하거나 다국어 경험을 구축할 때 정보 아키텍처를 선택하려면 site-types-and-localization.md를 읽으세요.

2. 진실 공급원 원장 구축

제공된 링크, 지도 목록, 기존 사이트, 파일, 이미지 및 비디오를 검사합니다. 기록:

검증된 값;
출처 및 확인 날짜;
직접 게시할 수 있는지 여부;
소유자 확인이 필요한 모든 것.

운영 사실을 컴포넌트 전체에 분산시키는 대신 데이터 또는 콘텐츠 파일에 중앙 집중화하세요. 자리 표시자를 명시적으로 표시하세요. 공개 정보가 충돌하는 경우 비즈니스 소유 또는 가장 최근에 업데이트된 출처를 선호하고 충돌을 플래그 지정하세요.

3. 전환 스토리 정의

시각 효과를 선택하기 전에 다음을 작성하세요:

방문자가 10초 후에 기억해야 할 한 문장;
기본 CTA 및 선택적 보조 CTA 하나;
첫인상에서 행동까지의 신념 사다리;
이미 증거로 뒷받침되는 세 가지에서 다섯 가지 증거 포인트;
망설임을 제거하는 데 필요한 최소 정보.

구현 프로젝트에서 PRODUCT.md를 생성하거나 업데이트하여 청중, 목적, 포지셔닝, 전환, 증거, 음성, 안티 레퍼런스 및 접근성 기대치를 포함하세요.

4. 구체적인 아트 디렉션 설정

카테고리 사실과 감정적 약속 및 의도적인 대비를 결합한 하나의 컨셉을 명명하세요. 유용한 대비의 예로는 에너제틱하지만 규율 있는, 로컬이지만 에디토리얼한, 기술적이지만 인간적인, 프리미엄이지만 환영하는 등이 있습니다.

구현 전에 디자인 다이얼을 설정하세요:

디자인 변동성, 1–10;
모션 강도, 1–10;
정보 밀도, 1–10;
색상 전략;
사진 촬영 전략;
타이포그래피 전략.

DESIGN.md를 생성하거나 업데이트하여 컨셉, 토큰, 유형, 레이아웃, 이미지 처리, 모션 및 반응형 동작을 포함하세요. 컨셉, 페이지 아키텍처 또는 미디어 처리를 선택할 때 direction-and-structure.md를 읽으세요.

자동 시각적 기본값을 피하세요: 일반적인 검은색 네온 피트니스 스타일링, 일반적인 베이지 레스토랑 스타일링, 장식용 유리 패널, 무작위 벤토 그리드, 의미 없는 글로우, 과도한 알약, 균일한 카드 및 반복적인 페이드업 섹션.

5. 결정을 중심으로 페이지 구성

사이트의 목적에서 정보 아키텍처를 선택하세요. 다중 페이지 작업의 경우 개별 섹션 스타일을 지정하기 전에 가장 작은 완전한 사이트맵, 글로벌 탐색, 페이지별 목표 및 페이지 간 전환 경로를 정의하세요. 웹 제품의 경우 마케팅 리듬보다 작업 완료 및 상태 적용 범위를 우선시하세요.

방문자의 결정에 필요한 섹션만 사용하세요. 일반적인 전환 페이지 흐름은 다음과 같습니다:

약속과 기본 작업이 있는 히어로;
즉각적인 증거;
대표 제품 또는 제품 가치;
경험, 프로세스 또는 차별화 요소;
이의를 제거하는 실용적인 세부 정보;
위치, 연락처, 예약, 구매 또는 문의;
결정적인 최종 CTA.

임의의 컴포넌트 다양성이 아닌 스케일, 리듬, 크롭, 여백 및 에디토리얼 정렬을 통해 구성을 다양하게 만드세요. 모바일에서는 적절한 경우 전화, 탐색, 예약, 구매, 가입, 검색, 저장 또는 계속과 같이 가장 가치 있는 작업을 쉽게 도달할 수 있는 곳에 유지하세요.

6. 인터페이스로서의 콘텐츠 작성

먼저 청중의 기본 언어로 작성하고 필요한 경우에만 다른 로케일을 추가하세요.
시각적 리듬에 맞는 짧고 직접적인 제목을 사용하세요.
일반적인 주장을 뒷받침되는 구체적인 내용으로 대체하세요.
CTA 레이블을 문자 그대로, 문화적으로 친숙하게 유지하세요.
실제 너비에서 대상 언어의 줄 바꿈을 테스트하고 영어 자리 표시자로 레이아웃을 승인하지 마세요.
지원되는 각 로케일을 독립적으로 테스트하세요. 번역이 소스 언어 컴포넌트에 맞는다고 가정하지 마세요.
lorem ipsum 대신 실제 콘텐츠를 사용하세요.

7. 프로토타입 구축

의미론적 페이지 구조와 재사용 가능한 토큰을 사용하세요.
프로토타입이 암시하는 수준에서 링크, 호출, 탐색, 메뉴, 필터, 갤러리 및 모달이 작동하도록 만드세요.
큰 이미지를 적절한 웹 형식과 크기로 최적화하고 의미 있는 크롭 초점을 유지하세요.
모션을 사용하여 계층 구조를 명확히 하고, 공간 관계를 드러내거나 브랜드 성격을 강화하세요. 드물고 중단 가능하게 유지하세요.
키보드 포커스, 의미 있는 alt 텍스트, 충분한 대비, 44px 터치 대상 및 안전 영역 인식 모바일 컨트롤을 제공하세요.
JavaScript 모션이 실행되지 않을 때 필수 콘텐츠를 보존하세요.

구현 또는 최종 검토 전에 prototype-and-qa.md를 읽으세요.

8. 실제 브라우저에서 확인

성공적인 빌드만으로 완료를 선언하지 마세요. 최소한 다음을 확인하세요:

약 1440px의 와이드 데스크탑;
중간/태블릿 너비;
약 390px의 모바일;
약 375px의 좁은 모바일;
하나의 축소된 모션 또는 키보드 패스.

히어로와 전체 페이지를 검사하세요. 대상 언어 줄 바꿈, 이미지 크롭, 가로 오버플로, 안전 영역, 고정 컨트롤, 콘솔 오류, 링크, 양식, 메뉴, 포커스 순서, 로딩 동작 및 최종 CTA 접근성을 확인하세요. 발견된 문제를 수정하고 영향을 받은 검사를 반복하세요.

예상 인계

실행 가능한 프로토타입의 경우 다음을 제공하세요:

작동하는 소스 및 성공적인 프로덕션 빌드;
로컬 미리보기 또는 명확한 실행 명령;
프로젝트가 정당화하는 경우 PRODUCT.md 및 DESIGN.md;
운영 사실 및 미디어에 대한 소스/자리 표시자 메모;
구현된 상호 작용 및 확인된 뷰포트의 간결한 목록;
출시 전에 변경될 수 있는 사실에 대한 짧은 소유자 확인 목록.

최종 응답을 미리보기 또는 기본 아티팩트로 이끄세요. 가장 중요한 디자인 결정 및 검증 결과만 언급하세요.

품질 관문

다음이 모두 참일 때까지 인계하지 마세요:

구체성: 사이트를 리디자인 없이 임의의 경쟁업체로 레이블을 다시 지정할 수 없습니다.
진정성: 주장과 미디어는 실제이고 출처가 있거나 잠정적으로 명확하게 표시됩니다.
전환: 다음 작업이 몇 초 내에 분명하고 모바일에서도 쉽게 유지됩니다.
계층 구조: 각 뷰포트에서 하나의 아이디어가 지배하며 타이포그래피와 이미지가 이를 지원합니다.
반응성: 구성이 단순히 쌓이는 것이 아니라 의도적으로 적응합니다.
절제: 모션과 효과에 역할이 있으며 사이트가 효과 데모처럼 느껴지지 않습니다.
포용성: 키보드, 대비, 터치 대상, 축소된 모션 및 의미론적 구조가 포함됩니다.
신뢰성: 빌드, 콘솔, 에셋 및 중요한 상호 작용이 확인됩니다.

design-showcase-websites