Manrope
Art. Planning.
Development.
0123456789
Aa400
Aa450
Aa500
Aa650
Aa700
영문·숫자 · 가변 굵기 400–800
A language
for the work.
글자의 크기와 굵기, 여백과 색이 만드는 읽기의 순서.
Jay. on the art의 공통 디자인 기준을 모았습니다.
두 글꼴, 하나의 리듬.
영문과 숫자는 Manrope, 한글은 Noto Sans KR을 사용합니다. 크기와 굵기로 위계를 만들고, 모든 표기는 기울임 없이 읽습니다.
Noto Sans KR
상상에서 경험으로.
서로 다른 언어를
하나의 흐름으로.
가나400
가나450
가나500
가나650
가나700
한글 · 가변 굵기 400–900
공통 글꼴 순서는 Manrope → Noto Sans KR → sans-serif입니다. 웹 폰트가 로드되지 않으면 기기의 산세리프 글꼴로 표시됩니다. 아래 650과 450은 가변 폰트의 중간 굵기입니다.
크기보다 먼저, 위계.
이름과 핵심 문장을 먼저, 설명을 그다음에. 큰 제목은 크기에 맞춰 조이고, 한글 본문은 −0.012em으로 미세하게 다듬습니다. 작은 영문 메타는 판독성을 위해 제한된 양의 자간을 유지합니다.
| 역할 / 토큰 | 데스크톱 | 모바일 | 굵기 · 줄높이 · 자간 |
|---|---|---|---|
첫 화면 이름--type-hero-name | 24px | 22px | 650 · 1.55 · −0.04em |
첫 화면 핵심 문장--type-hero-role | 32px | 28px | 650 · 1.55 · −0.04em |
첫 화면 설명--type-hero-description | 22px | 18px | 450 · 1.8 · −0.012em |
섹션 제목--type-display | clamp(40px, 4.4vw, 66px) | clamp(34px, 8.8vw, 46px) | 650 · 1.4 · −0.055em |
소개 문단--type-intro | 22px | 18px | 450 · 1.8 · −0.012em |
경력 회사·연도--type-company | 19px | 17px | 500 · 1.55 · −0.04em |
경력 역할--type-role | 23px | 21px | 650 · 1.55 · −0.04em |
경력 설명--type-career-body | 17px | 15px | 400 · 1.8 · −0.012em |
영문 메타--type-meta | 12px | 11px | 700 · 1.5 · +0.075em |
실제 문장으로 읽기.
첫 화면과 소개, 경력의 같은 토큰을 사용한 표본입니다. 화면이 좁아지면 글자 크기와 줄바꿈이 함께 바뀝니다.
최효재
상상한 세계를, 경험할 수 있는 형태로.
아트의 의도와 기획의 구조, 기술의 가능성을 하나의 제작 흐름으로 연결합니다.
AI와 웹 기술을 활용해 기획부터 구현까지 확장하고 있습니다.
만들어온 세계,
이어지는 이야기.
공간과 비주얼이 만드는 감각, 기획이 정리하는 경험의 구조, 기술이 여는 가능성을 한 방향으로 연결합니다. 서로 다른 전문성이 같은 목표를 향하도록 제작의 흐름을 설계하고 결과물로 이어갑니다.
MORAI · 2024
3D Environment 파트장
디지털 트윈과 SimReady 자율주행 시뮬레이션 환경을 디렉팅했습니다.
미색 위의 선명한 문장.
읽는 글자는 중립색으로, 코랄은 점과 진행 표시, 링크를 가리키는 순간에 사용합니다. 소개 문단도 제목과 같은 잉크색으로 유지합니다.
Paper
#F6F1E8--paper / 기본 바탕
Ink
#182525--ink / 제목
Strong
#182525--text-strong / 주요 설명
Muted
#656565--muted / 보조 정보
Coral
#FF616B--primary / 그래픽·상호작용
읽을 만큼, 비워두기.
홈의 왼쪽 여백을 유지하고 본문 길이를 제한합니다. 작은 화면에서는 표와 표본을 한 열로 바꿔 가로 이동 없이 읽을 수 있습니다.
- 페이지 여백
--pad / --pad-left - 기본: clamp(24px, 5.5vw, 96px)
모바일: 23px
왼쪽: 기본 여백 × 2
모바일 왼쪽: 46px - 설명과 본문 폭
--measure-hero / --measure-intro / --measure-body - 첫 화면 설명: 최대 730px / --measure-hero
경력 본문: 최대 56ch
모바일: 사용 가능한 너비 안으로 줄바꿈 - 참조 문서 콘텐츠 폭
--content-max - 최대 1320px
양쪽 페이지 여백은 별도
작은 화면에서는 한 열 - 서명과 이름 사이
--space-signature - 데스크톱: 28px
모바일: 24px
크기를 줄여도 위계는 유지 - 섹션의 여백
--space-section - 참조 문서 섹션 하단: 120px
모바일: 80px
홈의 스크롤 무대 높이는 장면별 적용 - 프레임과 초점
--radius-frame / --radius-focus - 참조 프레임: 4px
초점 윤곽 모서리: 3px
초점 선 2px / 바깥 간격 6px
8px
16px
24px
32px
48px
64px
가벼운 서명, 같은 정체성.
최신 rounded 가로형과 세로형을 원래 비율로 표시합니다. 배경과 글자 안쪽은 투명하며 코랄 닷은 모든 변형에서 같은 색입니다.
홈의 대표 서명 폭은 clamp(150px, 15vw, 225px), 모바일은 145px입니다. 위 비교판은 윤곽을 보기 위한 큰 표본이며, 실제 첫 화면 크기는 03의 표본에서 확인할 수 있습니다. 헤더와 푸터의 워드마크 크기는 별도로 유지합니다.
작은 신호로, 분명하게.
일반 링크는 가리키거나 키보드로 선택하면 코랄 글자와 1px 밑줄을 보여줍니다. 키보드 초점에는 별도의 잉크색 윤곽이 있어 위치를 확인할 수 있습니다.
- 기본 상태
- 주변 텍스트의 색을 따릅니다.
밑줄은 투명한 상태로 시작합니다. - 호버·키보드 초점
- 글자·밑줄 #FF616B
밑줄 두께 1px
글자와 밑줄 간격 0.25em - 키보드와 작은 화면
- 초점 선 2px / 간격 6px
탐색 링크 높이 최소 44px
모션 감소 설정에서는 전환 효과 생략