Portfolio Landing Page
한 줄 소개
디자인과 코드, 두 영역의 작업물을 한곳에 모아 보여주는 단일 포트폴리오 사이트입니다.
왜 만들었나
작업물이 노션, 피그마, 깃허브, 베이스 등 여기저기 흩어져 있다 보니 파악하기도 보여주기도 어려웠습니다.
한 곳에서 내 모든 작업을 보여줄 수 있는 허브가 필요했습니다.
어떻게 풀어냈나
1. Design ↔ Dev 두 가지 모드
디자이너이자 퍼블리셔라는 두 영역을 함께 다루는 정체성을 시각적으로 표현하고 싶었습니다.
한 사이트에 두 색을 입혀, 보는 사람이 원하는 관점으로 전환할 수 있게 했습니다.
| Design Mode | Dev Mode |
|---|---|
| 핑크 / 퍼플 | 블루 / 시안 |
| UXUI · Motion · Graphic · PDP | Site · Toy |
URL 쿼리(?mode=dev / ?mode=design)로도 직접 진입 가능하도록 만들어, 링크를 공유할 때 모드를 지정해서 보낼 수 있습니다.
2. 작업물이 주인공인 레이아웃
처음엔 다크모드 + 글래스모피즘으로 만들었는데, 작업이 묻혀서 다시 갈아엎었습니다.
- 흰 배경 + 깔끔한 그리드
- Pretendard 고딕으로 가독성 우선
- 호버 효과는 미니멀하게 (살짝 들리고, 컬러만 변함)
- 카드 이미지 비율 4:3 으로 키워서 작업물이 가장 먼저 보이도록
3. 분류와 검색이 쉽도록
작업이 늘어날 걸 대비해 다중 필터링을 넣었습니다.
- 대분류 필터: Site / Toy / UXUI / Motion / Graphic / PDP
- 기술 태그 필터: 카드의
data-tech속성 기반으로 자동 칩 생성 - 두 필터는 AND 조합 가능 (예: Toy + JavaScript)
4. 단순하지만 단단하게
별도 프레임워크 없이 HTML / CSS / Vanilla JavaScript 만으로 구성했습니다.
- 빌드 도구 없이 GitHub Pages 그대로 배포
- 헤더 / 푸터는
fetch()로 분리해 컴포넌트처럼 재사용 - 무한 스크롤은
IntersectionObserver로 구현
사용한 기술과 이유
| 기술 | 이유 |
|---|---|
| Vanilla JS | 단순한 정적 사이트라 프레임워크 오버헤드가 부담 |
| CSS Custom Properties | 모드 전환을 변수 한 줄 변경으로 처리 |
| Fetch + outerHTML | 빌드 도구 없이 컴포넌트 분리 |
| IntersectionObserver | scroll 이벤트보다 가벼운 스크롤 감지 |
CSS order 속성 | HTML 순서와 표시 순서를 분리 (data-order) |
| Pretendard | 한국어 가독성 우선 |
| JetBrains Mono | 메타 정보(라벨, 날짜)에 사용 — 본문과 구분 |