[바이브코딩 특집] 비전공자를 위한 Claude 바이브 코딩 6회 - 새로고침해도 남아 있는 할 일 앱: 새로고침 휘발성 체험, 로컬 저장소(localStorage) 영구 저장, 다른 브라우저 미공유 원리와 백엔드 예고

[바이브코딩 특집] 비전공자를 위한 Claude 바이브 코딩 6회 - 새로고침해도 남아 있는 할 일 앱: 새로고침 휘발성 체험, 로컬 저장소(localStorage) 영구 저장, 다른 브라우저 미공유 원리와 백엔드 예고

지난 1회부터 5회까지 우리는 자기소개 페이지, 모바일 초대장, 더치페이 계산기, 가계부 대시보드 차트까지 만들었습니다. 겉보기에는 진짜 앱처럼 멋지게 작동하지만, 지금까지 만든 모든 프로그램에는 비전공자가 반드시 한 번은 겪고 넘어가야 할 결정적인 한계가 하나 숨어 있었습니다.

화면에서 신나게 숫자를 입력하고 결과를 확인한 뒤, 키보드의 새로고침(F5 또는 Ctrl + R) 버튼을 누르는 순간 내가 입력했던 모든 내용이 감쪽같이 사라지고 처음 빈 화면으로 리셋된다는 점입니다!

만약 우리가 매일 쓰는 '할 일 목록(투두리스트)'이나 메모장 앱이 실수로 새로고침을 눌렀다고 해서 적어둔 할 일이 싹 날아가 버린다면 어떨까요? 아무도 그 앱을 쓰지 않을 것입니다.

오늘 6회: 새로고침해도 남아 있는 할 일 앱에서는 새로고침 휘발성 체험을 통해 웹페이지가 왜 기억을 잃어버리는지 눈으로 확인하고, 브라우저의 전용 서랍인 로컬 저장소(localStorage) 영구 저장 기술을 클로드에게 한 줄로 요청하는 법을 배웁니다. 나아가 다른 브라우저 미공유 원리와 백엔드 예고까지 50분 만에 완전 정복하여, 컴퓨터를 껐다 켜도 내 할 일이 안전하게 살아있는 진짜 평생 소장용 앱을 완성해 보겠습니다.

1. 새로고침해도 남아 있는 할 일 앱: 오늘 만들 결과물과 50분 실습 준비

오늘 우리가 만들 앱은 단순히 체크박스만 있는 메모장이 아닙니다. 할 일 추가, 완료 체크 취소선, 삭제, 마감일 날짜 지정, 그리고 '오늘 마감'만 모아보는 필터까지 갖춘 완성형 생산성 도구입니다.

(1) 오늘의 실습 요약표

항목	상세 내용
오늘 만들 결과물	할 일 등록·완료 체크·삭제·마감일 선택 기능과 '전체/진행 중/완료/오늘 마감' 필터를 제공하며, 새로고침하거나 창을 닫아도 데이터가 영구 보존되는 스마트 할 일(To-Do) 웹 앱
소요 시간	약 50분
이번 회차 세팅	추가 설치 및 가입 없음 (Claude(claude.ai)에서 새 대화를 열어 시작)
핵심 실습 3단계	① 기본 할 일 앱을 만들고 새로고침해서 데이터가 날아가는 현상 일부러 겪기 $\rightarrow$ ② 브라우저 로컬 저장소(localStorage) 연결 요청하기 $\rightarrow$ ③ 다른 브라우저(또는 시크릿 창)에서 열어보고 데이터가 연동되지 않는 원리 이해하기
오늘 깨우칠 핵심 원리	"데이터 저장은 '어디에 하느냐'의 문제다. 내 컴퓨터 브라우저 안에만 저장하는 것(프론트엔드 로컬 저장소)과 중앙 금고에 저장해 모두가 함께 보는 것(백엔드 데이터베이스, 17회)의 차이를 이해한다."

(2) 왜 6회에서 '저장'의 원리를 배워야 할까요?

지금까지 우리가 만든 웹페이지는 마치 '칠판'과 같았습니다. 칠판에 분필로 글씨를 쓰면 눈에는 잘 보이지만, 물걸레로 칠판을 쓱 닦아내듯 브라우저를 새로고침하면 브라우저 메모리가 초기화되면서 글씨가 전부 날아갑니다.

앱이 진정한 도구가 되려면 분필로 쓴 글씨를 칠판 뒤의 '서랍(저장 공간)'에 넣어두었다가, 새로고침할 때마다 서랍을 열어 다시 꺼내와야 합니다. 이 서랍의 이름을 웹에서는 '로컬 스토리지(localStorage)'라고 부릅니다.

