큐레이션 · 오픈 · 무료

Rog Ie

표현적인 비주얼 도구를 선보이는 Figma 프로DUCT 디자이너의 세련된 개인 포트폴리오입니다.

01

디자인 DNA

전문적인 기술과 개인적 특성을 결합한 디지털 스케치북

02

컬러

의도적으로 배치된 고채도 감정적 강조가 있는 중립적 캔버스

03

타이포그래피

transitional-serif · humanist-sans

• display24px · 500
• body14px · 400
• caption11px · 400

'HORROR'와 같은 특정 강조 키워드에는 대문자를 사용합니다 · 본문 텍스트의 기준선을 14px로 유지하여 높은 가독성을 유지합니다 · 주요 섹션 제목에는 세리프 서체를 엄격히 사용합니다

04

여백

여유로운 수직 패딩(64px)이 뚜렷한 콘텐츠 섹션을 정의합니다

05

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

주로 프로젝트 목록 구분선으로 사용되는 1px 얇은 실선 테두리

부유 요소용: 0px 3px 3px -2px rgba(0,0,0,0.2) · 미묘한 경계용: Inset 0px 0px 0px 1px rgba(0,0,0,0.05)

06

레이아웃

주요 콘텐츠 영역을 위한 중앙 정렬 단일 열 레이아웃

07

모션과 인터랙션

프로젝트 목록 항목 호버 시 부드러운 전환 · 상호작용 요소 변환을 위한 삼차함수(cubic-bezier) 이징

커서가 포인터로 변경되며, 미묘한 텍스트 색상 변화 또는 변환 · 프로젝트 상세 정보로 즉시 이동

08

컴포넌트

• button 무거운 버튼 컨테이너 없이, 타이포그래피 중심의 미니멀한 링크
• card 영화 포스터와 같은 이미지 중심의 스택형 요소
• chip 카테고리를 위한 간단한 인라인 태그
• input 제공된 뷰에서는 보이는 입력 필드 없음
• hero 아바타, 이름, 간단한 소개가 포함된 왼쪽 정렬 도입부

09

보이스와 금지 목록

• 톤 캐주얼하고 개인적이며 매우 전문적인
• 헤드라인 섹션을 고정하는 직접적인 세리프 중심 제목
• CTA 특정 색상 강조가 있는 미묘한 인라인 링크

• 순백(#FFFFFF) 배경을 사용하지 마세요 — 스크린샷에서는 부드러운 중립색 #EDEDED를 보여줍니다.
• 배경에 무거운 그라데이션을 사용하지 마세요 — 스크린샷에서는 평면적이고 단색의 표면을 보여줍니다.
• 모든 제목에 산세리프를 사용하지 마세요 — 스크린샷에서는 섹션 제목에 과도기적 세리프를 사용합니다.
• 여러 경쟁 강조색을 사용하지 마세요 — 스크린샷에서는 강조를 위해 고채도 레드를 단 하나만 사용합니다.
• 두꺼운 테두리나 무거운 카드 컨테이너를 사용하지 마세요 — 스크린샷에서는 1px 얇은 실선과 미묘한 그림자를 사용합니다.
• 넓고 양쪽 정렬된 텍스트 레이아웃을 사용하지 마세요 — 스크린샷에서는 타이트하고 중앙 정렬된 단일 열 레이아웃을 보여줍니다.
• 피하기: 공격적인 마케팅 언어
• 피하기: 밀도 높은 다단계 텍스트 블록
• 피하기: 지나치게 형식적인 기업 용어

10

팩 안의 실제 스크린샷

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

11

System Prompt

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