포트폴리오 사이트 구축기

지금 보고 계신 사이트는 7xz.dev의 ver 3입니다. 앞의 두 버전은 코드를 한 줄도 물려주지 않고 버렸습니다. 뭐였고 왜 버렸는지 적어두고자 합니다.

ver 1 · 정적 사이트 (2025년 11월) (최초이자 바로 직전까지 사용되던 버전)

순수 HTML과 CSS. 빌드 도구도 프레임워크도 없이 style.css 한 장(약 500줄)과 최소한의 스크립트로 구성. 폰트는 Google Fonts의 Inter와 IBM Plex Mono를 사용했습니다.

컨셉은 “PORTFOLIO & LAB”이었습니다. 첫 화면에 큰 제목과 “Start Simple, Be Great.”, 그 아래 “The Digital Workspace of Sihyeon Park. AI Engineering & Home Lab.” About 페이지는 “Do More With Less. Minimum code, Maximum impact.” 지금 사이트의 슬로건과 유사하고 비슷한 결이죠

ver 1 첫 화면

Projects 페이지 이름은 “Engineering Log”였고, 상태 뱃지(Completed / Active / Planned)가 붙은 카드로 작업을 나열했습니다. YOLOv8 Zone Alert, 포트폴리오 사이트 자체, 이후 추가된 뉴스 신뢰도 감사기, 그리고 “Self-Hosted Architecture — Planned” 카드(Synology NAS와 Docker, Nginx로 학교 웹서비스를 호스팅하겠다는 계획).

ver 1 Engineering Log

member.html은 이름, 소속, 연락처등이 담긴 제 정보가 담긴 페이지였습니다. 기업의 ID카드에서 모티브를 받아서 디자인했습니다.

ver 1 신분증 카드

뉴스 신뢰도 검사기 추가

이후 학교에서 AI API를 이용한 웹 제작 대회를 했고, 챗봇형식의 웹을 만들면 진부할 것 같아 URl이나 텍스트를 붙여넣으면 AI가 뉴스의 편향도, 문맥, 논리 등을 따져 신뢰할 수 있는 뉴스인지에 대한 종합 판단 점수를 매기는(Decoding AI Judgment: How LLMs Assess News Credibility and Bias 연구 의거) 시스템을 만들었습니다.

ver 1 뉴스신뢰도검사기

ver 2 · 동적 사이트로 변환 시도 (개발중 개발 중단, 배포 x)

정적 사이트를 걷어내고 React와 Vite로 처음부터 사이트를 재 구축하였고, 배포는 Cloudflare Pages, 백엔드는 Render의 FastAPI. Framer Motion 페이지 전환, ⌘K 커맨드 팔레트, 한/영 토글, 다크/라이트, 전부 localStorage 유지 등 다양한 변화를 시도했습니다. 당시 외주(계약상 비공개)에서 고객 요청으로 리엑트 기반 동적 웹사이트를 구축했고, 이 김에 내 사이트도 동적으로 만들고자 했습니다.

핵심은 뉴스 신뢰도 감사기를 제품으로 키운 것이었습니다. 논리 오류, 편향, 선정성을 분석하고 더 상세히, IP 기반 크레딧 제한(기본 10회/일), 결과 공유 링크, 로컬 히스토리(최대 20개)까지 추가했고, 거기에 어드민 패널을 얹었습니다. 비밀번호 인증, 통계 대시보드(총 사용자, 오늘 활성, 차단, 총 분석), 상위 7명 SVG 막대 차트, IP 검색, 크레딧 지급과 초기화, 차단과 해제, 사용자 삭제 등등 더욱 더 상세한 관리가 가능한 동적 웹사이트 프로덕트로 계획하고 개발을 했으나..

왜 둘 다 버렸나

돌아보면 버전을 거듭할수록 제품에 가까워졌습니다. ver 1에 이미 “Home Lab”과 자가 호스팅 계획이 있었고, ver 2는 거의 아무도 안 쓰는 기능(뉴스 감사) 하나에 사용자 계정, 크레딧, IP 제한, 어드민 대시보드를 붙였습니다. 개인 사이트를 만든다면서 SaaS를 만들고 있었습니다.

제가 원한 건 제 놀이터였습니다. 무엇을 공부했고, 무엇을 만들었고, 무엇이 실패했는지 적는 곳, 내가 뭘 만들었고, 내가 달고싶은걸 달고, 하고싶은거 눈치 안보고 다 하는

ver 3는 그 마지막입니다. 정적에, 서버 없고, 계정 없고, Astro로 짠 실험실 노트. ver 1의 “Engineering Log”는 /log가 됐고, 뉴스 감사기는 work 항목 하나로 남았습니다.

그리고 그 이전의 어떤것보다 갚지고, 어떤것과도 다른 결과물인 7xz Lab이 남았습니다.