바이브코딩 실전 · 2/5
메모가 쌓이면 저장 위치를 아는 것만으로는 부족하다. 어떤 기록이 모였는지 한눈에 볼 자리가 필요하다.
이번 단계에서는 그록봇에게 보이는 화면을 요청하고, 제안 가운데 노션 보드를 고른다. 사람이 먼저 데이터베이스의 항목과 화면 배치를 모두 설계하지는 않는다. 읽고 싶은 모습을 말하고, 결과를 확인하면서 필요한 조건을 더한다.
보드를 부탁하면 어떤 선택지가 나올까?
먼저 그록봇에게 이렇게 묻는다.
위 메모들을 시각적으로 보드나, 이런곳에 볼수 있는 방법이 있을까?
그록봇은 노션 데이터베이스를 만들어 분류별 보드로 보는 방법과, HTML 카드 보드를 만들어 파일로 보내는 방법을 제안한다. 노션은 휴대폰에서도 열 수 있다는 설명을 덧붙인다. 여기서 사람이 고르는 것은 개발 언어가 아니라 메모를 펼칠 자리다.
노션 보드로 만들어 줘
대화 도판은 실제 요청과 답변을 발췌해 다시 그린 편집 재구성이다. 짧은 질문 뒤에 선택지가 나오고, 사람의 선택이 다음 작업을 정하는 순서를 보면 된다.
그록봇은 노션에 보관함과 메모 데이터베이스를 만든다. 첫 연결 시험에서 읽은 항목은 다섯 개다. 시간순으로 이어 붙인 파일과 달리, 노션에서는 메모 한 건이 하나의 항목이 된다. 책기획·할일·자료 같은 분류로 모아 보면 어떤 종류의 메모가 쌓이는지 훑을 수 있다.
보드는 AI가 내용을 새로 이해했다는 증거가 아니다. 이미 정리한 기록을 사람이 보기 쉬운 모양으로 펼치는 장치다. 이 차이를 알면 결과를 보는 기준도 단순해진다. 카드가 보기 좋은지와 함께, 원문이 있는 항목을 정확히 열 수 있는지 살핀다.
목록에는 무엇을, 본문에는 무엇을 남길까?
이 프로젝트의 노션 항목에는 제목·분류·태그·날짜·요약·원문 링크가 들어간다. 항목을 열어 읽는 본문에는 입력 원문과 확인 내용을 남긴다. 목록은 찾는 자리이고 본문은 읽는 자리다. 모든 내용을 카드 앞면에 밀어 넣지 않아도 된다.
가상 메모로 이 구분을 살펴보자. 다음 문장은 설명을 위한 연습용 자료이며, 실제 운영 노션에 저장한 메모가 아니다.
연습용 가상 메모: 베란다 텃밭 초보용 책 목차. 봄에는 상추와 바질, 여름에는 물 주기와 벌레 관리. 가을 수확과 겨울 새싹 채소까지 계절별로 나누고, 매 장 끝에 실패한 날 이야기를 넣기.
이 예시에서 제목은 ‘베란다 텃밭 초보용 책 목차’로 줄일 수 있다. 분류는 ‘책기획’, 태그는 ‘텃밭’과 ‘목차초안’처럼 붙인다. 요약은 계절별 구성과 실패 사례를 함께 다룬다는 정도로 정리한다. 계절마다 어떤 소재를 넣으려는지는 본문에 남은 원문에서 다시 확인한다.
‘실패한 날 이야기’는 제목에서 빠져도 괜찮다. 원문에서도 사라지면 곤란하다. 나중에 목차를 다듬을 때 그 작은 생각이 책의 방향을 바꿀 수 있기 때문이다. 짧은 요약이 원문을 대신하지 않게 하는 것이 저장 구조의 핵심이다.
이 기준은 자료 링크에도 적용할 수 있다. 링크는 자료로 돌아가는 길이고, 확인 내용은 그 자료에서 무엇을 읽었는지에 대한 설명이다. 둘을 섞어 두면 AI가 정리한 말과 출처의 실제 내용을 구별하기 어렵다. 이 프로젝트도 입력 원문과 확인 내용을 나누어 보관한다. 다만 파일과 노션이 항상 자동으로 일치하는 완전한 동기화 장치는 아니다.
‘분류를 먼저’가 휴대폰에서도 편할까?
보드가 생긴 뒤에는 화면 순서를 바꿔 달라고 요청한다.
분류를 맨 앞으로 보내줘
이어 휴대폰에서 생기는 문제를 이렇게 전한다.
분류 칸 넓이를 좀더 좁혀 줄수 있어? 모바일에서 볼때 앞에 분류만 보이네
두 요청은 모순이라기보다 결과를 보며 기준을 좁히는 과정이다. 분류를 앞에 놓으면 메모의 성격은 빨리 알 수 있다. 하지만 좁은 화면에서 분류가 공간을 차지하면 정작 읽고 싶은 제목이 뒤로 밀린다. 이때 ‘모바일 대응을 잘해 줘’보다 ‘앞에 분류만 보인다’가 수정 지점을 더 정확히 가리킨다.
그록봇의 답은 다음과 같다.
노션 연결로는 칸 폭을 바꿀 수가 없어서, 대신 표 보기에서 분류를 제목 바로 뒤로 옮겼어요.
칸 폭을 좁히는 데 성공한 것이 아니다. 연결 도구가 할 수 있는 범위 안에서 순서를 바꾼다. 사람은 ‘분류가 맨 앞’이라는 첫 방법에 매달리기보다, ‘휴대폰에서 제목을 읽는다’는 목적을 기준으로 대안을 살필 수 있다.
AI와 함께 화면을 만들 때 유용한 피드백도 이런 모양이다. 어느 기기에서, 무엇을 하려는데, 어떤 정보가 가리는지 말한다. 해결 방법을 미리 정하지 않아도 AI가 다른 배치를 제안할 여지가 생긴다. 다만 제안한 이유와 실제로 바뀐 결과는 따로 확인해야 한다.
보드가 보이면 연결도 끝난 걸까?
노션에서 사람이 메모를 읽는 것과, 별도 앱이 그 메모를 불러오는 것은 다르다. 이후 웹앱 준비에서 이 차이가 드러난다. 첫 연결 시험에는 인증 오류가 나오고, 다시 시험하자 이번에는 대상을 찾지 못한다는 오류가 나온다. 같은 실패처럼 보여도 확인할 지점은 다르다.
그록봇은 첫 오류를 보고 연결에 쓰는 값에 문제가 있을 가능성을 설명한다. 다음 오류에서는 대상 페이지의 연결 허용을 확인한다. 사람이 노션에서 연결을 허용한 뒤 이렇게 답한다.
연결했어
재시험 결과는 다섯 항목이다. 이 결과로 확인하는 것은 앱이 노션 항목을 읽는 통로다. 모바일 배치가 편한지, 제목과 본문이 원하는 방식으로 표시되는지는 별도의 화면 문제다. 연결 성공 하나로 모든 사용 경험이 완성됐다고 보지 않는다.
독자가 자신의 보드를 부탁할 때는 다음처럼 시작할 수 있다. 재사용용 요청 예시이며 실제 대화 인용은 아니다.
내 메모를 분류별로 볼 노션 보관함을 만들어 줘.
제목·분류·태그·날짜·요약은 목록에, 입력 원문은 본문에 남겨 줘.
가상 메모로 구조를 먼저 보여 줘.
휴대폰에서는 제목을 먼저 읽을 수 있게 해 줘.
연결에 필요한 내 작업과 네가 할 작업을 나누어 설명해 줘.
이번 단계에서 만드는 것은 메모를 모아 읽을 저장소다. 그록봇은 구조와 대안을 만들고, 사람은 보드를 고르고 실제 화면에서 불편한 점을 짚는다. 다음 단계에서는 노션을 버리는 대신 한 가지를 더 나눈다. 원본은 그대로 두고, 읽는 화면만 따로 만드는 것이다.
직접 확인할 참고 자료
- Notion 공식: 보드 보기같은 데이터베이스를 속성별 카드로 묶어 보는 방법을 살핀다.
- Notion 공식: 연결 추가와 권한 관리연결을 대상 페이지에 허용하는 단계와 권한 범위를 확인한다.
- Notion 개발 문서: 데이터베이스와 페이지데이터 소스·속성·본문 블록의 관계를 더 자세히 볼 때 이용한다.
설명 기준은 메모 뷰어1.1.1이다. 초기 버전 비교는 별도로 표시한다. 앱 화면은 가상 자료로 재현하고, 대화 도판은 실제 문구를 발췌해 재구성한다. 기본 비공개 운영과 개발용 임시 공개 설정은 구분한다.
실제 프로젝트를 바탕으로 AI의 도움을 받아 작성·편집한다. 원문 인용과 재사용 요청 예시를 구별하며, 이 연재에 개인 메모나 인증정보를 싣지 않는다.