큐레이션 · 오픈 · 무료

Myafterglo

에디토리얼 포토그래피와 미니멀 UI를 결합한, 인티밋 웰니스 제품을 위한 정제된 갤러리형 이커머스 경험.

01

디자인 DNA

하이엔드 디자인 잡지의 절제된 감성으로 소개된, 인티밋 웰니스 오브제의 큐레이션된 갤러리.

02

컬러

따뜻하고 차분한 뉴트럴 톤이 부드러운 캔버스를 제공하여, 풍부한 사진 이미지가 중심을 차지하도록 합니다.

03

타이포그래피

transitional-serif · humanist-sans

• display132px · 400
• heading50px · 400
• body15px · 400

우아함을 전달하기 위해 크고 표현력 있는 헤드라인에는 트랜지셔널 세리프를 사용합니다. · 가독성을 위해 탐색 및 UI 요소에는 휴머니스트 산스를 사용합니다. · 대문자 디스플레이 텍스트에는 넉넉한 자간을 유지합니다.

04

여백

대형 사진 요소 주변으로 넓은 간격을 두어, 공간감 있고 개방된 레이아웃을 구현합니다.

05

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

입력 필드와 미세한 구분선에는 1px solid rgba(19, 19, 19, 0.15)를 사용합니다.

rgb(203, 201, 189) 0px -6.66667px 0px 0px inset

06

레이아웃

텍스트 오버레이가 중앙에 위치한 풀블리드 히어로 섹션 이후, 에디토리얼 이미지를 위한 중앙 정렬 콘텐츠 열이 이어집니다.

07

모션과 인터랙션

제품 캐러셀을 위한 부드러운 슬라이드인 트랜지션. · 히어로 섹션의 텍스트 오버레이를 위한 섬세한 페이드인 효과.

인터랙티브 요소에 대한 미세한 커서 변화(pointer)로, 미학을 유지하기 위해 최소한의 시각적 피드백 제공. · 부드러운 상태 전환으로 즉각적인 응답.

08

컴포넌트

• button 'Start Exploring'을 위한, 모서리가 둥글게 처리된(border-radius: 5px) 미니멀하고 아웃라인 스타일의 버튼.
• card 고품질 포토그래피와 넉넉한 여백에 의존하는, 깔끔하고 보더리스한 카드.
• chip 헤더 내의 단순한 텍스트 기반 탐색 링크.
• input 상단 탐색 바에 통합된 미니멀한 검색 및 계정 아이콘.
• hero 크고 겹쳐지는 세리프 타이포그래피와 단순한 CTA 버튼이 있는, 풀스크린 분할 이미지 히어로.

09

보이스와 금지 목록

• 톤 세련되고, 친밀하며, 영감을 주는.
• 헤드라인 사진 이미지와 조화를 이루는, 크고 표현력 있는 트랜지셔널 세리프 타이포그래피.
• CTA 단순하고 직접적이며 절제된, 주로 아웃라인 버튼을 사용합니다.

• 선명하고 네온 색상을 사용하지 않습니다. 스크린샷은 따뜻한 그레이, 오프화이트, 딥 블랙으로 구성된 차분한 팔레트를 보여줍니다.
• 다크 모드 인터페이스를 사용하지 않습니다. 주요 배경은 따뜻한 오프화이트(#f3f2ec)입니다.
• 날카롭고 기하학적인 산세리프 폰트를 사용하지 않습니다. 디스플레이 타이포그래피는 정제된 트랜지셔널 세리프입니다.
• 두꺼운 드롭 섀도우나 두꺼운 보더를 사용하지 않습니다. 서피스는 플랫하며 최소한의 미세한 인셋 섀도우만 사용합니다.
• 작은 간격으로 복잡한 그리드를 사용하지 않습니다. 레이아웃은 섹션 간 넉넉한 여백을 두어 공간감 있게 설계됩니다.
• 일반적인 제품 사진을 사용하지 않습니다. 이 사이트는 독특한 조명으로 예술적인 정물화 구성을 사용합니다.
• 피하기: 과장되고 공격적인 마케팅 언어
• 피하기: 지나치게 기술적이거나 임상적인 설명
• 피하기: 두꺼운 보더나 그림자가 있는 복잡한 레이아웃

10

팩 안의 실제 스크린샷

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

11

System Prompt

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