로고 중심 웹 디자인(Logo-Led Web Design)
제품의 자체 로고를 웹사이트의 시각적 재료로 전환하세요. 일러스트레이션, 모션, 레이아웃을 함께 설계하여 결과물이 제품을 설명하고 브랜드에 고유하게 느껴지도록 만듭니다.
이것은 사이트 템플릿이 아닌 디자인 및 구현 방법입니다. 실제 로고와 제품에서 결과를 도출하세요. 샘플 사이트의 브랜드, 팔레트, 챕터 수, 일러스트레이션 주제, 타이포그래피 또는 스크롤 모델을 그대로 가져오지 마십시오.
간단한 웹사이트는 섹션이 적고 카피도 적을 수 있지만, 일러스트레이션은 완전하고 세심하게 그려져야 합니다. 콘텐츠 선택을 통해 범위를 작게 유지하고, 작품을 알아볼 수 있게 만드는 구조를 제거하지 마십시오.
제품 이해 및 로고 분석
제공된 제품 정보, 기존 웹사이트, 로고 및 참고 자료를 활용하세요. 제품이 무엇인지, 주요 기능은 무엇인지, 주요 동작은 무엇인지 파악하세요. 알려진 정보를 재사용하고, 필수 자산이나 진정으로 중요한 선택이 누락된 경우에만 질문하세요.
디자인하기 전에 실제 로고를 확인하세요. 실루엣, 선 또는 채워진 덩어리, 네거티브 스페이스, 리듬, 비율, 색상 및 독특한 연결 지점을 조사하세요. 어떤 요소가 유용한 시각적 재료가 될 수 있고, 어떤 특징이 원래 마크를 알아볼 수 있게 만드는지 식별하세요. 모든 로고를 선으로 축소하거나 세 부분으로 나눌 필요는 없습니다.
사용 가능한 벡터 경로가 제공되면 해당 경로를 사용하여 작업하세요. 일반적으로 간단한 시각적 검사와 그룹/컨투어 검사로 충분합니다. 픽셀 분석을 통해 지오메트리를 다시 측정할 필요는 없습니다.
로고 분석, 제품-형태 매핑 및 자산 생산에 대한 내용은 design-and-assets.md를 읽어보세요.
브랜드별 시각적 스토리 개발
로고 요소를 제품의 기능과 관련된 구성으로 변환하세요. 곡선은 워크플로가 될 수 있고, 틈은 이미지를 프레임으로 만들 수 있으며, 채워진 모양은 작업 공간으로 펼쳐질 수 있습니다. 이는 필수 모티프가 아니라 가능성입니다. 완전한 로고를 관련 없는 카드 위에 회전시키는 것은 이 작업을 수행하는 것이 아닙니다.
각 중요한 페이지 섹션에 대해 다음을 정의하세요:
- 방문자가 이해해야 할 내용(짧은 제품/기능 설명으로 표현)
- 그것을 전달하는 완전한 일러스트레이션과 로고 파생 형태가 어떻게 참여하는지
- 다음 상태로 지속되는 의미 있는 객체 또는 시각적 관계
- 데스크톱 및 모바일 크기에서 아트가 텍스트 및 동작과 공간을 공유하는 방식
어떤 로고 파생 요소가 각 목적지까지 살아남을지 계획한 다음, 보간을 조정하기 전에 목적지 아트워크를 먼저 개발하세요. 마크에 적합하게 변형, 펼침, 드로잉, 마스킹, 부분 재배열 또는 재료 변경을 사용하세요. 공식 브랜드로 제공되는 곳에서는 원래 로고를 그대로 유지하세요. 스토리에 적합한 경우 원래 마크로 재조립하여 마무리 박자를 제공할 수 있습니다. 다운로드 섹션이나 로고로 끝나는 것은 필수가 아닙니다.
페이지와 모션 모델을 함께 선택
콘텐츠와 요청된 경험에 맞는 구성을 선택하세요: 강력한 애니메이션 히어로와 조용한 섹션, 지속적인 스크롤 연결 스토리텔링, 간결한 시퀀스 또는 기타 정당한 구성. 사용자가 선택한 참조 자료와 상호작용 모델을 존중하세요. 모든 제품에 교대로 나타나는 전체 화면 챕터를 강요하지 마십시오.
스크롤 연결 작업의 경우, 브리프에서 다른 동작을 요구하지 않는 한 네이티브 문서 스크롤을 선호하세요. 독자에게 명확하고 구성된 정지 상태를 제공하고, 읽기 시퀀스를 지원하는 곳에 변환을 배치하세요. 샘플 임계값을 부과하지 말고 실제 레이아웃에서 타이밍을 도출하세요.
제품이 무엇이고 사용자가 무엇을 할 수 있는지 말해주는 간결한 카피를 사용하세요. 일러스트레이션과 레이아웃이 설명을 담당하게 하세요. 일반적인 마케팅 템플릿으로 애니메이션을 감싸지 말고, 타입, 간격, 컨트롤 및 장식을 브랜드에 맞추세요.
완전한 목적지 그리기, 그런 다음 변환 안무
design-and-assets.md의 일러스트레이션 제작 섹션을 읽고 시각적 비교를 확인하세요. 편집 가능한 소스는 illustration-craft.svg입니다. 예제는 구조와 완성도를 설명할 뿐, 규정된 스타일이나 페이지 템플릿이 아닙니다.
각 중요한 목적지를 작업 중인 페이지 또는 편집 가능한 자산에서 실제 일러스트레이션으로 렌더링하세요. 비율, 독특한 컨투어, 의미 있는 구성 요소, 연결 및 겹침을 설정하세요. 유용한 곳에 선/색상/재료 계층을 추가하세요. 구성을 판단하기 위해 장면을 일시적으로 멈추세요: 헤드라인에 의존하여 모호한 덩어리를 식별하지 않고도 주제를 설명할 수 있어야 합니다. 이는 작업 단계이며, 모든 단계에서 별도의 제안이나 사용자 승인을 요청하는 것이 아닙니다.
모션 책임을 분리하세요: 로고 파생 구조는 연속적으로 변형될 수 있습니다. 첨부된 구성 요소는 해당 구조를 따릅니다. 목적지별 콘텐츠와 마감은 공간이 확보되면 펼쳐지거나 나타날 수 있습니다. 이는 역할이지 고정된 그룹 수가 아닙니다. 모든 세부 사항을 동일한 보간 함수를 통해 강제하지 않고 풍부한 아트워크를 보존하세요.
각 운반된 로고 요소가 각 목적지에서 그 역할을 얻도록 하세요. 레이어를 모든 섹션에 걸쳐 존재하게 하기 위해 관련 없는 제품 객체로 강제하지 마십시오. 하나의 변환을 마치고 새로운 장면 콘텐츠가 들어오면 사라질 수 있습니다.
소스-목적지 간 대응 관계를 지오메트리 또는 공간적 핸드오프에서 볼 수 있게 만드세요. 전체 로고를 페이드 아웃하고 관련 없는 심볼을 표시하는 것은 요청된 변환을 보여주지 않습니다. 목적지와 대응 관계가 설정되면 이동 포즈를 작성하고 페이지와 동기화하세요.
선택한 매체에 아트워크 구현
기존 프로젝트 스택을 사용하세요. SVG/CSS, 타임라인 라이브러리, Canvas/3D 또는 렌더링된 미디어를 선택하고 지오메트리, 동기화 및 반응형 구성에 대한 내용은 implementation.md를 읽어보세요.
정확한 로고 파생 형태를 위해 원래 벡터 지오메트리를 선호하세요. 중간 아트워크를 의도적으로 작성하세요. 선택한 아트 디렉션이 실제로 그 출력을 필요로 하는 경우 이미지 또는 모션 생성 도구를 사용하세요. 생성된 이미지는 동일한 브랜드 문법을 지원해야 하며, 요청된 변환을 대체하는 관련 없는 장식 자산을 대신해서는 안 됩니다.
모션 제안이 아닌 작동하는 페이지를 만드세요. 일관된 애니메이션 모델을 통해 지오메트리, 이동, 재료 및 일러스트레이션 콘텐츠를 조정하세요. 읽기 쉬운 텍스트, 유용한 컨트롤 및 공식 로고 정지 상태에서 정확한 소스 마크를 보존하세요. 축소된 모션 선호도를 이해할 수 있는 구성으로 존중하세요.
렌더링된 웹사이트 검토 및 개선
visual-review.md를 사용하여 먼저 정착된 일러스트레이션을 검사한 다음, 전환 및 데스크톱/모바일 배치를 검사하세요. 누락된 시각적 구조와 컨투어 샘플링 및 프레임 타이밍을 구분하세요. 수치 정밀도를 높여도 누락된 제품 세부 사항이 추가되지 않습니다. 다른 브랜드가 로고와 색상만 변경하여 동일한 페이지를 얻을 수 있는지 판단하세요. 그렇다면 로고-기능 매핑을 다시 검토하세요.
중요한 전환당 하나 이상의 중간 상태를 검사하세요. 우연한 하이브리드처럼 읽히면 요소 대응 관계를 수정하거나 더 명확한 이동 포즈를 작성하세요. 모든 레이어를 지연시키거나 컨투어 정밀도를 높여도 의미상 잘못된 모프가 수정되지 않습니다. 관찰된 문제를 개선하세요: 매력적이지 않은 중간 포즈를 다시 그리고, 충돌하는 이동 경로를 조정하거나, 타이밍이 잘못된 공개를 변경하세요. 집중된 변경 후에는 관련 없는 제품군을 다시 실행하지 말고 영향을 받는 모션과 주변 상태를 검토하세요.
작동하는 미리보기, 편집 가능한 자산/소스 및 실제로 확인된 내용에 대한 간략한 설명을 제공하세요. 독립적인 에이전트 검증이 요청되면 진정으로 다른 제품/로고 브리프를 사용하게 하세요. 소스 브랜드만 재현하는 것은 일반성을 입증하지 않습니다. 사용할 수 없는 검증에 대해 보고하세요.
선택적 작업 사례
유사한 연속 SVG 스토리가 유용하거나 사용자가 해당 사례를 요청하는 경우에만 tapestry-case-study.md를 읽어보세요. 폴더 assets/reference-site에는 실행 가능한 Tapestry 예제와 로고/폰트 자산이 포함되어 있습니다. 이는 선택적 작업 구현이며, 기본 시작 레이아웃이나 다른 제품의 브랜딩 소스가 아닙니다.