사진 사진 사진 사진 사진 사진 사진 사진
사진 사진 사진 사진 사진 사진 사진 사진
사진 사진 사진 사진 사진 사진 사진 사진
사진 사진 사진 사진 사진 사진 사진 사진

WELCOME TO MY HOMEPAGE

Sungdae's
Homepage

공부하고, 기록하고, 공유하는 곳

SCROLL

개발 과정

2025.04.10 · Step 1

기술 스택 선정 · 환경 세팅

  • Frontend: HTML / CSS / Vanilla JS
  • Backend: Node.js (Express) + MySQL
  • MVC 패턴으로 구조 설계
  • GitHub 레포 생성, git init부터 첫 push까지 연동
  • .env로 DB 접속 정보 관리, .gitignore로 민감 파일 제외
2025.04.11 · Step 2

DB · 백엔드 구축

  • Railway에 MySQL 배포, Workbench로 원격 접속해 스키마 적용
  • Express 서버 세팅 (express · mysql2 · dotenv · nodemon 설치)
  • users · posts · comments 테이블 설계
  • 세션 인증 (bcrypt), 게시글 · 댓글 · 회원 API 전체 구현
2025.04.14 · Step 3

프론트엔드 구현 (ChatGPT 시절)

  • 로그인 · 회원가입 · 게시판 · 댓글 UI 구현
  • menubar 동적 삽입, 세션 타이머, 이미지 업로드까지
  • 다 마치지 못한 채 입대 전 여행을 떠나며 방치
  • 2025년 6월 2일 입대
2026.06.05 ~ 2026.06.07 · Step 4

휴가 · Claude로 전면 개편

  • 1년 만에 하다보니 코딩 지식이 백지 상태
  • 사용하는 AI를 ChatGPT->Claude로 변경
  • AI 보조에서 Vibe Coding + Harness Engineering
  • 밀린 버그 수정 (스키마 불일치, 권한 처리, 이벤트 중복 등)
  • 메뉴바 · 게시판 UI 전면 재설계 · Study 페이지 · 프로필 기능 추가
2026.08.08 ~ 2026.08.09· Now

INTRODUCE 개편 · 코드 정리

  • 휴가 복귀하고 두 달 간의 아이디어를 정리해서 외박때 반영
  • INTRODUCE 페이지를 폴라로이드 · 포스트잇으로 개편, 사진과 글은 채우는 중
  • 구상만 하던 계획을 ROADMAP.md로 문서화, 단계화
  • 전체적 틀 변화(로그인 삭제, BOARD 삭제, ARCHIVE 신설, 메뉴바 변경 등)
  • cafe24에서 도메인 seongdae5.com 구입하고 vercel 연동

사용한 기술들

Node.js Runtime
Express Backend Framework
MySQL Database
Vanilla JS Frontend
HTML / CSS Markup & Style
Three.js 3D Rendering
Git Version Control
OpenAI
ChatGPT AI Assistant
Claude
Claude AI Assistant

개발비화

어느 날 문득 개인 홈페이지가 만들고 싶어졌다. 뭐라도 하면 되지 않겠나 싶어서 그냥 바로 시작했다. 기능을 하나씩 생각해보며 파일 구조를 짜고, 백엔드부터 먼저 쌓아 올린 다음 프론트는 일단 틀만 잡았다.

그런데 만들다 보니 "이것도 있으면 좋을 것 같은데?" 하고 하나둘 넣다보니 파일이 엄청 늘어났고, 결국 처음부터 다시 설계하게 됐다. 이럴 줄 알았으면 설계를 좀 더 해보고 시작할 걸 그랬다.

그렇게 정신없이 갈아엎던 와중에 입대가 코앞으로 다가왔다. 입대를 앞두고 어느 순간부터 커밋이 뚝 멈췄다. 정보보호병으로 가게 되면서 Linux와 정보 보안 공부에 시간을 쏟았고, 홈페이지는 완성하지 못한 채 고쳐야 할 문제들만 잔뜩 쌓인 상태로 그대로 멈춰버렸다. 사실 만들고는 싶었지만 유지보수가 가장 큰 걱정이었다. 배포하면 비용은 누가 감당하고, 문제가 생기면 군대에서 어떻게 대처하나. 제약이 너무 많았다.

입대 직전에 Claude Code를 유튜브로 우연히 접했는데, 그땐 시간이 넉넉지 않아 "전역하면 한번 써볼까" 하고 넘겼다. 그러다 군대에서 우연한 기회로 바이브 코딩을 해보게 됐고, 코딩 지식이 백지상태가 된 머리로도 이걸로 다시 살려볼 수 있지 않을까 싶어 휴가 때 프로젝트를 다시 열었다. 그리고 휴가 내내 Claude와 함께 이 홈페이지를 처음부터 다시 뜯어고쳤다. 복귀하는 날까지 이러고 있을 줄은 몰랐다.

이후 복귀하고 두 달 동안 틈틈이 쌓아뒀던 아이디어를 정리해서 외박 때 반영해보았다. 구상만 해두고 묵혀뒀던 계획들은 ROADMAP.md 문서로 정리해 하나씩 단계별로 처리하고 있다. 게시판은 없애는 대신 방명록으로 바꾸고, ARCHIVE라는 이름의 3D 방 페이지를 새로 만들어 그 안에 취미와 추억을 모아두는 공간으로 삼았다.

앞으로는?

완료 메인 페이지 개편 (지금 이 페이지), 반응형 모바일 지원
완료 메뉴바 개편 (HOME · INTRODUCE · ARCHIVE), 계정 시스템 제거 · 게시판 → 방명록 전환
완료 ARCHIVE 방 페이지 (Three.js 3D 방, 마우스로 둘러보기)
완료 사물별 오프닝 연출 후 방 위에 코너를 띄우는 방식 (페이지 이동 없음)
완료 살아있는 방 연출 (계절·시간대 창문, 시계, 방문 화분, 새 글 택배, 이스터에그)
완료 방 안의 코너들 (포트폴리오, 수상 이력, 영상, 음악, 버킷리스트, 추억의 사진)
진행 중 INTRODUCE 페이지 개편 (폴라로이드, 포스트잇) · 실제 사진과 문구 채우기
예정 나만의 맛집 지도 (지도 API 키 발급 후 진행)
예정 보안 점검 후 도메인 구입 · 서버 배포