바이브코딩 실전 · 후속 개선 6편
관계가 보이는 지도는 점보다 연결 기준부터 고친다.
처음부터 메모를 잘 분류하려고 만든 앱은 아니다. 생각이나 링크를 남길 때 제목과 보관할 곳까지 정해야 하는 부담을 줄이는 것이 출발점이다. 그록봇에 짧게 건네고, 정리된 기록은 나중에 앱에서 다시 읽는다. 앞 편에서는 빈 화면을 최근 기록과 즐겨찾기가 있는 서재로 고친다. 이번에는 메모 하나에서 다른 메모로 건너가는 지도를 살핀다. 입력할 때 정리할 일을 덜었다면, 다시 열었을 때는 왜 함께 볼 자료인지 알아볼 수 있어야 한다. 선이 많이 생기는 것과 관계를 읽을 수 있는 것은 다른 문제다. 지도 개선의 기준도 선의 개수가 아니라 다음에 무엇을 펼쳐 볼지 판단할 수 있는가에 둔다.
지도보다 설정이 더 넓어도 괜찮을까?
연결을 보여 주는 기능이 있어도 정작 지도가 좁으면 제목과 점을 살피기 어렵다. Aside는 화면을 진단하고 지도 영역을 넓히는 개선안을 만든다. 제목과 확대·축소, 상태 표시는 지도 위로 옮기고 설정은 접는다. 같은 예시 메모 13개를 넣은 1382×671 화면의 비교에서는 캔버스 높이가 약 256px에서 563px로 늘어난다. 같은 창과 같은 예시 자료로 지도에 쓸 수 있는 공간을 비교한 결과다. 표시 공간의 변화이지 검색 속도나 자료를 찾는 성과를 측정한 수치는 아니다.
설정을 없애는 것과 접어 두는 것도 다르다. 자주 읽는 지도는 앞에 두고, 필요할 때 바꾸는 선택지는 뒤로 물린다. 작은 화면에서 메뉴가 닫히는지, 짧은 화면에서도 지도를 볼 자리가 남는지 같은 세부 진단과 검사는 Aside가 맡는다. 지도를 키우는 대신 조작부를 찾기 어려워지지는 않는지도 함께 살핀다.
두 메모 사이의 선은 무엇을 뜻할까?
앞 편의 지도는 같은 분류나 태그, 본문에 직접 적은 연결을 함께 다룬다. 이번 개선에서는 기본 지도의 기준을 더 좁힌다. ‘관련 메모’로 연결된 메모끼리만 선을 긋고, 본문에 적은 링크는 지도 연결에서 제외한다. 분류나 태그가 같다는 이유만으로 생기는 연결과, 관련 메모로 지정된 관계를 한꺼번에 읽지 않기 위해서다. 양쪽 메모가 서로를 가리켜도 지도에는 선 하나만 남긴다. 선을 두 번 그려 관계가 더 강해 보이게 하지 않는 선택이다. 대신 선이나 이웃을 고르면 양쪽에 기록된 연결 이유를 볼 수 있게 한다. 겉으로 단순해진 선을 눌러 판단에 필요한 설명을 읽는 구조다.
예를 들어 가상의 ‘주말 산책 기획’과 ‘걷기 코스 비교’가 관련 메모라고 하자. 하나는 기획이고 다른 하나는 검토 자료일 수 있다. 선 하나만으로는 어느 쪽을 먼저 읽을지 알기 어렵다. 연결 이유가 있으면 기획을 보충하는 자료인지, 서로 비교해야 하는 후보인지 따져 볼 단서가 생긴다. 그렇다고 앱이 두 글을 읽고 의미를 추론해 관계를 알아낸 것은 아니다. 저장된 관계와 이유를 화면에 옮기는 기능이다.
색과 태그는 얼마나 남겨야 할까?
연결 기준을 줄여도 지도에는 구분할 단서가 필요하다. 메모의 색은 영역에 따라 나누고, 영역이 비어 있으면 중립색으로 둔다. 같은 색이라고 반드시 서로 관련된 메모라는 뜻은 아니다. 색은 어느 영역의 기록인지 읽는 단서이고, 선은 관련 메모 관계를 나타낸다. 분류를 별도 중심점으로 세우는 허브와 그 조절 항목은 제거한다. 태그는 기본으로 끄되 원할 때 켜는 선택으로 남긴다. 태그를 켜도 분류 허브가 다시 생기지는 않는다. 공통 태그를 훑고 싶은 순간과 개별 메모 사이의 관계를 읽고 싶은 순간을 구분하면, 모든 표시를 항상 켜 두어야 한다는 부담도 줄어든다.
지도에는 영역과 유형을 고르는 전용 선택지도 둔다. 무엇이 걸러져 있는지와 표시 중인 수, 전체 수를 함께 보여 준다. 메모가 안 보일 때 자료가 없어진 것인지 필터로 숨겨진 것인지 구분하기 위해서다. 지도에서 덜 보이게 하는 일과 원본을 지우는 일은 같지 않다.
하나를 고른 다음에는 어디까지 볼까?
전체 지도는 자료의 분포를 보여 주지만, 다시 읽을 때는 출발점 하나가 더 유용할 수 있다. 점에 마우스를 올리면 주변 연결을 강조하고, 메모를 선택하면 그 메모를 기준으로 살핀다. 주변 1단계는 직접 이어진 이웃을, 2단계는 그 이웃을 거친 연결까지 보여 준다. 가상의 산책 기획에서 코스 비교로, 거기서 준비물 메모로 이어지는 길을 나누어 보는 식이다. Aside는 주변 보기에서 다른 메모를 새 기준으로 고를 때 연결 범위를 다시 계산하는 동작도 확인하고 보완한다. 단계 수를 늘렸다는 기능 설명보다 기준을 바꾼 뒤에도 실제로 그 기준의 이웃을 보여 주는지 확인하는 일이 중요하다.
확대·축소도 보기의 문제와 조작의 문제를 함께 갖는다. 멀리서 점이 작아져도 클릭할 자리까지 지나치게 작아지면 원하는 메모를 고르기 어렵다. Aside는 화면상 최소 12px 반경의 클릭 판정과 점 바깥 가까운 곳의 클릭·호버를 검사한다. 확대 수준에 따른 제목 표시도 조절한다. 이런 조작 범위는 개선 과정에서 Aside가 다듬고 검증한 부분이다. 점을 더 정교하게 그렸다는 설명보다 실제로 고를 수 있는지가 판단 기준이다.
어디까지 확인한 지도로 받아들일까?
이번 개선은 3차원 공간을 만들거나 AI가 메모의 의미를 알아내는 작업이 아니다. 저장된 관계를 덜 겹치게 보여 주고, 색과 필터로 범위를 좁히고, 고른 메모 주변으로 이동하는 작업이다. 화면이 시원해졌다는 인상만으로 끝내지 않고 연결 기준과 선택 결과를 나누어 확인한다. 원한 것은 입력할 때 정리를 강요하지 않으면서 나중에 다시 찾아 읽는 흐름이다. AI의 제안은 그 목적을 돕는 대안이고, 채택 여부는 어떤 관계가 보이며 무엇을 확인했는지로 판단한다. 화면에 선이 늘어나는 것보다 선 하나를 보고 다음 자료를 고를 수 있는 쪽이 이 서재의 목적에 가깝다.
다른 메모 앱에서도 따라 요청할 수 있는 실습용 프롬프트다.
메모를 다시 찾아 읽는 관점에서 연결 지도의 개선안을 제안해 줘.
선이 생기는 기준부터 설명하고, 기본 표시와 선택 표시를 나눠 줘.
중복선, 색의 의미, 주변 1·2단계, 확대 뒤 선택 동작을 확인해 줘.
원본은 바꾸지 말고 가상 자료로 전후를 비교해 줘.
제안한 것, 적용한 것, 확인한 것과 남은 한계를 구분해 알려 줘.
자료·시연 범위: 그래프 개선 전후와 1.4.0·1.5.0·1.6.0 작업 보고를 바탕으로 한다. 예시 제목과 그림 자료는 설명용 가상 재현이다. 화면 조건 시험은 브라우저 재현이며 휴대전화 실기 검증은 아니다.
기록 기준: 2026년 10월 20일의 후속 개선 작업. 예시 화면과 설명도식에는 가상 자료를 사용했다.
이 글은 실제 제작 기록을 바탕으로 AI의 도움을 받아 구성하고 검수했다.