바이브코딩 실전 · 5/5
앱이 열리면 다음에는 쓸 만한지 묻는다.
첫 앱에는 노션 메모를 읽고 검색하고 그래프로 보는 기능이 있다. 그러나 기능 목록만으로 다시 들어오고 싶은 화면인지는 알 수 없다. 나는 배포한 앱을 두고 Aside에 묻는다.
이 앱 어떤것 같아?
Aside는 이미 되는 기능과 함께 첫 화면의 큰 빈 공간, 갱신 상태가 보이지 않는 점을 짚는다. 나는 세부 기능을 먼저 지정하기보다 개선 방향과 인계 조건을 말한다.
좀더 세련되게 개선할 부분이 있을까? 개선하게 된다면 변경 내용은 그록봇에 알려줘야 할거 같아.
이어 작업 범위를 디자인 밖으로 넓힌다.
개선해줘. 디자인적인것 외에도 기능개선도 필요한것이 있다면 그것도 추가해줘. 수정하고 그록봇에 내용 전달하자
홈, 태그 정리, 즐겨찾기는 이 요청을 받아 Aside가 제안하는 대안이다. 사용자가 목적과 범위를 정하면 AI가 화면과 동작을 살펴 개선안을 만드는 방식이다. 결과는 다시 실제 화면에서 판단한다.
아무것도 고르기 전에는 무엇이 보일까?
초기 화면에서는 목록의 메모를 골라야 읽기 공간이 채워진다. 개선한 홈에는 최근 기록과 분류, 즐겨찾기·읽지 않은 기록 수가 나타난다. 하나를 누르기 전에도 어떤 자료가 쌓여 있는지 살필 수 있다.
이 전후 비교는 1.0.0과 1.1.0의 변화다. 현재 화면을 초기 버전이라고 설명하는 그림은 아니다. 제목·요약·출처의 크기와 여백도 나누고, 사이드바에는 자주 쓰는 태그부터 보인다. 나머지는 더 보기로 접어 첫 화면이 태그 목록에 묻히지 않게 한다. 밝은 테마와 어두운 테마 역시 차분한 개인 자료 서재라는 방향에 맞춘다.
가상 메모 ‘베란다 텃밭 책기획’을 따라가 보자. 처음에는 목록에서 제목을 찾아 고른다. 개선 홈에서는 최근 기록이나 책기획 분류가 출발점이 된다. 전에 열어 본 메모라면 이어 읽기로 돌아갈 수도 있다. 화면이 달라졌는지보다 같은 자료로 돌아오는 길이 나아졌는지를 비교하는 방법이다.
별표를 붙이면 어디에 남을까?
즐겨찾기, 읽음, 최근 열어본 기록은 현재 브라우저에 메모 ID를 보관하는 방식이다. 그록봇이 기록하는 노션 원본에 속성을 더하거나 본문을 바꾸지 않는다. 수집하는 쪽과 읽는 쪽을 분리한 구조를 유지하면서 찾는 경로를 늘린다.
대신 별표가 계정 전체에서 동기화되는 기능은 아니다. 컴퓨터에서 표시한 상태가 다른 휴대전화에 자동으로 나타나지 않고, 브라우저 데이터를 지우면 사라질 수 있다. 화면에도 이 범위를 안내한다. ‘즐겨찾기’라는 익숙한 이름을 붙였다고 사용자가 기대하는 저장 방식까지 저절로 갖춰지는 것은 아니다.
가상 텃밭 기획에 별표를 붙여 시험한다면 다시 홈에서 찾는지, 노션 원문에는 변화가 없는지를 따로 보면 된다. 화면에 생긴 기능과 원본에 저장되는 내용을 구분해 확인하는 방법이다.
사진은 내가 구체적으로 복원을 요청하는 부분이다. 처음처럼 본문에 보이게 해 달라는 요청에 Aside가 표시를 되살리고 확대 기능을 더한다. 여기서 다루는 것은 노션 본문에 이미 들어 있는 이미지를 읽고 확대하는 동작이다. 그록봇이 받은 사진을 노션에 저장하는 단계와는 구분한다.
화면에 남아 있는 메모는 최신일까?
새로고침을 만들고 시험하는 과정에서 Aside가 갱신 문제를 찾아낸다. 서버가 노션에 다시 연결하지 못해도 전에 읽은 자료는 화면에 남을 수 있다. 내용을 지우지 않는 것은 편하지만, 원본을 방금 확인한 것처럼 보이면 판단이 어긋난다.
개선판에는 마지막 성공 시각과 새로고침 버튼이 생긴다. 원본 조회에 실패하면 이전 자료를 보여 주되 경고를 남긴다. 목록뿐 아니라 열어 둔 본문과 그래프도 바뀐 기록을 반영하도록 고친다. 보이는 탭에서는 자동으로 확인하고, 내용이 같으면 본문을 불필요하게 다시 만들지 않아 읽는 위치를 유지한다. 여러 요청이 겹치는 경우와 사진 주소를 다시 받는 처리도 검사하며 보완한다.
사용자가 볼 기준은 단순하다. 지금 읽는 자료를 언제 확인했는가. 다시 가져오지 못했다면 그 사실이 보이는가. 가상 텃밭 기획을 노션에서 고친 뒤 뷰어에서 확인한다면, 수정된 문장과 갱신 표시를 함께 봐야 한다. 새로고침 버튼의 유무만으로 성공을 판단하지 않는다.
연결 지도에서는 무엇을 읽을까?
아래 실제 화면은 현재 1.1.1 UI에 가상의 짧은 제목 메모 19개를 넣어 연결이 잘 보이게 구성한 시연이다. 개인 메모 원문이나 실제 작업 성과를 보여 주는 자료가 아니다.
지도에는 같은 분류나 태그로 묶이는 선과, 본문에 [[메모 제목]]으로 직접 적은 연결이 있다. 앱이 모든 메모의 의미를 읽어 관계를 추론하는 기능은 아니다. 어떤 기준으로 이어지는지 알아야 선의 수를 지식의 양으로 오해하지 않는다.
가상 텃밭 기획의 본문에 홍보 카드뉴스 메모로 가는 링크를 적고, 카드뉴스에서도 기획으로 돌아가게 한다. 원고 교정 메모는 기획을 참조한다. 같은 ‘실용서’ 태그로 묶이는 관계와 본문에서 직접 잇는 관계를 나눠 보면, 검색으로 찾은 하나의 메모에서 어디로 건너갈지 정할 수 있다.
다음 그림은 이 관계를 풀어 그린 설명용 도식이며 앱 화면이 아니다.
선이 많아 복잡하면 태그 표시를 끄고 본문 연결이나 분류만 볼 수 있다. 보기 좋은 지도 하나를 얻는 것보다 필요한 연결만 남겨 읽는 쪽에 무게를 둔다.
개선한 코드는 누구에게 돌아가야 할까?
처음부터 나는 변경 내용을 그록봇에도 전달하자고 말한다. 그록봇이 첫 코드만 가지고 있고 Aside만 개선판을 가지고 있으면, 다음 수정에서 이전 상태로 돌아갈 수 있기 때문이다. 개선 뒤에는 변경된 ZIP과 인계서로 구현 내용, 유지할 설정, 검증 범위를 넘긴다.
보충 기록: 기능과 접근 설정의 검증 범위
1.1.0 기능판에는 가상 자료를 이용한 서버 검사79개와 브라우저 검사27개가 있다. 1.1.1에서는 개발용 접근 설정 검사205개를 더해 Node22 자동 검사 총284개를 통과한다. 이 숫자를 모든 공격·모든 기기의 보증으로 읽지는 않는다.
모바일 화면은 실제 휴대폰이 아니라390px 브라우저 폭 재현으로 검사한다. 화면에 사진을 표시하는 기능과 사진을 받아 노션에 저장하는 전 과정 역시 별개다. 텔레그램·Claude 질의 기능은 아직 구현 범위에 포함하지 않는다.
아래는 이 과정을 정리한 재사용용 요청 예시이며 실제 요청문 인용은 아니다.
실제로 쓰는 입장에서 화면과 기능의 개선안을 제안해 줘.
원본 저장 구조는 유지하고 다시 찾기와 갱신 상태를 살펴봐 줘.
수정한 화면과 동작을 전후로 확인해 줘.
다음 AI가 같은 상태에서 이어받을 코드와 변경 설명도 정리해 줘.
지금 이어지는 흐름은 짧은 입력을 그록봇이 정리해 노션에 남기고, 내 웹앱에서 다시 찾아 연결해 읽는 데까지다. 텔레그램 입력과 Claude를 이용한 서버 질문·분석은 아직 구현하지 않은 다음 단계다. 요청한 것, 화면에 생긴 것, 실제로 확인한 것을 나누면 다음 개선도 같은 기준으로 이어갈 수 있다.
직접 확인할 참고 자료
- MDN: 브라우저 localStorage현재 브라우저·출처에 보관되는 상태와 데이터 삭제 조건을 확인한다.
- Notion 공식: 데이터베이스 기본 구조속성과 페이지 본문을 나누어 메모를 보관하는 원리를 확인한다.
설명 기준은 메모 뷰어1.1.1이다. 초기 버전 비교는 별도로 표시한다. 앱 화면은 가상 자료로 재현하고, 대화 도판은 실제 문구를 발췌해 재구성한다. 기본 비공개 운영과 개발용 임시 공개 설정은 구분한다.
실제 프로젝트를 바탕으로 AI의 도움을 받아 작성·편집한다. 원문 인용과 재사용 요청 예시를 구별하며, 이 연재에 개인 메모나 인증정보를 싣지 않는다.