2. 새로고침 휘발성 체험: 할 일이 날아가는 당황스러운 순간 일부러 겪어보기

배움에서 가장 확실한 방법은 문제를 직접 겪어보는 것입니다. 먼저 저장 기능이 없는 평범한 할 일 앱을 만들어서, 데이터가 왜 날아가는지 실험해 보겠습니다.

Step 1. 저장 기능이 없는 기본 할 일 앱 요청하기

Claude(claude.ai)에서 [+ 새 채팅]을 누르고, 아래 프롬프트를 복사해 붙여 넣으세요.

[복사해서 붙여 넣을 프롬프트 1 - 기본 할 일 앱 제작 (저장 기능 미포함)]

깔끔하고 모던한 '할 일 관리(To-Do List)' 웹 앱을 단일 HTML 파일로 만들어 오른쪽 미리보기에 띄워줘. 모바일과 PC 모두 쓰기 편하게 최대 폭 450px의 세련된 카드 형태로 만들어줘.

[핵심 기능]

1. 할 일 입력창: 할 일 텍스트 입력칸 + 마감 날짜(Date) 선택칸 + [추가] 버튼
2. 할 일 목록 카드:
   • 할 일 텍스트와 마감 날짜 배지 표시
   • 체크박스를 클릭하면 글씨에 취소선이 그어지고 회색으로 변하는 완료 효과
   • 휴지통 아이콘(삭제 버튼)을 누르면 목록에서 즉시 제거
3. 상단 필터 탭: [전체 보기], [진행 중], [완료됨] 3가지 상태 필터

[디자인 분위기]

• 부드러운 라벤더와 민트 그린 포인트의 감성적인 화이트 카드 스타일로 만들어줘.
• (중요: 이번 단계에서는 로컬 저장소 기능을 넣지 말고 기본 상태로 만들어줘.)

Step 2. 직접 할 일 3개 입력하고 새로고침 눌러보기 (충격 체험!)

오른쪽 미리보기(아티팩트) 창에 예쁜 할 일 앱이 떴다면, 직접 사용해 봅니다.

1. 입력창에 다음과 같이 할 일 3개를 차례대로 추가해 보세요:
   • 클로드 바이브 코딩 6회 완주하기 (오늘 날짜)
   • 저녁 7시 동네 마트 장보기
   • 주말 방 청소 및 빨래 돌리기
2. 첫 번째 항목의 체크박스를 클릭해서 취소선이 삭 그어지는 손맛도 느껴보세요.
3. 이제 아티팩트 창 우측의 [다운로드] 아이콘을 눌러 todo_temp.html로 저장하고, 내 컴퓨터 크롬 브라우저에서 더블클릭해 엽니다.
4. [실험] 크롬 브라우저 상단의 새로고침(↻) 버튼을 누르거나 키보드 F5를 눌러보세요!

결과는?

방금 우리가 정성스럽게 적어 넣었던 할 일 3개가 1초 만에 흔적도 없이 사라지고 텅 빈 초기 화면으로 돌아옵니다! 이것이 바로 브라우저의 기본 성질인 '휘발성(메모리 초기화)'입니다. 브라우저는 페이지를 새로 불러올 때 코드를 처음부터 다시 읽기 때문에, 어딘가에 따로 저장해 두지 않은 모든 입력 데이터는 영구적으로 증발해 버립니다.

3. 로컬 저장소(localStorage) 영구 저장: 브라우저 전용 서랍에 데이터를 보관하는 마법의 프롬프트

이제 2회에서 배운 "기존 기능은 그대로 유지하고 ○○만 추가해 줘" 공식을 활용해, 이 앱에 '절대 잊어버리지 않는 기억력(localStorage)'을 심어주겠습니다.

Step 1. 로컬 저장소 연결 요청 프롬프트 보내기

클로드 대화창에서 방금 대화에 이어서 아래 프롬프트를 붙여 넣으세요.

[복사해서 붙여 넣을 프롬프트 2 - localStorage 영구 저장 및 오늘 마감 필터 추가]

지금 만든 할 일 앱의 디자인과 추가·완료·삭제 기능은 아주 마음에 들어. 다른 부분은 그대로 두고, 다음 두 가지 핵심 기능을 완벽하게 추가해 줘.

1. 브라우저 로컬 저장소(localStorage) 영구 저장 기능 추가:

