[아카이브] ISA-Archive v2.0.2후기

개인 아카이브 사이트 v2 리뉴얼 회고

구글 연동 테스트를 목적으로 과거에 만들었던 GitHub Pages 기반 개인 홈페이지 프로젝트가 있었다.
다만 당시에는 명확한 목적이나 방향성 없이, 머릿속에 떠오르는 이미지를 즉흥적으로 조합해 만든 사이트에 가까웠다. 그 결과 완성도나 활용도 모두 애매한 상태로 장기간 방치되었다.

흥미가 생기지 않았던 이유는 명확했다.
이 프로젝트는 “왜 존재해야 하는지”에 대한 답이 없었기 때문이다.

---

리뉴얼을 결심하게 된 배경

최근 해외 리모트 포지션과 프리랜서 업무를 동시에 고려하게 되면서, 기존에 생각해 두었던 Archive 컨셉에 Resume 컨셉을 결합하면 의미 있는 결과물이 될 수 있겠다는 판단이 들었다.

단순한 개인 홈페이지가 아니라,

• 기술 이력과 작업물을 구조적으로 정리하고
• 외부 채용 담당자나 협업자가 바로 이해할 수 있으며
• 장기적으로 유지·확장 가능한

개인 아카이브 + 엔지니어링 포트폴리오 형태로 재정의했다.

이 방향성을 기준으로 기존 기조는 유지하되, 목적에 맞게 전문적으로 리뉴얼하는 방식으로 v2 리빌드를 진행했다.

• 전체 개발 기간: 약 1~2주
• 집중 개발 구간(hot time): 약 3일

---

v1 구조와 한계

v1은 “아카이브라면 이런 것들이 있지 않을까?”라는 막연한 생각으로 구성한 카테고리 집합에 가까웠다.
시각적 전시와 기록 사이를 오가며, 당시 즐기던 게임에서 영감을 받은 디자인을 적용했다.

솔직히 말하면 완성도는 낮았다.
디자이너 없이 디자인 역량이 부족한 개발자가 혼자 진행한 결과물로 보면, 그럭저럭 이해 가능한 수준이었다.

기술적으로는 다음 정도를 갖춘 상태였다.

• 기본적인 반응형 레이아웃
• 상태 관리
• React Query 기반 API 파싱
• JSON Server 형태의 간단한 백엔드 구조

다만 이 모든 구조가 “명확한 쓰임”을 가지지는 못했다.
프로젝트의 목적 자체가 애드센스 테스트 정도였기 때문에, 구조가 자연스럽게 산만해질 수밖에 없었다.

---

v2 리뉴얼 방향과 구조 변경

리뉴얼 이후 v2의 메인 구조는 크게 달라 보이지 않을 수도 있다.
디자이너가 아니기 때문에 홈 화면 설계는 여전히 감각과 제한적인 이론에 의존했고, 세부적인 디자인 디테일은 AI의 도움을 적극적으로 활용했다.

다만 정보 구조와 목적은 명확하게 재정의했다.

1. 카테고리 재정비

• AI 발전으로 실효성이 떨어진 snippet, toy 카테고리는 제거
• project, package는 archive 하위로 통합
• 해외 리모트 / 프리랜서 목적에 맞게 resume 카테고리 추가
• 대표 작업을 강조하기 위한 work 카테고리 추가

2. 데이터 처리 방식 전환

초기에는 CMS 연동을 고려했으나, 우선순위 문제로 무기한 연기되었다.
이에 따라 방향을 전환하여 정적 사이트 + Contentlayer2 + MDX 조합을 선택했다.

• Next.js SSG 적극 활용
• 기존 store 기반 상태 관리 및 API 파서 로직 제거
  • 단, 구조 자체는 향후 확장을 고려해 일부 유지
• 콘텐츠는 MDX로 관리
• 썸네일 등 정적 자산은 public에서 관리

결과적으로 현재 구조는 매우 단순하다.

• MDX → Contentlayer → 정적 빌드
• 런타임 상태 관리 최소화
• 예측 가능한 렌더링

---

