큐레이션 · 오픈 · 무료

Phippscharlie

강렬한 타이포그래피와 몰입감 있는 사진을 사용하여 세련된 비주얼 아이덴티티를 선보이는 고급 그래픽 디자인 포트폴리오입니다.

01

디자인 DNA

웹으로 가져온 고급 인쇄 잡지 레이아웃

02

컬러

풀블리드 포토그래피와 대담한 블랙 섹션을 사용하는 고대비 단색 팔레트로 극적인 초점을 만듭니다

03

타이포그래피

grotesque-sans · monospace

• display162px · 400
• headline63px · 400
• body20px · 400
• caption13px · 400

디스플레이 타입에는 극도로 타이트한 음수 자간을 적용합니다 · 모든 타이포그래피에 일관된 레귤러 웨이트를 유지합니다 · 본문 텍스트는 편안한 읽기 크기로 유지하되, 디스플레이 타입이 지배적이게 합니다

04

여백

에디토리얼 느낌을 위한 넉넉한 여백과 비대칭 배치

05

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

최소화하여 미세한 구분에만 사용

06

레이아웃

오버레이된 텍스트가 있는 풀블리드 히어로 이미지, 화이트와 블랙 섹션이 교차하는 구성

07

모션과 인터랙션

불투명도 페이드인 · scroll 표시를 위한 부드러운 변환 효과

링크와 인터랙티브 요소의 불투명도 감소 · 즉각적인 시각적 피드백을 주는 표준 포인터 커서

08

컴포넌트

• button 미세한 hover 불투명도 변화가 있는 최소화된 텍스트 링크
• card 최소화된 텍스트 오버레이가 있는 이미지 중심의 대형 프로젝트 쇼케이스
• chip 보이지 않음
• input 보이지 않음
• hero 거대한 풀블리드 타이포그래피가 있는 풀스크린 포토그래픽 배경

09

보이스와 금지 목록

• 톤 자신감 있고 전문적이며 절제된
• 헤드라인 컨테이너 가장자리를 벗어날 정도로 크고 임팩트 있는 문장
• CTA 눈에 띄는 버튼보다는 미세한 텍스트 링크

• 밝은 악센트 색상을 사용하지 마세요 — 스크린샷은 화이트, 블랙, 포토그래픽 톤의 엄격한 단색 팔레트를 보여줍니다
• 장식적인 테두리나 그림자를 추가하지 마세요 — 스크린샷은 높이 효과가 없는 완전히 평평한 표면을 보여줍니다
• 작고 수줍은 타이포그래피를 사용하지 마세요 — 스크린샷은 뷰포트를 지배하는 거대한 디스플레이 타입을 보여줍니다
• 모든 콘텐츠를 중앙 정렬하지 마세요 — 스크린샷은 에디토리얼 다이나믹을 위한 비대칭 텍스트 배치를 보여줍니다
• 무거운 버튼 스타일을 사용하지 마세요 — 스크린샷은 최소화된 시각적 무게감의 텍스트 전용 내비게이션 링크를 보여줍니다
• 레이아웃을 과도하게 채우지 마세요 — 스크린샷은 요소 간 넉넉한 여백과 숨쉴 공간을 보여줍니다
• 피하기: 과도한 장식
• 피하기: 밝은 색상
• 피하기: 시각적 혼잡

10

팩 안의 실제 스크린샷

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

11

System Prompt

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