개인 포트폴리오 사이트 빌더
사용자가 자신의 배경과 작업을 명확하고 재사용 가능한 포트폴리오 웹사이트로 전환할 수 있도록 도와줍니다. 참조 시스템은 실제 다중 페이지 UI/UX 포트폴리오를 기반으로 하지만, 시각적 정체성은 선택 사항입니다. 사용자가 선택한 스타일을 유지하고 참조 구조는 적합한 경우에만 사용하세요.
워크플로
- 사용자의 대상 고객, 역할, 포트폴리오 콘텐츠, 선호하는 스택(있는 경우), 단일 페이지 또는 다중 페이지 사이트 여부를 파악합니다. 초보자에게는 간단한 구현을 추천하고 트레이드오프를 평이한 언어로 설명합니다.
- 발명된 전기나 프로젝트 사실로 채우기 전에 페이지 맵과 섹션 순서를 제안합니다. 누락된 콘텐츠가 스토리를 바꾸는 경우 요청하고, 그렇지 않은 경우 명확히 표시된 자리 표시자를 사용합니다.
- references/page-patterns.md에 설명된 공유 셸과 재사용 가능한 섹션을 구축합니다. 프로젝트 사례 연구를 구성 가능하게 만듭니다. 사용자가 관련 섹션을 포함, 생략, 재정렬할 수 있습니다.
- references/motion-catalog.md에서 명명된 모션 레시피를 제공합니다. 눈에 보이는 동작을 평이한 언어로 설명한 다음, 사용자의 스택으로 선택한 레시피를 구현합니다. 기본적으로 모든 모션을 추가하지 말고, 계층 구조나 상호작용을 명확히 하기 위해 모션을 사용합니다.
- 사용자의 시각적 방향을 타이포그래피, 색상, 간격, 이미지, 컴포넌트 전반에 일관되게 적용합니다. 참조 사이트의 팔레트는 시작 테마 중 하나일 뿐이며, 페이지 구조를 변경하지 않고 테마를 변경할 수 있습니다.
- 레이아웃을 반응형으로 만들고 상호작용이 키보드와 터치에서도 작동하도록 합니다. 축소된 동작 선호도를 존중하고, 눈에 보이는 포커스 상태를 제공하며, 애니메이션이 비활성화된 경우에도 필수 콘텐츠를 사용할 수 있도록 합니다.
- 제공된 페이지/컴포넌트와 명명된 모션을 요약하고, 사용자가 아직 제공해야 하는 콘텐츠를 지적합니다.
재사용 가능한 디자인 원칙
- 사람의 역할과 가치를 먼저 제시한 다음, 선택된 작업을 쉽게 찾을 수 있도록 합니다.
- 홈 페이지는 간결한 소개와 게이트웨이로 유지하고, 각 사례 연구는 자체적인 스토리와 증거를 담도록 합니다.
- 일관된 섹션 헤딩 패턴, 간격 스케일, 탐색, 푸터, 프로젝트 카드 시스템을 사용합니다.
- 프로젝트 페이지는 모든 프로젝트에 동일한 콘텐츠를 강제하지 않고 유연한 순서를 공유할 수 있도록 합니다.
- 모션은 미묘하고 목적이 있으며 일관되게 유지합니다. 모션 이름은 재사용 가능한 동작을 설명하며, 필수 라이브러리나 정확한 구현을 의미하지 않습니다.
- 참조 카피, 개인 데이터, 프로젝트 주장, 이미지 또는 소스 코드를 새 사용자의 사이트에 복사하지 마세요. 사용자 자신의 자료를 요청하거나 레이블이 지정된 자리 표시자를 사용하세요.
참조
- 사이트 맵을 계획하거나 페이지 및 사례 연구 섹션을 구축할 때는 references/page-patterns.md를 읽으세요.
- 사용자가 모션을 선택, 명명 또는 구현하도록 요청할 때는 references/motion-catalog.md를 읽으세요.