인터랙티브 포트폴리오 웹사이트 디자인

공간적 포트폴리오 소개

이 OpenDesign 홈페이지는 포트폴리오를 전형적인 랜딩 페이지가 아니라 시각적 환경으로 다룹니다. 오프닝 상태는 섬세한 그리드 위에 반사형 파란색과 흰색 3차원 레터링을 배치하고, 커서 같은 조형물을 오른쪽 아래 근처에 비껴 배치합니다. 이 구성은 방문자가 작업 아카이브에 도달하기 전에 아이덴티티를 확립합니다.

캡처된 오프닝 장면을 넘어 소스에는 AI 접미사가 붙은 OpenDesign 워드마크와 “Design for Everyone”, “Local-first, agent-native. No cloud lock-in.”이 이어집니다. 이러한 문구는 이후 텍스트 레이어의 브랜드 포지셔닝을 제시하며, 오프닝 스크린샷에는 표시되지 않습니다. 타이포그래피와 전환 시퀀스는 이러한 포지셔닝을 작업 아카이브와 연결하지만, 프로젝트 인덱스만 찾는 독자는 먼저 아이덴티티 레이어를 거쳐야 합니다.

소스는 이 콘셉트를 DESIGN.md에서 브랜드를 읽고 코딩 에이전트를 위한 HTML/CSS 아티팩트를 생성하는 방식으로 설명합니다. 이 아티팩트에서는 타이포그래피, 라벨, 그리드, 로컬로 렌더링된 3D 장면을 통해 그 아이디어를 표현합니다. 캡처만으로는 연결된 서비스나 제출 기능의 작동 여부를 입증할 수 없습니다.

브랜드 문구에서 작업 아카이브로

이 디자인은 개별 사례 연구만큼이나 프로젝트 간의 관계가 중요한 포트폴리오에 적합합니다. Work 상태에서는 “WORK”와 “CONTACT”가 “THEME[A]” 및 “SOUND[\]” 옆에 상단 내비게이션으로 계속 표시되고, 아카이브는 넓은 그리드 전체에 프로젝트를 배치합니다. 콘텐츠가 바뀌어도 방향 감각을 지속적으로 유지합니다.

표시된 아카이브에는 “PLUGIN MARKETPLACE”, “150 BRAND SYSTEMS”, “HYPERFRAMES”, “AMR ROUTER” 같은 라벨과 연도, 카테고리 마커, “OPEN SOURCE” 태그가 함께 포함됩니다. 이러한 반복 필드는 각 타일에 간결한 아이덴티티를 부여합니다. 독자는 별도의 상세 페이지를 열지 않고도 주제, 날짜, 유형을 훑어볼 수 있습니다. 단점은 짧은 라벨이 공유된 맥락에 의존한다는 점입니다. 익숙하지 않은 프로젝트에는 다른 곳에서 더 긴 보조 설명이 필요할 수 있습니다.

캡처된 왼쪽 아래 줄에는 “GMT-7 LA 18:49 19°C”가 표시되고, 하단 중앙 근처에는 “0720 X 0450 Y”가 표시됩니다. 소스의 시계는 브라우저의 로컬 시간을 시와 분 단위로 읽고, 온도는 19로 고정되며, 좌표는 포인터 위치와 뷰포트 크기에서 파생됩니다. 따라서 LA/GMT-7 라벨만으로는 시간대 변환이나 날씨 정보 연결을 입증할 수 없습니다. 이 조합은 작동 중인 위치 서비스를 입증하지 않으면서 계기판 질감을 제공합니다.

상태로 구성된 홈페이지

제공된 캡처는 하나의 연속된 페이지가 아니라 서로 다른 두 시각적 상태를 보여줍니다. 오프닝 상태는 3D 브랜드 장면을 중심에 두고, Work 상태는 그 강조점을 선정된 프로젝트 그리드와 여러 층의 프로젝트 이미지로 대체합니다. 이 상태 변화는 동일한 그리드, 타이포그래피, 내비게이션 용어를 유지하면서 아카이브에 도착했다는 감각을 부여합니다.

페이지 구조는 아이덴티티에서 제안, 아카이브로 이동합니다. “TURN AGENTS INTO A DESIGN ENGINE FOR ALL”은 큰 타이포그래피 문구로 기능하고, DESIGN.md와 로컬에서 구축된 아티팩트에 관한 설명이 이어집니다. 그 아래에서 프로젝트 타일은 페이지의 증거와 같은 자료가 되지만, 그 주장은 독립적으로 검증된 제품 증거가 아니라 작성자가 만든 예시 콘텐츠로 남습니다.

좁고 기술적인 라벨은 여백이 넓은 공간 전체에 리듬을 만듭니다. 장점은 강한 시각적 연속성이고, 단점은 프로젝트 이름, 연도, 카테고리 태그가 같은 크기에서 경쟁할 때 가독성이 낮아진다는 점입니다. 재현본은 헤드라인 문구와 아카이브 메타데이터 사이의 순서와 대비를 유지하면서 긴 프로젝트 이름이 안전하게 줄바꿈되도록 해야 합니다.

1. 장면으로 시작하기

   아카이브를 소개하기 전에 오프닝 3D 구성을 사용해 브랜드의 형태, 색상, 모션을 확립하세요.

2. 제안 명시하기

   아이덴티티와 프로젝트 콘텐츠 사이에 “Design for Everyone” 메시지와 로컬 우선 설명을 배치하세요.

3. 아카이브 노출하기

   반복되는 프로젝트 필드를 사용해 빠르게 비교할 수 있도록 하고, 더 깊은 프로젝트 세부 정보는 간결한 타일 외부에서 제공하세요.

보이는 디자인과 기능의 경계

이 아티팩트는 모노스페이스 라벨, 옅은 색 그리드, 파란색 반사형 지오메트리, 프로젝트 상태 전환, 이름이 지정된 타일로 구성된 아카이브라는 디자인 언어를 보여줍니다. 소스에서 확인된 런타임 상태에는 초기 3D 장면과 선정된 Work 그리드가 포함되며, 둘 다 소스에 선언된 3D 의존성을 사용해 렌더링됩니다.

소스는 로컬 Work 및 Contact 내비게이션과 브라우저에 저장되는 Theme 및 Sound 환경설정을 제공합니다. 갤러리는 오프닝 및 Work 레이아웃을 보여주지만, 검증된 오디오 또는 프로젝트 상세 워크플로는 보여주지 않습니다. 인터랙티브 프리뷰는 사용할 수 없습니다. 이름, 연도, 수치는 현재 OpenDesign 기능이 아니라 샘플 콘텐츠이며, 캡처만으로는 연결된 서비스나 제출 기능을 입증할 수 없습니다.