포트폴리오 자체를
하나의 콘텐츠로
‘기획자의 책상’이라는 메타포로 첫인상과 탐색을 설계하고,
바이브 코딩으로 직접 구현·운영한 웹사이트입니다.
포트폴리오를 담는 그릇도 콘텐츠로 봤습니다
단순히 프로젝트를 나열하는 포트폴리오 웹사이트로 표현하기보다, 웹사이트 자체에서 저의 강점을 보여주고자 했습니다.
방문자가 첫 화면부터 콘텐츠를 탐색하고 선택하는 과정으로 구성했습니다. 이를 통해 웹사이트를 단순히 작업물을 확인하는 공간이 아니라, 하나의 콘텐츠를 직접 경험하는 듯한 즐거움을 느낄 수 있는 웹사이트로 기획했습니다.
기획자의 책상
책상 위 오브젝트를 장식으로 두지 않고, 각각의 콘텐츠로 이어지는 탐색 장치로 설계했습니다.
태블릿 → 프로젝트
가장 중요한 작업물을 앱처럼 열어보는 프로젝트 허브로 연결했습니다.
사원증 → 소개
사원증이라는 익숙한 물건을 통해 소개로 이어집니다.
포스트잇 → 방명록
짧은 메모를 남기는 특성에 맞춰 방문자가 메시지를 남기도록 했습니다.
스탠드 → 조명 인터랙션
사용자가 직접 불을 켜면서 책상 속 콘텐츠 탐색이 시작되도록 만들었습니다.
ChatJJK → 대화형 포트폴리오 안내
방문자의 질문에 따라 프로젝트와 기획 경험을 안내하는 대화형 콘텐츠로 직접 제작했습니다.
몰입형 첫인상과 빠른 탐색을 분리했습니다
한 가지 방식만 강요하지 않고, 천천히 둘러보는 방문자와 빠르게 확인하는 방문자 모두를 고려했습니다.
책상 위 오브젝트를 직접 눌러보며 사이트의 콘셉트와 주요 콘텐츠를 발견합니다.
스크롤하면 Projects·About을 일반적인 웹 구조로 빠르게 확인할 수 있습니다.
직접 운영 가능한 구조로
기능을 시연하는 일회성 화면이 아니라 콘텐츠를 계속 추가하고 다듬을 수 있는 개인 웹사이트로 구현했습니다.
순수 HTML·CSS·Vanilla JS
별도 프레임워크 없이 콘텐츠 중심의 정적 사이트로 구성해 구조를 단순하게 유지했습니다.
JSON·마크다운 기반 관리
프로젝트와 글을 데이터로 분리해, 페이지 구조를 다시 만들지 않고 내용을 업데이트할 수 있게 했습니다.
배포 이후까지 직접 운영
Vercel 배포, Supabase 방명록, 테마 전환과 반응형 화면을 연결하고 실제 운영 과정에서 계속 수정했습니다.
도구보다 판단을 중심에
Claude·Codex로 구현 속도를 높였지만, 문제 정의와 구조 설계, 결과 검수와 운영 판단은 직접 수행했습니다.
꼭 필요한 기능만 남겨두고, 불필요한 요소를 덜어내는데 집중했습니다
5일 동안 기능을 늘리는 대신 방문 목적을 기준으로 무엇을 남길지 판단하고, 구조와 편의성을 계속 다듬었습니다.
- DAY 1
사이트 구조 제작
기획자의 책상 콘셉트와 인터랙티브 랜딩, 내부 콘텐츠로 이어지는 기본 구조를 만들었습니다.
- DAY 2
콘텐츠 관리와 운영 구조 정리
JSON·마크다운 기반 콘텐츠 관리 방식과 배포 이후 운영할 수 있는 구조를 정리했습니다.
- DAY 3
랜딩 페이지 디테일 수정
책상 오브젝트와 조명 인터랙션, 화면의 정보 위계를 다듬어 첫인상을 구체화했습니다.
- DAY 4
방문 목적을 기준으로 기능 최소화
기능이 많을수록 핵심 작업이 흐려질 수 있어, 방문자가 프로젝트와 기획 역량을 확인하는 데 필요하지 않은 기능은 덜어냈습니다.
- DAY 5
빠른 탐색과 편의성 개선
몰입형 랜딩 아래에 대표 프로젝트와 소개를 바로 확인하는 영역을 추가하고 탐색 흐름을 정리했습니다.
기획부터 제작까지 스스로 진행했습니다
콘셉트 설정, 구조 설계, 구현, 운영까지 전 과정을 스스로 배우며 진행했습니다.
이 과정에서 좋은 기획은 기능을 계속 더하는 것이 아니라, 목적에 필요한 요소를 판단하고 남기는 일이라는 것을 배웠습니다.