큐레이션 · 오픈 · 무료

Unlirice Ooo

전통적인 그리드를 거부하고 역동적이고 부유하는 구성을 선택한, 매우 실험적이고 표현적인 사진 포트폴리오.

01

디자인 DNA

파편화된 기억들의 부유하는 디지털 콜라주

02

컬러

엄격한 단색 UI로, 다채로운 사진 콘텐츠가 경쟁 없이 중심 무대를 차지할 수 있게 합니다.

03

타이포그래피

geometric-sans · humanist-sans

• display160px · 400
• heading28px · 400
• body16px · 400

부유하는 혼란스러운 요소들을 고정하기 위해 거대하고 과장된 타이포그래피를 사용합니다. · 거의 모든 요소에서 엄격한 400(Regular) 두께를 유지하여 깨끗하고 조용한 기본선을 보존합니다. · 가장자리가 뚜렷하고 브루탈리스틱한 미학을 유지하기 위해 장식적이거나 이탤릭체 텍스트를 피합니다.

04

여백

불규칙한

05

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

없음

06

레이아웃

유연한 비그리드 캔버스로, 요소들이 절대 위치 지정이나 CSS transform을 사용하여 부유하는 효과를 만들며 배치됩니다.

07

모션과 인터랙션

요소 표시를 위한 길고 부드러운 불투명도 전환(2초) · 상호작용 상태 변경을 위한 cubic-bezier 이징 · 지속적인 미세한 부유 또는 패럴랙스 움직임

요소는 포인터 커서를 통해 상태를 변경할 수 있으며, 종종 미세한 크기 조정이나 불투명도 변화를 유발합니다. · 부유하는 사진 요소들과의 직접적인 상호작용.

08

컴포넌트

• button 최소한의 상호작용 상태로, 대부분 클릭 가능한 부유하는 요소 또는 단순 링크로 표현됩니다.
• card 패딩, 테두리, 그림자 없이 원형 또는 타원형으로 잘린 사진.
• hero 거대한 하단 정렬 로고타입으로 고정된, 부유하고 회전되며 크기 조정된 원형 이미지로 채워진 역동적이고 전체 화면 캔버스.

09

보이스와 금지 목록

• 톤 추상적, 미니멀, 비언어적.
• 헤드라인 거대하고 stark하며, 감정적 억양 없이 엄격하게 소문자 또는 대문자.
• CTA 미세하거나 완전히 부재하며, 사용자를 안내하기 위해 시각적 구성을 의존합니다.

• 표준 UI 컨테이너를 사용하지 마세요 — 스크린샷은 테두리나 그림자 없이 부유하는 원형 요소를 보여줍니다.
• 전통적인 그리드 시스템을 사용하지 마세요 — 스크린샷은 유연하고 정렬되지 않은 방식으로 뷰포트에 흩뿌려진 요소들을 보여줍니다.
• 다양한 폰트 두께를 사용하지 마세요 — 스크린샷은 거의 전적으로 Regular(400) 두께 텍스트를 보여줍니다.
• 흰색 외의 배경색을 사용하지 마세요 — 스크린샷은 엄격한 흰색(#FFFFFF) 배경을 보여줍니다.
• 버튼이나 카드에 표준 둥근 사각형을 사용하지 마세요 — 스크린샷은 순수하게 원형 또는 타원형 잘림을 보여줍니다.
• 바쁘거나 질감이 있는 배경을 사용하지 마세요 — 스크린샷은 깨끗하고 stark한 흰색 여백을 보여줍니다.
• 피하기: 대화형 UI
• 피하기: 마케팅 용어
• 피하기: 빈密度 단락
• 피하기: 명시적인 내비게이션 레이블

10

팩 안의 실제 스크린샷

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

11

System Prompt

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