joonyoungyi.github.io — PRD
개요
이준영의 개인 블로그 겸 이력서 사이트. Jekyll 기반 정적 사이트.
표기 원칙
- 회사명: 항상
HYPERCONNECT(대문자 고정). “하이퍼커넥트”, “Hyperconnect” 사용 금지.- 단, 실적 서한·인용문 등 원문 그대로 옮겨야 하는 경우는 예외.
- 괄호 앞 띄어쓰기: 항상 한 칸 띄움. 예:
기능 (Photo Selector),KAIST (한국과학기술원) - 직급·직함: 영어 표기 유지. 예: Director, CEO, Staff Machine Learning Engineer, Android Engineer
- 직군: 영어 표기 유지. 예: ML researchers, software engineers, data scientists, PM
- 외국 기관명 h3: Freelance 등 영어 그대로
- 실적 인용: “실적 서한”으로 통일 (실적 발표 X)
- 인용문 스타일:
<em>태그로 이탤릭 처리, 별도 강조 불필요
디자인 시스템
기반
- 스타일: Airbnb 디자인 시스템 기반
- 폰트: 한국어 — Pretendard (CDN) / 코드 — Source Code Pro
색상 팔레트
| 변수 | 값 | 용도 |
|——|—–|——|
| --color-brand | #ff385c | Rausch Red, 링크 hover, 포인트 |
| --color-text | #222222 | 기본 텍스트 (near black, warm) |
| --color-text-secondary | #6a6a6a | 날짜, 보조 텍스트 |
| --color-text-light | #929292 | 태그 등 가장 연한 텍스트 |
| --color-border | #dddddd | 구분선 |
| --color-surface | #f7f7f7 | 코드 배경 등 |
| #444444 | — | 직함, 논문 제목 (본문보다 살짝 연함) |
폰트 사이즈 체계 (4단계)
| 크기 | 용도 |
|——|——|
| 1.25rem | 섹션 헤더 h2 (경력, 학력, 논문) |
| 1rem | 회사명 h3, 학교명, CONFERENCE/WORKSHOP PAPERS 레이블 |
| 0.9375rem | 직함, 논문 제목, 본문 bullet, 상세 내용 |
| 0.875rem | 날짜, 학교 부가 설명 (education-note) |
폰트 웨이트
| 요소 | weight | |——|——–| | 섹션 h2, 회사명 h3, CONFERENCE/WORKSHOP 레이블 | 700 | | 직함 (experience-header strong) | 500 | | 논문 제목 (publication-header strong) | 500 | | 본문 bullet, 날짜 | 400 |
색상 규칙
| 요소 | color |
|——|——-|
| 섹션 h2, 회사명 h3, 본문 bullet | var(--color-text) #222 |
| 직함, 논문 제목 | #444444 |
| 날짜, CONFERENCE 레이블, education-note | var(--color-text-secondary) #6a6a6a |
카드 / 구분선
- 포스트 목록: shadow 없음,
border-bottom: 1px solid var(--color-border)구분선만 - 카드 radius: 포스트 썸네일
var(--radius-md)(14px), 모바일var(--radius-sm)(8px)
레이아웃 간격 원칙
About 페이지 — 경력 섹션
| 요소 | 간격 |
|——|——|
| experience-company margin-bottom | 2.5rem (회사 간 간격) |
| experience-company h3 margin-top | 0 (경력 h2 바로 아래는 붙임) |
| experience-item margin-bottom | 1.5rem (역할 간 간격) |
| experience-header margin-bottom | 0.25rem |
| experience-details li margin-bottom | 0.25rem |
About 페이지 — 학력 섹션
| 요소 | 간격 |
|——|——|
| education-item margin-bottom | 2rem |
| education-header margin-bottom | 0.25rem |
| education-details > div margin-bottom | 0.125rem |
| education-note margin-top | 0.125rem |
About 페이지 — h2 섹션 헤더
| 요소 | 간격 |
|——|——|
| about-content h2 margin-top | 3rem |
| about-content h2 margin-bottom | 0.25rem |
About 페이지 — 논문 섹션
| 요소 | 간격 |
|——|——|
| publication-item margin-bottom | 1.5rem |
| publication-header margin-bottom | 0.5rem |
| CONFERENCE/WORKSHOP h3 margin-top | 2rem |
| CONFERENCE/WORKSHOP h3 margin-bottom | 0.75rem |
About 페이지 콘텐츠 원칙
경력 bullet 작성 규칙
- 문장체 통일:
~했습니다./~하고 있습니다.(마침표로 끝냄) - 수량 표기:
30+명,50만등 숫자+기호 형태 - 실적 인용 패턴:
Match Group 20XX년 X분기 실적 서한에 아래와 같이 소개됐습니다: <em>"..."</em> class="muted": 조직 규모 등 보조 정보 (font-weight 300, color #6a6a6a) — 현재는 미사용, 일반 bullet과 동일하게
논문 섹션 구성
- Conference Papers (위) → Workshop Papers (아래) 순서
- 저자 표기:
1저자,공동 1저자,2저자+ - 특이사항:
Oral Presentation,Best Paper Awards등<strong>처리
태그 체계 (7종)
포스트 태그는 아래로만 통일:
machine-learningrecommender-systemdata-scienceai-organizationresearchculture-interviewmachine-learning recommender-system(복합 허용)
모바일 대응
- 포스트 목록: edge-to-edge (
.home { margin: 0 calc(-1 * var(--spacing)); }) - 태그 사이드바: 숨김 (
display: none) - 썸네일: 72×72px,
var(--radius-sm) - 헤더: sticky 해제 (
position: static) - education/experience/publication header: column 방향 (
flex-direction: column)
로컬 서버
pkill -f jekyll 2>/dev/null; sleep 1
export PATH="/opt/homebrew/opt/ruby/bin:$PATH"
cd /Users/joonyoung/workspace/joonyoungyi.github.io
bundle exec jekyll serve --port 4001 --livereload 2>&1 &
run_in_background: true로 백그라운드 실행- 주소: http://localhost:4001