바이브코딩 실전 · 3/5
저장소가 마음에 들어도 읽는 화면까지 그대로 써야 하는 것은 아니다.
노션에 원본을 두고, 그 메모를 꺼내 읽는 웹앱을 따로 만들 수 있다.
이번 단계의 질문은 ‘다른 메모 도구로 옮길까?’에서 시작한다. 그록봇에게 옵시디언을 쓰면 분류와 관리가 더 편할지, 그록봇의 컴퓨터에서 운영할 수 있는지 묻는다. 그록봇은 노션을 메인 보드로 유지하고 필요할 때 옵시디언용 폴더를 내보내는 방법을 제안한다. 사람은 그 제안에서 다른 가능성을 찾아 다시 요청한다.
노션을 저장소로 두고 화면만 바꿀 수 있을까?
휴대폰은 유료구나, 옵시디언 역할을 하는 것을 내 홈페이지 서버에 페이지로 만들어서 나만 거기서 볼수 있나? 노션을 디비로 사용하고, 껍데기만 옵시디언 처럼 볼수도 있나?
인용 속 ‘휴대폰은 유료’는 정정이 필요하다. 옵시디언 모바일 앱 자체는 무료이며 유료 동기화 서비스와 구별해야 한다. 이 질문의 핵심은 가격 판단보다 ‘노션을 디비로 사용하고’에 있다. 데이터를 옮기지 않고 별도 화면에서 읽고 싶다는 요청이다.
그록봇은 노션을 데이터 저장소로 두고 서버에서 메모를 불러와 보여 주는 구조를 제안한다. 이때 ‘옵시디언처럼’이라는 말은 원하는 화면의 방향을 설명한다. 옵시디언의 모든 기능을 그대로 복제한다는 약속은 아니다.
대화 도판은 실제 요청과 답변의 발췌를 다시 그린 편집 재구성이다. 사람은 원하는 사용 장면을 말하고, 그록봇은 그것을 저장소와 읽기 화면으로 나눈다. 코드를 먼저 정하지 않아도 이 정도의 역할 구분은 함께 확인할 수 있다.
노션 원본을 그대로 두면 새 화면을 고칠 때마다 메모를 이사시키지 않아도 된다. 앞 편에서 목록과 본문을 나누어 저장한 구조도 여기서 쓰인다. 목록에서는 제목과 요약을, 선택한 메모에서는 본문을 불러와 보여 주면 된다.
첫 웹앱은 어떻게 읽게 해 줄까?
그록봇이 만드는 첫 앱의 버전은 1.0.0이다. 분류와 태그를 고르는 영역, 메모 목록, 선택한 메모의 본문으로 나뉜다. 검색과 그래프, 밝고 어두운 테마 전환도 들어간다. 휴대폰에서는 메뉴를 열어 분류와 태그를 고르는 구조다.
아래 두 이미지는 첫 1.0.0을 비교해 보기 위한 가상 메모 일곱 개의 재현 화면이다. 1편에서 먼저 본 현재 1.1.1 화면과 구별해서 읽는다.
가상 메모 ‘베란다 텃밭 초보용 책 목차’를 연다고 생각해 보자. 왼쪽 목록에서 제목과 요약으로 고르고, 본문에서는 계절별 구성과 ‘실패한 날 이야기’를 읽는다. 목록을 짧게 만든다고 원문까지 줄이지 않는 이유가 화면에서도 드러난다.
노션 페이지 자체를 화면에 끼워 넣는 방식은 아니다. 별도 앱이 메모를 읽어 목록과 본문을 새로 그린다. 따라서 노션의 칸 폭을 원하는 대로 바꾸기 어렵더라도, 새 앱의 읽는 배치는 따로 다듬을 수 있다. 저장 도구의 모든 제약을 읽는 화면까지 그대로 가져올 필요는 없는 셈이다.
이 첫 결과는 완성 선언보다 다음 요청을 정할 실물에 가깝다. 원하는 자료가 본문에 보이는지, 목록에서 고른 항목과 맞는지, 휴대폰에서 메뉴를 열고 돌아올 수 있는지를 살핀다. ‘예쁜 화면’이라는 평가보다 다음 수정에 쓸 조건을 찾는 쪽이 유용하다.
검색 결과와 메모 연결은 무엇을 보여 줄까?
가상 자료 재현 화면에서 ‘텃밭’을 검색하면 네 건이 나온다. 제목뿐 아니라 요약·본문·태그도 검색하므로, 제목에 그 말이 없어도 다른 영역에 들어 있으면 찾을 수 있다.
메모 연결에는 다른 근거들이 함께 쓰인다. 본문에 다른 메모 제목을 직접 적은 링크가 있고, 반대로 이 메모를 언급한 기록을 찾아가는 길이 있다. 같은 태그나 분류를 가진 메모를 관련 항목으로 보여 주는 기능도 있다. 가상 텃밭 기획에서 관련 홍보 아이디어로 오가는 장면은 이 기능을 설명하는 예시다.
그래프의 선은 이런 연결을 펼쳐 보는 표현이다. 선이 있다고 AI가 글의 의미를 분석해 새로운 관계를 발견했다는 뜻은 아니다. 직접 적은 제목 링크인지, 태그나 분류가 겹쳐서 생긴 관계인지 구분하면 연결 화면을 과장 없이 읽을 수 있다.
검색도 같은 기준으로 본다. ‘텃밭’이라는 문자를 찾는 기능과 ‘겨울에 어떤 작물을 기르면 좋을까?’라는 질문에 AI가 답하는 기능은 다르다. 이 앱에 구현한 것은 앞의 검색이다. 텔레그램 입력과 서버의 클로드를 통한 메모 검색·분석 구상은 아직 구현하지 않은 다음 단계다.
만든 앱은 누가, 무엇과 함께 넘길까?
사람이 다음으로 선택하는 것은 배포 준비다.
지금 배포 준비 시작해 줘
그록봇은 초기 앱의 코드와 실행 구성을 만들고 노션 조회를 시험한다. 사람은 필요한 연결을 허용한다. 노션 접근 시험에서 인증 오류와 대상 접근 오류를 거친 뒤 다섯 항목을 읽는 결과가 나온다. 화면 파일이 있는 것과 실제 저장소를 읽을 수 있는 것은 따로 확인할 일이다.
이후 사람은 어사이드 브라우저를 통해 올리겠다고 전하고, 어사이드가 작성한 검토·배포 안내를 그록봇에게 전달한다. 실행·빌드 방법, 필요한 서버 버전, 설정 항목의 이름과 용도를 함께 받자는 내용이다. 여기서 사람의 일은 기술 요구사항을 처음부터 홀로 설계하는 것이 아니라, 다음 도구가 필요한 조건을 확인하고 전달하는 것이다.
파일이 오지 않자 다시 요청한다.
파일이 아직 없어. 보내줘.
이 한 문장이 결과물의 기준을 분명하게 한다. ‘앱을 만들었다’는 설명만으로는 다른 도구가 작업을 이어받을 수 없다. 실제 파일과 실행 방법이 있어야 검토하고 서버에 올릴 수 있다. 이번 흐름에서는 그록봇이 첫 앱 제작을, 어사이드가 이어지는 검토·배포와 개선을 맡는다.
비슷한 화면을 요청할 때는 다음처럼 범위를 정할 수 있다. 재사용용 요청 예시이며 실제 대화 인용은 아니다.
노션은 원본 저장소로 두고, 읽기 전용 메모 웹앱을 만들어 줘.
분류·목록·본문과 문자 검색을 넣고 가상 메모로 먼저 보여 줘.
본문의 제목 링크와 같은 태그의 관련 메모도 오갈 수 있게 해 줘.
지금 구현한 기능과 아직 없는 기능을 나누어 설명해 줘.
다른 도구가 이어받을 파일과 실행 방법을 함께 전달해 줘.
새 화면의 목적은 노션을 없애는 것이 아니다. 원본을 지키면서 내게 맞게 읽는 길을 하나 더 여는 것이다. 다음 편에서는 이 파일을 어사이드에 넘겨 실제 서버에서 열리는 앱으로 만드는 과정을 다룬다.
직접 확인할 참고 자료
- Obsidian 공식: 모바일 앱무료 모바일 앱 자체와 별도의 선택 서비스를 구분한다.
- Obsidian 공식: 요금과 선택 서비스동기화·공개 서비스의 조건은 이용할 때 공식 안내를 다시 확인한다.
- Notion 개발 문서: 데이터베이스와 페이지데이터 소스·속성·본문 블록의 관계를 더 자세히 볼 때 이용한다.
설명 기준은 메모 뷰어1.1.1이다. 초기 버전 비교는 별도로 표시한다. 앱 화면은 가상 자료로 재현하고, 대화 도판은 실제 문구를 발췌해 재구성한다. 기본 비공개 운영과 개발용 임시 공개 설정은 구분한다.
실제 프로젝트를 바탕으로 AI의 도움을 받아 작성·편집한다. 원문 인용과 재사용 요청 예시를 구별하며, 이 연재에 개인 메모나 인증정보를 싣지 않는다.