준비할 때는 용도별, 짐을 쌀 때는 가방별 — 여행 체크리스트를 실행 보드로 바꿨다

여행 준비물은 한 번 정렬해서 끝나는 목록이 아니었다. 준비할 때는 용도가 중요하고, 짐을 싼 뒤에는 어느 가방에 넣었는지가 중요했다. 같은 데이터를 단계에 따라 다시 묶는 방식으로 이 문제를 해결했다.

• 대상: 여행 준비를 여러 날에 걸쳐 하고, 출발 직전에는 물건의 실제 위치까지 확인해야 하는 사람

• 핵심 변화: 준비 단계는 6개 용도별, 패킹 단계는 4개 가방별로 같은 준비물을 재분류

• 직접 편집: 새 준비물을 추가하고 용도와 가방을 지정하며, 나중에 수정·삭제 가능

• 상태 분리: 준비 완료와 가방에 넣음을 서로 다른 체크 상태로 관리

• 검증 결과: 실제 배포 페이지에서 추가→준비→패킹→수정→새로고침 유지와 내보내기→삭제→가져오기 복원을 통과

• 운영 경계: 계정이나 서버 없이 브라우저에 저장하므로 다른 기기로 옮길 때는 JSON 내보내기·가져오기가 필요

1. 문제는 ‘무엇을 챙길까’에서 끝나지 않았다

처음에는 준비물을 여행 서류, 전자기기, 의류, 위생용품처럼 용도별 체크리스트로 정리하면 충분해 보였다. 그러나 실제 패킹 단계에 들어가면 질문이 달라진다.

“준비물 단계에서는 용도별로 묶고, 준비를 끝내고 패킹 단계에서는 가방별로 묶는 게 좋다. 그래야 어디 있는지 찾을 수 있다.”

예를 들어 여권은 서류·결제 용품이지만 실제 위치는 직접 휴대다. 휴대전화 충전기는 전자기기이면서 백팩에 들어간다. 용도 하나만 기록하면 준비에는 도움이 되지만, 출발 직전 “그 물건이 어디 있지?”라는 질문에는 답하지 못한다.

따라서 준비물 하나를 다음 네 가지 정보로 다루기로 했다.

준비물 = 이름 + 용도 + 가방 + 상태
상태   = 준비 완료 여부 + 패킹 완료 여부

2. 같은 데이터를 두 번 만들지 않고, 보는 기준만 바꿨다

핵심은 용도별 목록과 가방별 목록을 별도로 관리하지 않는 것이다. 하나의 준비물 데이터에 purpose와 bag을 함께 저장하고, 현재 단계에 따라 그룹 기준만 바꿨다.

준비 단계: 용도별로 확인

기본 준비물 36개는 다음 6개 용도로 묶인다.

• 서류·결제

• 전자기기

• 의류·신발

• 건강·위생

• 보안·수납

• 기내·이동

ALT

한국어 웹사이트의 스크린샷

그림 1. 2026-08-09 실제 운영 페이지 캡처. 준비물을 새로 추가하면서 용도와 가방을 동시에 지정한다.

패킹 단계: 가방별로 찾기

준비가 끝나면 같은 36개 항목이 다음 4개 위치로 다시 묶인다.

• 캐리어

• 백팩

• 핸드백

• 직접 휴대

ALT

이름 목록을 보여주는 웹페이지 스크린샷

그림 2. 준비물의 내용은 그대로 두고 그룹 기준만 용도에서 가방으로 바꾼 전체 패킹 화면.

이렇게 하면 준비 완료와 가방에 넣음을 혼동하지 않는다. 물건을 사거나 꺼내 놓았지만 아직 가방에 넣지 않은 상태도 표현할 수 있다.

3. 사용자 추가 항목도 기본 항목과 똑같이 움직이게 했다

새 준비물을 추가할 때 이름만 입력하게 하면 나중에 다시 분류 작업을 해야 한다. 그래서 추가 시점부터 다음을 함께 받는다.

1. 준비물 이름

2. 용도

3. 실제로 넣을 가방

추가한 항목도 기본 준비물과 동일하게 수정·삭제할 수 있고, 준비 상태와 패킹 상태를 따로 체크할 수 있다. 테스트에서는 안경닦이를 건강·위생/핸드백으로 추가한 뒤 이름을 안경닦이 파우치로 수정했다. 준비 완료와 패킹 완료를 체크하고 새로고침한 뒤에도 두 상태가 유지되는지 확인했다.

ALT

전화기 화면에 나오는 한국어 단어 목록

그림 3. 실제 운영 코드로 수행한 격리 브라우저 QA. 샘플 데이터는 사용자 브라우저나 운영 데이터에 남기지 않았다.

4. 정적 사이트의 장점은 살리고, 저장 경계는 감추지 않았다

이 사이트는 별도 로그인이나 서버 데이터베이스 없이 동작한다. 각 브라우저의 localStorage에 준비물, 현재 단계, 완료 상태를 자동 저장한다.

이 방식은 빠르고 단순하며 계정이 필요 없지만, 기기 사이에서 자동 동기화되지는 않는다. 그래서 화면에 다음 경계를 명확히 표시하고 보완 수단을 넣었다.

• 휴대전화와 컴퓨터에는 각각 별도로 저장됨

• 다른 기기로 옮길 때는 JSON 내보내기/가져오기 사용

• 언제든 기본 36개 항목으로 복원 가능

이는 기술적 한계를 숨기기보다 사용자가 데이터의 위치와 이동 방법을 이해하도록 한 선택이다.