• 사용자가 할 일을 추가하거나, 완료 체크를 하거나, 항목을 삭제할 때마다 그 상태가 브라우저의 localStorage에 즉시 자동 저장되게 해줘.
• 사용자가 실수로 웹페이지를 새로고침(F5)하거나, 브라우저 창을 완전히 닫았다가 내일 다시 열어도 저장되어 있던 할 일 목록이 그대로 화면에 복원되어 나타나게 해줘.

2. 스마트 마감일 필터 및 상태 요약 추가:

• 상단 필터 탭에 [🔥 오늘 마감] 탭을 하나 더 추가해 줘. (오늘 날짜와 마감일이 일치하는 할 일만 모아보는 필터)
• 만약 마감일이 오늘 이전으로 지난 미완료 할 일이 있다면 빨간색 작은 배지로 [기한 지남]이라고 눈에 띄게 경고해 줘.
• 맨 아래에 총 N개 중 M개 완료됨 상태 진행률 요약 막대를 작게 달아줘.

Step 2. 새로고침 생존 테스트 (환호의 순간!)

클로드가 *"localStorage를 적용하여 새로고침해도 할 일과 완료 상태가 유지되도록 업데이트했습니다"*라며 오른쪽 미리보기 창을 갱신해 줍니다.

1. 이번에도 아티팩트 창 우측의 [다운로드] 버튼을 눌러 새 파일(todo_persistent.html)을 내 컴퓨터에 받습니다.
2. 크롬 브라우저로 파일을 열고, 아까처럼 할 일 3개를 입력한 뒤 첫 번째 항목을 완료 처리합니다.
3. 이제 숨을 들이쉬고 키보드의 F5(새로고침)를 과감하게 눌러보세요! 심지어 브라우저 탭을 완전히 닫았다가 다운로드 폴더에서 파일을 다시 더블클릭해 열어보세요!

결과는?

방금 입력했던 할 일 3개와 완료 체크박스의 취소선 상태가 1픽셀도 흐트러지지 않고 그대로 화면에 살아있습니다! 컴퓨터를 재부팅해도, 내일 다시 열어도 이 할 일들은 내 컴퓨터 크롬 브라우저 안에 영구히 보존됩니다.

[초보자도 10초 만에 이해하는 원리: localStorage란?] 인터넷 브라우저(크롬, 사파리, 엣지 등)는 웹사이트마다 사용자 몰래 글자를 적어둘 수 있는 **작은 비밀 수첩(약 5MB 용량의 로컬 스토리지)**을 하나씩 제공합니다. 클로드가 자바스크립트로 *"할 일이 생기면 이 수첩에 적어두고(setItem), 새로고침이 되면 수첩을 먼저 열어보고 복원해라(getItem)"*라는 마법의 명령 코드를 심어준 것입니다.

4. 다른 브라우저 미공유 원리와 백엔드 예고: 왜 다른 컴퓨터나 휴대폰에서는 내 할 일이 안 보일까?

여기서 비전공자분들이 100명 중 99명은 맞닥뜨리는 아주 흥미로운 의문이 생깁니다.

"어? 크롬에서 할 일 5개를 적어뒀는데, 웨일(Whale) 브라우저나 엣지(Edge)로 열었더니 텅 비어 있어요!" "내 컴퓨터 크롬에서 저장한 할 일 목록을 내 스마트폰 크롬에서 열었는데 왜 스마트폰엔 아무것도 안 나오죠?"

지금 바로 내 컴퓨터에서 직접 실험해 보세요!

1. 크롬에서 todo_persistent.html을 열어 할 일을 3개 적어둡니다.
2. 크롬의 [시크릿 창(Ctrl + Shift + N)]을 열거나, 엣지(Edge) 브라우저를 켜서 똑같은 todo_persistent.html 파일을 열어보세요.
3. 정말로 할 일이 하나도 없이 깨끗한 빈 화면이 나옵니다.

(1) 왜 다른 브라우저나 기기에서는 보이지 않을까요?

이유는 아주 명쾌합니다. 로컬 저장소(localStorage)의 이름 앞에 붙은 '로컬(Local)'이라는 단어 때문입니다.

로컬 스토리지는 '지금 이 컴퓨터, 지금 이 브라우저 프로그램 하나'에만 종속된 개인 금고입니다. 크롬의 금고와 엣지의 금고는 벽으로 완전히 막혀 있어 서로 들여다볼 수 없으며, 당연히 내 컴퓨터의 금고를 내 휴대폰이 원격으로 열어볼 수도 없습니다.

(2) 저장은 "어디에 하느냐"의 문제: 백엔드(17회)의 결정적 복선

이 원리를 깨닫는 순간, 여러분은 전 세계 모든 웹 서비스와 앱의 가장 본질적인 동작 구조를 이해하시게 됩니다.

