NEU - Windows 테마 개인 홈페이지

notion image

NEU - Windows 스타일 테마 홈페이지

  • 진행 기간: 2025.10 ~ 2025.12
  • 역할: 개인 프로젝트

프로젝트 소개

NEU(NEU)는 Windows UI를 웹으로 구현한 개인 블로그입니다. 방문자는 데스크톱 환경처럼 여러 개의 윈도우를 열어 블로그 글과 프로젝트를 탐색하고, 뒤로가기/앞으로가기 히스토리 네비게이션으로 자유롭게 이동할 수 있습니다.
Notion을 CMS로 활용하여 글 작성은 Notion에서 편하게 하고, SSG로 빌드하여 빠른 로딩 속도를 보장합니다. Notion에 새 글을 작성하면 Vercel Cron + Deploy Hook으로 자동 배포되어 수동 배포 없이도 콘텐츠가 업데이트됩니다.

주요 기능

  • Windows 탐색기 스타일 UI
    • 여러 개의 윈도우를 동시에 열어서 탐색 가능
    • 드래그로 윈도우 이동, 리사이즈
    • 최소화, 전체화면, 닫기 버튼
    • 작업표시줄에서 윈도우 전환
    • 폴더(카테고리) 더블클릭으로 내부 파일 탐색
  • 히스토리 기반 네비게이션
    • 브라우저 뒤로가기/앞으로가기처럼 세션 내에서 이동
    • 검색으로 다른 글로 이동하면 히스토리에 저장
    • 폴더에서 다른 카테고리 탐색 시 히스토리 유지
  • Notion CMS 통합
    • Notion에서 글 작성, 이미지 업로드, 코드 블록 작성
    • 데이터베이스 속성으로 메타데이터 관리 (카테고리, 태그, 날짜 등)
    • Rich Text, 이미지, 코드 블록 등 모든 Notion 블록 지원
  • 자동 배포 시스템
    • Notion에서 글 작성/수정
    • 매일 새벽 3시, Vercel Cron이 실행
    • Notion API로 최근 24시간 내 변경된 글 확인
    • 변경 사항이 있으면 Deploy Hook 호출
    • Vercel에서 자동으로 SSG 빌드 및 배포

프로젝트 회고

기존의 흔한 블로그 템플릿에서 벗어나, 프론트엔드 개발자라는 정체성을 더 잘 보여줄 수 있는 공간을 만들고 싶었습니다. 그래서 “문서를 읽는 블로그”가 아니라, 데스크톱을 탐색하듯이 놀 수 있는 블로그를 목표로 삼았습니다.
이번 프로젝트에서 가장 신경 쓴 부분은 단순히 Windows UI를 흉내 내는 것이 아니라,
사용자가 진짜 PC를 다루는 것 같은 흐름을 느끼도록 만드는 것이었습니다.
  • 윈도우를 여러 개 띄워놓고 왔다 갔다 하는 경험
  • 작업표시줄에서 창을 전환하는 동선
  • 뒤로가기/앞으로가기를 눌러도 “페이지 전환”이 아니라 “탐색기에서 경로 이동”에 가까운 느낌
이런 디테일을 맞추기 위해, 어디까지가 웹이고 어디까지가 OS UX인지를 계속 고민하면서 구현을 진행했습니다. “그럴듯해 보이는 수준”에서 타협하지 않고, 가능한 범위 안에서는 최대한 Windows에 가까운 상호작용을 가져가려고 한 프로젝트였습니다.

아키텍처 변화에 대한 고민

이번 프로젝트를 진행하면서 가장 크게 달라진 점은 아키텍처에 대한 관점이었습니다.
예전에는 Atomic Design Pattern에 맞춰 Page / Template / Organism / Molecule / Atom 단위로 세세하게 나누는 방식에 집착했던 것 같습니다.
하지만 막상 프로젝트를 만들다 보니, “패턴을 지키기 위한 분리”가 오히려 개발을 어렵게 만들고,
도메인 관점에서 자연스럽지 않은 분리도 생겼습니다.
결국 돌고 돌아 “순정에 가까운 구조”로 돌아온 셈이지만, 그렇다고 Atomic Design을 공부한 시간이 헛되었다고 생각하지는 않습니다.
오히려 그 과정을 통해:
  • 어디까지 나누는 것이 적절한지
  • “재사용”과 “과한 쪼개기”의 경계가 어디인지
  • UI 조각을 잘게 나누더라도 도메인 맥락을 잃지 않으려면 어떻게 해야 하는지
등을 많이 고민해 볼 수 있었고, 지금도 아키텍처는 다르지만 비슷한 고민을 하면서 개발하고 있습니다.

아직 완성형은 아니지만

이 프로젝트는 아직 완성형 서비스라고 말하긴 어렵습니다.
  • 더 넣고 싶은 기능도 있고
  • 성능을 조금 더 다듬고 싶은 부분도 있고
  • 키보드 네비게이션이나 스크린 리더 대응 같은 접근성 측면에서도 챙기고 싶은 요소들이 많습니다.
솔직히 말하면,
“이것도 하고 싶고, 저것도 하고 싶다”는 생각을 다 반영하려고 하면 영원히 배포하지 못한 채 localhost에만 머무를 것 같았습니다.
그래서 이번에는,
“조금 아쉬워도, 일단 세상 밖으로 내보내 보자.”
라는 마음으로, 완벽하지 않은 상태를 어느 정도 인정하고 배포하기로 했습니다.
대신, 이 프로젝트를 완결된 산출물이라기보다는
“내 개발 실력이 자라면서 함께 자라나는 홈페이지”로 보는 관점을 가지려고 합니다.
  • 앞으로 새로운 기술을 배울 때마다
  • 더 나은 아키텍처나 상태 관리 방법을 떠올릴 때마다
  • UX나 접근성에 대한 이해가 깊어질 때마다
이 홈페이지에 하나씩 녹여 넣으면서, 시간이 지날수록 자연스럽게 “현재의 나를 가장 잘 보여주는 공간”으로 성장시켜 갈 계획입니다.