5. 모바일에서는 정보량보다 ‘한눈에 훑는 밀도’를 우선했다

첫 모바일 버전에서는 단계 전환 도구막대가 화면에 고정되어 목록 일부를 가리는 문제가 있었다. 고정 배치를 일반 흐름으로 바꿔 겹침을 없앴다. 이어 “아이템 사이 위아래 간격이 너무 넓다”는 피드백을 반영해 행 간격을 다시 줄였다.

ALT

전화기 화면에 나오는 한국어 단어 목록

그림 4. 390×844 터치 뷰포트의 실제 운영 화면. 체크박스, 이름, 가방 태그, 수정·삭제 동작을 한 행 안에 유지했다.

현재 운영 화면의 첫 10개 모바일 행을 측정한 결과는 다음과 같다.

초기 넓은 간격의 수치와 화면은 별도 증거로 보존되지 않아 전후 퍼센트 개선으로 표현하지 않았다. 확인 가능한 현재값만 기록했다.

6. 실패와 수정에서 얻은 교훈

실패 1: 단계 전환을 쉽게 하려다 목록을 가렸다

모바일에서 단계 탭을 고정하면 전환은 쉬워지지만, 작은 화면에서는 콘텐츠를 덮을 수 있다. 실제 레이아웃 측정에서 차단이 확인되어 고정을 제거했다.

실패 2: 보기 좋은 여백이 반복 목록에서는 피로가 됐다

카드 하나만 보면 넉넉한 여백이 편안하다. 하지만 36개 항목을 연속해서 볼 때는 스크롤 비용이 커진다. 반복 목록에서는 개별 카드의 여백보다 전체 탐색 밀도가 더 중요했다.

수정 원칙

• 390px 기준 가로 넘침이 없어야 한다.

• 체크박스와 수정·삭제 버튼은 줄이지 않는다.

• 이름과 태그의 판독성을 유지하면서 세로 패딩만 줄인다.

• 시각 검토와 실제 DOM 치수 측정을 함께 통과해야 한다.

7. 결과: 체크리스트가 ‘상태와 위치를 기억하는 보드’가 됐다

실제 검증 영수증

2026-08-09 실제 배포 주소에서 자동화 브라우저로 다음 흐름을 실행했다.

1. 운영 페이지 HTTP 200 및 핵심 UI 확인

2. 기본 36개 항목과 6개 용도 그룹 확인

3. 준비물을 새로 추가하고 준비 완료 체크

4. 패킹 단계에서 4개 가방 그룹과 해당 항목 위치 확인

5. 패킹 완료 체크 후 이름 수정

6. 새로고침 뒤 이름·용도·가방·두 완료 상태 유지 확인

7. JSON 내보내기

8. 테스트 항목 삭제

9. JSON 가져오기로 항목과 상태 복원

10. 데스크톱·모바일 가로 넘침 0px, 페이지/콘솔 오류 0건 확인

11. 소스 검증 VERIFY_OK 및 프로덕션 빌드 성공

판정은 PASS다. 실제 사용자 데이터는 변경하지 않았고, 추가 항목은 격리된 QA 브라우저에서만 만들었다.

8. 다시 만들 때 쓸 수 있는 프롬프트

기존 여행 일정 사이트에 ‘여행 준비물’ 실행 보드를 추가해줘.

요구사항:
1. 준비물 하나는 이름, 용도, 가방, 준비 완료, 패킹 완료를 가진다.
2. 준비 단계에서는 용도별로 그룹화한다.
   - 서류·결제, 전자기기, 의류·신발, 건강·위생, 보안·수납, 기내·이동
3. 패킹 단계에서는 가방별로 그룹화한다.
   - 캐리어, 백팩, 핸드백, 직접 휴대
4. 사용자가 항목을 추가·수정·삭제할 수 있어야 한다.
5. 준비 완료와 패킹 완료는 독립된 상태여야 한다.
6. 브라우저에 자동 저장하고 JSON 내보내기·가져오기·기본값 복원을 제공한다.
7. 저장이 기기별이라는 경계를 화면에서 설명한다.
8. 모바일 반복 목록의 세로 간격을 촘촘하게 만들되 체크박스와 편집 동작은 유지한다.
9. 1440px와 390px에서 가로 넘침, 요소 겹침, 콘솔 오류를 검사한다.
10. 실제 운영 URL에서 추가→체크→수정→새로고침→내보내기→삭제→가져오기까지 검증한다.

9. 적용 범위와 남은 한계

• 이 보드는 개인 브라우저 안에서 쓰는 단일 사용자 도구다.

• 계정 로그인, 클라우드 동기화, 여러 사람의 동시 편집은 제공하지 않는다.

• 준비 시간이 얼마나 줄었는지, 누락 물품이 얼마나 감소했는지는 아직 측정하지 않았다.

• 초기 넓은 행 간격의 비교 캡처가 없어 현재 모바일 치수만 근거로 제시했다.

• 라이브 주소는 travel-spain-2026.vercel.app/packing/이며 검색엔진 색인은 차단되어 있다.

• 본 사례는 검증된 내부 라이브러리용 산출물이며, 외부 커뮤니티 게시나 홍보는 별도 승인 없이 실행하지 않았다.

한 줄 결론

좋은 여행 준비물 도구는 물건 목록만 기억하지 않는다. 준비할 때의 이유와, 짐을 싼 뒤의 위치를 같은 데이터로 연결한다.