세계적 수준의 웹사이트 디자인
목적
연구 기반 디자인 프로세스와 세심한 구현을 통해 차별화되고 사려 깊은 생산 품질의 웹사이트를 만듭니다.
이 스킬은 다음 두 가지 모두에 적용됩니다:
- 리디자인: 기존 웹사이트의 정체성, 포지셔닝, 콘텐츠, 경로 및 작동 기능을 변경해야 할 명확한 이유가 없는 한 이를 보존하면서 개선합니다.
- 새 웹사이트: 일반적인 템플릿에 의존하지 않고 제품, 대상 사용자 및 요구 사항을 기반으로 독창적인 창의적 방향을 수립합니다.
목표는 디자인 갤러리를 모방하는 것이 아닙니다. 뛰어난 장인 정신으로 일관되고 기억에 남는 경험을 제공하는 것입니다.
핵심 원칙
- 변경하기 전에 이해하세요. 회사나 제품이 하는 일, 누구를 대상으로 하는지, 웹사이트가 달성해야 할 목표를 파악하세요.
- 디자인하기 전에 연구하세요. 관련 참고 자료를 살펴보고 유용한 디자인 결정을 식별하세요. 레이아웃이나 시각적 아이덴티티를 복사하지 마세요.
- 모든 프로젝트에 고유한 아이덴티티를 부여하세요. 관련 없는 프로젝트 간에 동일한 시각적 방향, 히어로 레이아웃, 섹션 순서 또는 장식 스타일을 재사용하지 마세요.
- 목적을 가지고 디자인하세요. 모든 섹션, 애니메이션, 이미지 및 상호작용은 커뮤니케이션, 사용성 또는 브랜드 특성을 지원해야 합니다.
- 독창성과 명확성의 균형을 유지하세요. 웹사이트를 혼란스럽거나 사용하기 어렵게 만들지 않으면서 시각적으로 야심차게 만드세요.
- 구축하고, 검사하고, 개선하세요. 실제 구현이 현실적인 뷰포트 크기에서 검토될 때까지 디자인은 완료된 것이 아닙니다.
워크플로
1. 프로젝트 파악
파일을 편집하기 전에:
- 리포지토리 구조, 프레임워크, 패키지 매니저, 종속성, 스크립트 및 기존 규칙을 검사합니다.
- 가능하면 기존 프로젝트를 실행하고 현재 렌더링된 웹사이트를 검사합니다.
- 모든 관련 페이지, 경로, 탐색, 양식, 클릭 유도 문구 및 상호작용 상태를 검토합니다.
- 제품, 대상 사용자, 포지셔닝, 가치 제안, 브랜드 보이스 및 전환 목표를 이해합니다.
- 기존 자산, 폰트, 색상, 디자인 토큰, 구성 요소 및 통합을 식별합니다.
- 리디자인의 경우 기존 웹사이트와 프로젝트 자료를 진실의 원천으로 취급합니다. 정당한 사유 없이 제품 주장을 지어내거나 중요한 콘텐츠와 기능을 제거하지 마십시오.
필수 정보를 얻을 수 없는 경우 보수적인 가정을 하고 이를 확인된 사실과 명확히 구분하십시오. 누락된 정보가 의미 있는 진행을 막는 경우에만 질문하십시오.
2. 시각적 참고 자료 조사
브라우저 접근 또는 웹 연구가 가능한 경우 다양한 고품질 웹사이트를 검사하십시오. 유용한 발견 소스는 다음과 같습니다:
- https://www.awwwards.com/websites/
- https://www.siteinspire.com/
- https://www.siteofsites.co/
- https://curated.design/
- https://land-book.com/
- https://recent.design/
- https://minimal.gallery/
- https://www.landingfolio.com/
- https://saaslandingpage.com/
- https://www.lapa.ninja/
- https://www.framer.com/startups/ycombinator
가능하면 썸네일이나 검색 스니펫이 아닌 실제 페이지와 상호작용을 검사하십시오.
다음을 연구하십시오:
- 아트 디렉션 및 브랜드 표현.
- 구성, 그리드, 간격 및 시각적 리듬.
- 타이포그래피, 계층 구조 및 읽을 수 있는 줄 길이.
- 색상, 대비, 테두리, 표면 및 질감.
- 히어로 섹션 및 첫인상 경험.
- 탐색 및 정보 아키텍처.
- 제품 시연 및 시각적 스토리텔링.
- 사진, 일러스트레이션, 3D 및 기타 자산.
- 모션, 전환 및 상호작용 세부 사항.
- 반응형 동작.
특정 이유로 참고 자료를 선택하십시오. 각 참고 자료가 무엇에 유용한지, 그 아이디어를 현재 프로젝트에 어떻게 적용할 수 있는지 내부적으로 설명하십시오. 다른 사이트의 독특한 디자인을 그대로 복제하지 마십시오.
외부 브라우징이 불가능한 경우 이러한 갤러리를 검사했다고 주장하지 마십시오. 사용 가능한 프로젝트 컨텍스트를 기반으로 작업하고 관련된 경우 제한 사항을 명시하십시오.
3. 창의적 방향 설정
구현 전에 이 특정 브랜드와 대상 사용자에게 적합한 명확한 디자인 방향을 수립하십시오.
다음을 정의하십시오:
- 의도된 느낌과 개성.
- 시각적 개념 및 아트 디렉션.
- 타이포그래피 접근 방식 및 계층 구조.
- 색상 팔레트 및 대비 전략.
- 레이아웃 및 그리드 원칙.
- 이미지 및 일러스트레이션 방향.
- 구성 요소 및 표면 언어.
- 모션 원칙.
- 브랜드 표현과 사용성 간의 관계.
리디자인의 경우 기존 아이덴티티를 출발점으로 사용하십시오. 효과적인 브랜드 요소는 보존하되, 약하거나 일관되지 않은 실행은 개선하십시오.
다음과 같은 기본 패턴은 피하십시오:
- 일반적인 SaaS 랜딩 페이지 구조.
- 동기 없는 그라데이션 및 글로우 효과.
- 반복적인 벤토 그리드.
- 장식용 블롭 및 일반적인 AI 이미지.
- 과도한 카드, 알약, 테두리 및 그림자.
- 임의의 과장된 타이포그래피.
- 정보를 지연시키거나 가리는 애니메이션.
이러한 패턴이 완전히 금지된 것은 아닙니다. 프로젝트에 진정으로 적합할 때만 사용하십시오.
4. 경험 계획
구축하기 전에 페이지 또는 사이트 구조를 매핑하십시오.
- 사용자의 질문과 작업에 우선 순위를 지정합니다.
- 명확한 계층 구조와 논리적 콘텐츠 흐름을 설정합니다.
- 가치 제안을 빠르게 이해할 수 있도록 합니다.
- 각 섹션에 고유한 목적을 부여합니다.
- 일관성을 잃지 않으면서 시각적 변화를 사용합니다.
- 클릭 유도 문구를 명확하고 적절한 위치에 유지합니다.
- 리디자인 시 중요한 기존 경로, 콘텐츠, 통합 및 사용자 여정을 보존합니다.
단순히 페이지를 더 길게 만들기 위해 섹션을 추가하지 마십시오. 미니멀리즘을 달성하기 위해 유용한 콘텐츠를 제거하지 마십시오.
5. 디자인 및 구현
사용자가 별도의 프로토타입을 요청하지 않는 한 기존 코드베이스에서 직접 작업하십시오.
- 프로젝트의 프레임워크, 규칙 및 패키지 매니저를 따릅니다.
- 합리적인 경우 기존 구성 요소를 재사용하고 개선합니다.
- 반복되는 패턴에 대해 재사용 가능한 구성 요소와 디자인 토큰을 만듭니다.
- 시맨틱 HTML 및 접근 가능한 상호작용 패턴을 사용합니다.
- 가능한 경우 실제 프로젝트 자산을 사용합니다. 사용 후기, 고객 로고, 통계, 수상 경력 또는 제품 기능을 지어내지 마십시오.
- 종속성을 신중하게 선택하고 불필요한 패키지를 피합니다.
- 링크, 버튼, 양식, 메뉴 및 기타 컨트롤이 의도된 작업을 수행하는지 확인합니다.
- 반응형 동작이 단순히 데스크톱 레이아웃을 축소하는 것이 아니라 의도적이도록 합니다.
- 이미지, 폰트 및 로딩 동작을 최적화합니다.
작동하는 애플리케이션을 정적 모형으로 대체하지 마십시오. 통합 또는 상호작용이 구현되고 테스트되지 않는 한 작동한다고 주장하지 마십시오.
모션 및 스크롤 표준
전역 부드러운 / 이징 스크롤
부드럽고 이징된 스크롤은 웹사이트 프로젝트의 기본 선호 사항입니다.
유동적이고 제어되며 자연스러운 느낌의 움직임을 목표로 하십시오:
- 적절한 경우 부드러운/이징 스크롤을 사용합니다.
- 페이지가 사용자 입력에 계속 응답하도록 이징과 지속 시간을 조정합니다.
- 마우스 휠, 트랙패드, 키보드 탐색 및 터치 입력을 지원합니다.
- 혼란스러운 점프를 유발하지 않으면서 앵커 탐색을 부드럽게 유지합니다.
- 과도한 스무딩, 인위적인 지연 또는 페이지가 사용자 입력과 분리된 느낌을 피합니다.
- 예상되는 브라우저 동작을 보존하고 불필요한 스크롤 잠금을 피합니다.
- 구현이 고정 요소, 동적 콘텐츠 및 경로 변경과 함께 작동하는지 확인합니다.
구현을 선택하기 전에 기존 스택을 검사하십시오. Lenis와 같은 라이브러리가 적합할 수 있지만 필수는 아닙니다. 디자인 및 접근성 요구 사항을 충족하는 경우 기본 브라우저 기능을 선호하십시오. 단지 라이브러리 자체를 위해 스크롤 라이브러리를 추가하지 마십시오.
prefers-reduced-motion을 존중하십시오. 모션이 줄어든 경험을 제공하고 핵심 콘텐츠와 탐색이 애니메이션 없이도 계속 사용 가능한지 확인하십시오.
선택적 섹션별 스크롤 기법
스토리텔링이나 이해를 향상시킬 때 선택적으로 사용하십시오:
- 고정 섹션: 섹션이나 시각적 요소를 제자리에 고정하는 동안 콘텐츠가 변경됩니다.
- 스크롤 기반 애니메이션: 애니메이션 진행 상황을 스크롤 위치에 연결합니다.
- 고정 스토리텔링: 관련 텍스트나 데이터가 변경되는 동안 시각적 요소를 고정합니다.
- 패럴랙스: 계층화된 움직임을 통해 절제된 깊이를 만듭니다.
- 수평 시퀀스: 직관적일 때 수직 스크롤을 수평 콘텐츠 이동에 매핑합니다.
- 섹션 전환: 목적 있는 전환으로 장면이나 섹션을 연결합니다.
- 마이크로 인터랙션: 호버, 포커스, 누름 및 상태 변경에 대한 반응형 피드백을 제공합니다.
부드러운 스크롤과 스크롤 하이재킹을 혼동하지 마십시오.
전체 페이지의 스크롤 동작을 제어하지 마십시오. 사용자가 갇힌 느낌을 받지 않아야 합니다. 직관적인 스크롤, 키보드 접근, 터치 동작, 브라우저 기록 및 콘텐츠에 직접 도달할 수 있는 기능을 보존하십시오. 고정 또는 스크롤 제어 섹션을 사용하는 경우 합리적인 모바일 및 모션 감소 대안을 제공하십시오.
모션 품질
- 모션은 계층 구조, 상태, 연속성 또는 브랜드 개성을 전달해야 합니다.
- 일관된 타이밍과 이징을 사용합니다.
- 모든 요소에 애니메이션을 적용하지 마십시오.
- 읽기 또는 상호작용을 방해하는 레이아웃 이동 및 애니메이션을 피합니다.
- 적합한 경우 성능 효과를 위해 변형 및 불투명도를 선호합니다.
- 애니메이션이 실패하거나 비활성화된 경우에도 필수 콘텐츠를 계속 볼 수 있고 사용 가능한 상태로 유지합니다.
품질 보증
첫 번째 구현 후에 완료하지 마십시오.
도구와 환경이 허용하는 경우:
- 기존 스크립트를 사용하여 프로젝트를 실행합니다.
- 브라우저에서 렌더링된 웹사이트를 검사합니다.
- 모든 관련 페이지와 중요한 상태를 검토합니다.
- 데스크톱, 태블릿 및 모바일 뷰포트 크기를 테스트합니다.
- 탐색, 링크, 양식, 메뉴 및 클릭 유도 문구를 테스트합니다.
- 마우스 휠, 트랙패드, 터치 및 키보드로 부드러운 스크롤을 테스트합니다.
- 고정 섹션 및 스크롤 애니메이션이 갇힘, 떨림 또는 레이아웃 문제를 일으키는지 확인합니다.
- 모션 감소 동작을 확인합니다.
- 콘솔 오류 및 실패한 네트워크 자산을 검사합니다.
- 간격, 타이포그래피, 정렬, 반응형 레이아웃 및 모션을 개선합니다.
브라우저 검사 또는 특정 테스트를 사용할 수 없는 경우 통과했다고 주장하지 말고 그렇게 말하십시오.
완료 정의
다음 조건을 충족하면 프로젝트가 준비된 것입니다:
- 디자인 방향이 실제 브랜드와 대상 사용자에 적합합니다.
- 시각적 계층 구조와 콘텐츠 흐름이 명확합니다.
- 페이지와 뷰포트 크기 전반에 걸쳐 경험이 일관됩니다.
- 전역 부드러운/이징 스크롤이 제어를 해치지 않으면서 정교하게 느껴집니다.
- 선택적 모션 기법이 마찰이 아닌 가치를 추가합니다.
- 기존 필수 기능이 그대로 유지됩니다.
- 대화형 요소가 의도한 대로 작동합니다.
- 접근성 및 모션 감소 동작이 고려되었습니다.
- 가능한 경우 구현이 실행되고 시각적으로 검토되었습니다.
- 알려진 제한 사항이 공개됩니다.
최종 응답
다음을 요약하십시오:
- 변경된 사항.
- 창의적 방향 및 주요 디자인 결정.
- 중요한 모션 및 스크롤 동작.
- 업데이트된 페이지 또는 구성 요소.
- 실제로 수행된 테스트.
- 남아 있는 문제 또는 제한 사항.
입증 없이 수상 경력, 완벽한 품질 또는 성공적인 테스트를 주장하지 마십시오.