큐레이션 · 오픈 · 무료

Verse Sh

React와 Three.js 실험에 집중하는 크리에이티브 개발자를 위한 미니멀 포트폴리오.

01

디자인 DNA

3D 실험을 보여주는 개발자의 다크모드 작업 공간.

02

컬러

순수한 블랙 배경에 밝은 회색 monospaced 텍스트와 은은한 다크 테두리를 사용하는 극도의 미니멀리즘.

03

타이포그래피

monospace

• display16px · 400
• h116px · 400
• body11px · 400

텍스트는 주로 대문자로 표시됩니다. · 모든 텍스트는 'Commit Mono' monospaced 폰트를 사용합니다. · 400 이상의 폰트 두께는 사용되지 않습니다.

04

여백

구조화된 그리드 레이아웃을 위한 일관된 16px padding과 간격.

05

표면 (라운드 / 그림자 / 경계선)

엄격한 격자 셀 구조를 만들기 위한 얇은 1px solid 테두리(#171717).

06

레이아웃

균일한 셀 크기와 테두리 셀 사이의 간격이 없는 2열 그리드 레이아웃.

07

모션과 인터랙션

인터랙티브 요소에 대한 opacity 전환(0.5초). · 3D 두개골 오브젝트는 지속적인 회전 또는 hover 인터랙션이 적용될 가능성이 높습니다.

링크와 인터랙티브 요소에 대한 은은한 opacity 변화. · 표준 링크 내비게이션.

08

컴포넌트

• button [LINK] 또는 [CODE]와 같은 대괄호로 감싸진 간단한 텍스트 기반 링크.
• card 미리보기 이미지와 기술 스택 및 링크가 포함된 하단 행이 있는 테두리 그리드 셀.
• chip 표시되는 것이 없습니다.
• input 표시되는 것이 없습니다.
• hero 브랜드명, 태그라인, 연락처 링크가 포함된 최상단의 미니멀 셀.

09

보이스와 금지 목록

• 톤 직설적이고 미니멀하며 개발자 중심적.
• 헤드라인 짧고 대문자의 monospaced 텍스트(예: 'VERSE', 'I MAKE COOL WEBSITES').
• CTA 기술적이고 절제된 스타일로 [LINK] 또는 [CODE]와 같은 대괄호 사용.

• 세리프 또는 산세리프 폰트를 사용하지 마세요 — 사이트 전체가 monospaced 타이포그래피를 사용합니다.
• 밝은 악센트 색상을 사용하지 마세요 — 팔레트는 엄격히 블랙, 그레이, 화이트로 구성됩니다.
• 둥근 모서리를 사용하지 마세요 — 모든 요소와 테두리는 날카로운 직선입니다.
• 복잡한 다중 열 레이아웃을 사용하지 마세요 — 사이트는 엄격한 2열 그리드를 사용합니다.
• 드롭 그림자를 사용하지 마세요 — 디자인은 플랫한 테두리와 배경 대비에 의존합니다.
• 굵거나 무거운 폰트 두께를 사용하지 마세요 — 텍스트는 균일하게 얇습니다(두께 400).
• 피하기: 마케팅 문구나 설득력 있는 언어.
• 피하기: 장식적이거나 세리프 타이포그래피.
• 피하기: 밝거나 화려한 UI 악센트.
• 피하기: 복잡한 레이아웃 구조.
• 피하기: 높은 폰트 두께.
• 피하기: 둥근 모서리나 부드러운 그림자.

10

팩 안의 실제 스크린샷

실제 페이지에서 캡처 · 실 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko