아직 살아있는데 사후 방명록 사이트 만들기 + 'Alive 모드'도 추가 👾🪦

"나 갑자기 하늘나라 가면 어떡해?" 라는 생각에서 시작해서, Claude Code로 나만의 픽셀 아트 미니홈피 "still.me"를 만들었다. Alive Mode(생존)와 Ghost Mode(사후) 두 가지 모드를 넣고, 지인들이 실제로 와서 글을 남겨주었다.

ALT

소녀와 고양이가 있는 웹사이트의 스크린샷

ALT

게임을 보여주는 웹페이지의 스크린샷

• 픽셀 아트 캐릭터, 유령, 비석까지 뭔가 투박하지만 귀여운 옛날 그 시절 느낌.

• 사진이 안 뜨고, 글이 사라지고, 얼굴이 징그럽고… 오류와 싸우는 과정이 반이었다

• 지인들에게 링크를 전달하자 실제로 와서 방명록을 써줬다 — 그게 제일 뿌듯했다

• Ghost Mode 방명록은 아직 비어있다. 80년 후까지 오래 오래 비어있길.

시작 계기

인스타에 좀 질렸다. 남의 피드를 구경하는 것도, 내 사진을 올리는 것도. "나만의 공간"이 있었으면 좋겠다는 생각이 들었다.

바이브 코딩을 배우면서 "이거 내가 만든 거야!"라고 친구들한테 자랑할 만한 걸 만들고 싶었다. 그래서 나만의 방명록 페이지를 재미 삼아, 연습 삼아 만들어보기로 했다.

그러다 문득 이런 생각이 들었다 — 혹시 내가 갑자기 하늘나라에 가면? 장례식장 방명록은 너무 우울하니까, 친구들이 조금 발랄하게 글을 남길 수 있는 나만의 온라인 릉이 있으면 좋겠다 싶어서. 그래서 다크 모드(Ghost Mode)와 밝은 모드(Alive Mode)라는 두 가지 모드를 넣기로 했다.

🛠️ 사용한 도구

• Claude Code (CLI 기반 AI 코딩 도구)

• 모델: Claude Opus

• 배포: Vercel

• 백엔드: Supabase (방명록 저장 + 사진 업로드)

🔧 작업 과정

1. 첫 마디 한 줄로 프로젝트가 시작됐다

나만의 방명록 페이지를 만들고 싶어.
내가 갑자기 하늘나라에 갈 수도 있잖아?
페이지명은 still.me → 아직 여기 있는 나.
장례식장 느낌이 아니라, 키치하고 비비드하고, 픽셀 다크 게임 느낌.

이 한 마디로 Claude Code가 프로젝트 폴더를 만들고, 첫 와이어프레임 HTML을 뚝딱 만들어냈다. 여행, 아이템, 게스트북 같은 섹션 구조까지 한 번에. "아예 픽셀 느낌은 어떨까?" 하니까 어두운 배경에 네온 포인트 컬러가 들어간 도트 스타일로 바꿔줬다.

2. 게임처럼 — 구름, 비석, 유령

비석은 더 비석스럽게? 게임 캐릭터 사망할 때 유령 되는 느낌도 들어가면 좋겠어

구름이 각각 다른 속도로 흘러가고, 비석 위에 유령이 둥실 떠다니고, 별이 하늘에서 떨어지는 — 완전 게임 화면 같은 페이지가 만들어졌다. freepik에서 귀여운 고스트 이미지를 찾아서 "내 유령은 이런 느낌이면 좋겠어" 하고 보여줬더니 통통하고 볼터치 있는 유령으로 재디자인해줬다.

3. Alive Mode — 살아있는 나 (+ 깨순이)

얼라이브 모드 페이지를 만들어. 밝은 화면과, 밝은 색상들,
비석과 유령은 빼고 여자 일러스트와 고양이 일러스트를 픽셀로 넣어

내 사진과 고양이(깨순이) 사진을 첨부하니까, 픽셀 아트 캐릭터로 만들어줬다. 처음엔 노트북 앞에 앉아있는 나와 고양이를 나란히 세웠는데, 계속 발전시켜서 결국 노트북 책상 앞에 앉아있는 나 옆에서 깨순이가 걸어다니는 버전이 됐다. 분위기를 확 밝게 바꾸니, 토글 버튼으로 Ghost Mode ↔ Alive Mode를 왔다 갔다 할 때 모드가 전환됐다는 상황이 더 잘 느껴졌다.

근데 픽셀 캐릭터가 영 마음에 안 들었다. 여기서 수정 지옥이 시작됐다.

4. 수정 지옥 — 픽셀아트와의 전쟁

이게 제일 오래 걸렸다. AI한테 픽셀 아트를 고쳐달라고 하는 건, 말로 그림을 설명하는 것과 같았다.

고양이 깨순이: 꼬리 모양, 몸통 비율, 다리 위치 등 총 10번 넘게 수정. "지금 너무 삼각형이야" → 직사각형 체형으로 변경.

ALT

밤하늘을 나는 픽셀 고양이 밤하늘을 나는 픽셀 고양이 밤하늘을 나는 픽셀 고양이 스톡 일러스트레이션

난 이렇게 해달라고 했는데 ☝️

ALT

고양이를 배경으로 하는 픽셀 기반 게임

이렇게 만들어줌...ㅠ ☝️

여자 캐릭터: 머리카락, 눈썹, 노트북, 의자, 책상 등 15번 이상 수정.

• "노트북은 상판 뒷면만 보이게 하고 애플 로고 넣어" → 적용

• "여자 픽셀 더 잘게 쪼개" → 해상도 4배로 업그레이드

• 레퍼런스 이미지를 보여주며 "이런 식으로" → 3/4 뷰 사이드 포즈로 전면 리디자인

• "사람 얼굴이 너무 징그럽고" → 정면 귀여운 얼굴로 다시 그림

유령: 크기, 표정, 스타일 등 5번 수정. 레퍼런스 2장을 보여주며 원하는 느낌을 전달.

결국 배운 건 — AI한테 그림을 시킬 때는 말보다 레퍼런스 이미지가 100배 효율적이라는 것.

5. 방명록을 진짜 서비스로

처음에는 방명록이 브라우저 안에만 저장되는 구조(localStorage)였다. 당연히 다른 사람이 쓴 글은 안 보인다. 진짜 서비스로 만들려면 서버가 필요했다.

방명록을 클라우드에 저장하고 싶어. 그리고 사이트를 배포해줘.

Claude Code가 Supabase(클라우드 데이터베이스)를 연결하고, Vercel로 배포까지 해줬다. 이제 누구나 https://stillme.vercel.app 에 들어가서 글을 남길 수 있게 됐다.

6. 내 콘텐츠 채우기 — 여행, 콘서트, 아이템

빈 카드들을 하나씩 채워나갔다. 아직 어드민이 없기 때문에 사진을 폴더에 넣고 "트래블에 사진 올렸어" 하면 카드에 연결해줬다.

사진 크기나 위치도 세세하게 조정했다. "사진 키우고 위로 올려" → "아니 아래로 내려" → "좀더내려" 이런 식으로. 결국 원하는 위치를 찾는 건 내 눈이었다.

7. 친구들이 실제로 써줬다

배포하고 나서 링크를 전달했더니 지인들이 진짜로 글을 남겨줬다. 동네 친구, 대학 동기, 전 직장 동료, 그리고 우리 스터디원분도 써주셨다!

ALT

한국 텀블러 페이지 스크린샷

ALT

일본어 앱 스크린샷

ALT

한국 소셜 미디어 앱의 스크린샷

ALT

별이 있는 소녀의 사진이 있는 휴대전화

사이트 만들면서 제일 뿌듯했던 순간이었다. Ghost Mode 방명록은 아직 비어있다. 계속 비어있길 바란다. 🪦

8. 오류와의 전쟁

순탄하지만은 않았다. 기억나는 오류들:

1. 사진이 안 보여: 로컬에서는 잘 보이는데 배포된 사이트에서는 안 보인다. 원인은 새 이미지를 추가하고 재배포를 안 한 것. "배포한 사이트에서 열었는데?" 하니까 바로 원인을 찾아줬다.

2. 파일명 때문에 이미지 로드 실패: 제주 여행 스크린샷 파일명이 스크린샷 2026-03-23 오후 10.37.35.png이었다. 한글+공백이 URL에서 깨져서 jeju.png으로 바꿔서 해결.

3. 친구들 글이 전부 사라짐: 방명록에 친구들이 쓴 글이 갑자기 다 안 보였다. 알고 보니 페이지 로드 순서 문제 — "alive 모드 설정" 전에 "글 불러오기"가 실행돼서, ghost 모드 글만 찾고 있었던 것. 코드 두 줄 순서만 바꿔서 해결.

이런 오류들이 생길 때마다 "왜 안 보여?" "너가 점검해봐" 하면 원인을 찾아서 고쳐줬다. 디버깅 능력은 확실히 AI가 빠르다.

✅ 결과

Before vs After

결과물

• 사이트: https://stillme.vercel.app

• Ghost Mode: 밤하늘 + 유령 + 비석 + "아직 여기 있어 ♥"

• Alive Mode: 파스텔 + 픽셀 나 + 뛰는 깨순이 + "나 여기 있어!"

• 친구, 가족, 동료 포함 여러 명이 실제로 방명록을 써줬다

💬 배운 AI 활용 팁

효과적이었던 것

1. 레퍼런스 이미지 보여주기 — "이런 식으로 해줘" + 이미지 한 장이 글 열 줄보다 낫다

2. 작게 시작하고 점점 키우기 — 와이어프레임 → 스타일 → 기능 → 배포 순서로

3. 에러가 나면 바로 물어보기 — "안 보여, 너가 점검해봐" 하면 원인까지 찾아준다

4. 배포는 자주 — 로컬에서만 확인하면 배포 후 터지는 문제를 놓침

이렇게 하면 비효율적이에요

1. 픽셀 아트를 말로만 수정하기 — "좀 더 귀엽게" 같은 추상적인 요청은 무한 루프. 레퍼런스를 보여주는 게 훨씬 빠르다

2. 한 번에 완벽을 기대하기 — 사진 위치 하나도 3~4번 조정해야 내 눈에 맞았다. 반복 수정은 당연한 과정

🚀 앞으로의 계획

• 대댓글 기능 — 친구들끼리 서로 대화할 수 있게

• 방명록 어드민 — 글 관리, 스팸 차단

• 게이미피케이션 — 깨순이가 화면에서 점프하는 인터랙션

• 콘텐츠 확장 — 타임라인 채우기, 새 여행/콘서트 계속 추가

• 나만의 개인 공간으로 계속 키워나갈 예정

📋 재사용 가능한 프롬프트

프롬프트 1: 개인 웹사이트 시작하기

나만의 [용도] 페이지를 만들고 싶어. [컨셉/분위기] 느낌으로. 섹션은 [원하는 섹션들] 포함해줘. 프레임워크 없이 순수 HTML/CSS/JS로 만들어줘.

프롬프트 2: 레퍼런스 기반 디자인 수정

(이미지 첨부하며) 이런 식으로 바꿔줘. [구체적으로 바꾸고 싶은 부분]은 [원하는 방향]으로.

프롬프트 3: 배포 + 백엔드 연결

이 사이트를 배포해줘. [기능 이름]을 클라우드에 저장하고 싶어. 누구나 들어와서 [기능]할 수 있게.

말할 수 있으면 만들 수 있다. 심지어 나만의 온라인 릉도.