현재 상태

• resume, archive, work 기본 구조 완성
• 콘텐츠 정리는 일부 진행 중
• 레이아웃, 주요 버그, 정보 구조는 안정화 완료
• Resume는 PDF 인쇄를 고려해 고정형 레이아웃
• 그 외 페이지는 반응형 유지

디자인 측면에서도 이전보다 훨씬 정돈되었다.
솔직히 말해 디자인 퀄리티는 AI의 기여도가 매우 크다.
디자인 역량이 부족한 개발자라도, 감각과 판단만 있다면 AI를 통해 충분히 설득력 있는 UI/UX를 구현할 수 있다는 점에서 시대가 많이 변했다는 것을 체감했다.

---

SEO 및 기타 사항

• 기본적인 Meta, Open Graph 등 SEO 설정 완료
• 접근성(A11y)은 아직 본격적으로 고려하지 않음
  • 필요 시 추가 진행 예정
• Lighthouse 기준 전반적으로 양호
• 일부 이슈는 사이트 자체 문제가 아닌 서드파티 환경 이슈
•  

---

개발 과정에서 겪은 주요 이슈

1. Next / React / Storybook 버전 충돌

Next 16 + Vite 조합에서 'use client' 지시어가 정상 처리되지 않는 이슈가 발생했다.
React 플러그인으로 우회 처리했지만, 이 방식이 정석인지에 대해서는 여전히 의문이 남는다.

AI의 설명에 따르면 Next는 Webpack 기반, Vite는 이에 대한 지원이 제한적이라 구조적으로 충돌 가능성이 있다고 한다.
사소해 보이는 설정에서 예상치 못한 트러블이 발생했다.

---

2. Contentlayer + ESLint + Storybook 충돌

Contentlayer2로 넘어와도 MDX 관련 SSR 이슈는 여전히 해결되지 않았다.

Storybook + Chromatic 환경에서
MDX 관련 로직을 import하는 순간 ignore, mock 여부와 상관없이 에러가 발생했다.

• 캐시 삭제
• 의존성 전체 재설치
• 다양한 설정 조합 시도

모두 효과가 없었다.

현재는 Next 빌드와 Storybook 환경을 분리하고, 필요 시 주석 처리하는 방식으로 대응 중이다.
명백히 임시방편이며, 추후 자동화 또는 구조적 해결책을 고민할 예정이다.

---

3. GitHub Pages와 Next App Router 충돌

Next App Router의 base URI 구조가 GitHub Pages 라우팅과 충돌하면서, 간헐적으로 빈 페이지가 노출되는 문제가 발생했다.

• GitHub 환경 설정 문제로 추정
• 배포 직후라 DNS / CDN 캐시 이슈 가능성도 존재

당분간 시간을 두고 관찰할 계획이다.
결국 Next는 Vercel에 최적화된 프레임워크이기 때문에, GitHub Pages와의 조합에서 발생하는 제약은 어느 정도 감수해야 한다고 판단했다.

---

4. GitHub Actions CI/CD에서 SSG·SSR 이슈

로컬에서는 정상 동작하지만 CI/CD 과정에서만 빌드가 깨지는 상황이 종종 발생했다.
SSG 중심 프로젝트임에도 SSR 환경 설정을 신경 써야 하는 점이 번거로웠다.

설정상의 미세한 차이로 보이며, 추후 정리 대상이다.

---

마무리

이번 v2 리뉴얼은 단순한 디자인 개선이나 기능 추가가 아니라,
개인 프로젝트를 명확한 목적을 가진 제품 형태로 재정의한 작업이었다.

앞으로 이 아카이브는 단기적인 전시물이 아니라,
장기적으로 관리되는 개인 기술 기록이자 엔지니어링 포트폴리오로 유지할 계획이다.

---

관련 링크

• 사이트: https://yoonjonglyu.github.io/
• GitHub: https://github.com/yoonjonglyu/yoonjonglyu.github.io

Frontend Engineer | ISA - Archive

 

GitHub - yoonjonglyu/yoonjonglyu.github.io: homepage