구분	프론트엔드 로컬 저장소 (localStorage, 오늘 배운 것)	백엔드 데이터베이스 (Database, 17회에서 배울 것)
저장 위치	내 컴퓨터의 특정 브라우저 내부	인터넷 클라우드 서버에 24시간 켜져 있는 중앙 금고
접속 범위	내 컴퓨터 크롬에서만 보임	컴퓨터, 스마트폰, 친구 컴퓨터 어디서든 로그인하면 똑같이 보임
적합한 용도	개인용 다이어리, 계산기 설정, 다크모드 켜짐 여부	여러 사람이 함께 쓰는 방명록, 회원가입/로그인, 댓글 시스템
서버 필요 여부	서버 설치 0개 (HTML 파일 하나로 평생 무료 동작)	클라우드 데이터베이스 서비스 연결 필요

우리가 1회부터 8회까지는 서버나 복잡한 설치 없이 브라우저 자체 기능만으로 최고의 도구를 만들고, 17회(백엔드와 데이터베이스: 함께 쓰는 방명록)에서 드디어 인터넷 중앙 금고(Supabase)를 연결하는 이유가 바로 여기에 있습니다!

오늘 만든 할 일 앱은 개인용 도구로는 더할 나위 없이 완벽한 작품입니다. 마음에 드는 디자인으로 꾸며진 최종 버전을 my_smart_todo.html로 저장해 두고, 매일 아침 브라우저 북마크에 등록해 실제로 사용해 보세요!

5. 6회 핵심 원리 정리 및 다음 회차 예고: 내 컴퓨터 브라우저 안에 영구 보관되는 로컬 스토리지

오늘 50분 동안 여러분은 단순한 웹페이지를 넘어, 사용자의 데이터를 영원히 기억하고 관리하는 진짜 생산성 소프트웨어의 핵심 메커니즘을 정복하셨습니다.

(1) 오늘 배운 것 3줄 요약

1. 휘발성의 극복: 브라우저는 새로고침(F5)을 누르면 메모리를 초기화하므로, 데이터를 유지하려면 로컬 저장소(localStorage)에 보관하는 명령을 심어주어야 합니다.
2. 단 한 줄의 요청: 클로드에게 *"새로고침해도 상태가 유지되도록 브라우저의 localStorage에 자동 저장해 줘"*라고 지시하면, 복잡한 저장 및 복원 코드를 알아서 짜줍니다.
3. 저장 위치의 본질: 로컬 스토리지는 '내 기기, 내 브라우저' 안에만 저장되므로, 다른 사람이나 다른 기기와 데이터를 실시간 공유하려면 17회에서 배울 클라우드 데이터베이스(백엔드)가 필요합니다.

(2) 6회 완료 셀프 체크리스트

오늘 실습을 모두 완료했는지 체크해 보세요.

• [x] 기본 할 일 앱에서 새로고침 시 데이터가 사라지는 휘발성 현상을 눈으로 확인했다.
• [x] localStorage 저장 기능을 추가한 뒤, 브라우저를 껐다 켜도 할 일과 완료 상태가 유지되는 것을 확인했다.
• [x] 오늘 마감 필터와 기한 지남 빨간 배지가 정상적으로 작동하는지 날짜를 바꿔가며 테스트했다.
• [x] 다른 브라우저나 시크릿 창에서 열어보고 데이터가 공유되지 않는 '로컬 저장'의 원리를 체득했다.

(3) 다음 7회 예고: 반응속도 미니 게임

지금까지 1~6회를 거치면서 우리는 꽤 유용한 실생활 도구들을 만들어 왔습니다. 그렇다면 클로드 바이브 코딩으로 마우스 클릭 하나로 승부하는 '스릴 넘치는 미니 게임'도 만들 수 있을까요?

빨간색 화면이 언제 켜질지 가슴 졸이며 기다리다가, 화면이 초록색으로 번쩍 바뀌는 순간 번개처럼 클릭해 내 반사신경(0.001초 단위)을 측정하는 반응속도 테스트 게임을 만들어 보겠습니다!

다음 7회 [반응속도 미니 게임]에서는 게임의 핵심인 '상태 변화(대기 $\rightarrow$ 준비 $\rightarrow$ 신호 $\rightarrow$ 결과)'를 문장으로 명확히 설계하는 법을 배우고, 너무 일찍 누르면 실격 처리되는 얌체 방지 규칙과 찰진 사운드 효과음, 나의 최고 기록을 저장해 두는 랭킹 시스템까지 60분 만에 흥미진진하게 구현해 보겠습니다!