AI로 나만의 노트 앱 만들기 (1) 브라우저 프로토타입
AI와 함께 사람 중심의 개인 노트 앱을 만들기 시작했다. HTML, CSS, JavaScript만으로 브라우저 프로토타입을 만들고, 반복적인 프롬프트 수정과 실제 사용을 통해 기능과 디자인을 다듬으며 얻은 경험을 정리했다.
사람들과 대화한 뒤 노트를 남기는 습관을 만들고 싶었지만, 오랫동안 적당한 도구에 정착하지 못했다.
업노트, 애플 노트, 노션 등 여러 도구를 사용해봤다. 각각 장점이 있었지만 개인 노트와 업무용 노트를 분리해서 관리하기가 애매했고, 내가 필요한 기능에 비해 구조가 복잡하게 느껴지기도 했다.
무엇보다 나는 일반적인 문서나 주제 중심의 노트보다 사람을 중심으로 기록을 쌓고 싶었다.
특정 사람과 언제 어떤 대화를 했는지, 최근에는 무슨 이야기를 나눴는지, 과거에 어떤 관심사와 문제가 있었는지를 시간순으로 빠르게 보고 싶었다. 기존 노트 앱에서도 비슷하게 구성할 수는 있었지만, 매번 이름을 검색하거나 페이지와 태그를 연결하는 과정이 번거로웠다.
여러 아이디어가 있었지만 처음부터 큰 서비스를 기획하기보다는, 내가 직접 사용할 수 있는 최소한의 노트 웹서비스부터 만들어보기로 했다.
AI에게 처음 요청한 기능
처음에는 사람과 노트의 관계만 단순하게 표현하려고 했다.
내가 사람들, 잠재고객, 고객과 대화한 내용을 노트로 남기는 화면을 만들고 싶어.
노트는 노트들끼리 카드 뷰, 타임라인 피드 뷰로 쭉 볼 수 있고, 사람 단위로 노트를 타임라인 피드로 볼 수도 있어야 해.
HTML, CSS, Plain JavaScript 기반에 Cloudflare를 활용해서 만들어줘.결과가 별로 좋지 않았다. "Cloudflare를 활용하라"가 모호하면서 프로젝트를 처음부터 복잡하게 만들었고, 내 머리속에 있는 배경이 좀더 필요하다는 생각도 들었다. 방향을 틀어 더 구체적으로 다음과 같이 요청했다.
HTML, CSS, Plain JavaScript를 사용해서 내가 사용할 툴을 만들고 싶어.
우선 localhost에서 테스트할 수 있게 해줘. 나중에 Cloudflare Wrangler로 Pages, Workers, D1을 사용할 예정이니 이를 고려해줘.
연락처와 노트를 추가하고 수정, 관리 및 활용하는 앱이야.
디자인은 심플하게, 애플 노트 스타일로 만들어줘.
노트들을 쭉 보면서 과거와 최근 내용을 빠르게 읽어볼 수 있게 해줘.
특정 연락처를 기준으로 노트 히스토리를 쉽게 파악하고 해당 노트를 수정할 수 있게 해줘.
구조와 개념은 최대한 간결하게 만들어줘.처음 만들어진 결과는 생각보다 그럴듯했다.
애플 노트와 똑같지는 않았지만 묘하게 비슷한 분위기는 있었다. AI가 디자인을 정확히 이해한 것인지, 익숙한 노트 앱의 형태를 조합한 것인지는 잘 모르겠다.
처음부터 모든 기능을 기획한 뒤 구현하기보다는, 직접 사용해보면서 부족한 부분을 하나씩 추가하는 방식으로 진행하기로 했다.
사용하면서 기능을 추가하다
초기 버전을 써보니 바로 여러 요구사항이 생겼다.
노트를 작성할 때 반드시 연락처를 선택해야 할 이유는 없었다. 생성일도 확인하고 싶었고, 연락처를 선택할 때 검색 기능이 필요했다. 노트를 빠르게 훑기 위해 키보드 위아래 화살표로 선택 항목을 이동하는 기능도 원했다.
새 노트 추가 시 연락처를 선택하지 않아도 되게 해줘.
노트 생성일을 알 수 있게 해줘.
노트에서 연락처를 선택할 때 검색해서 등록할 수 있게 해줘.
노트 목록에서 항목이 선택된 상태라면 키보드 위아래 화살표로 이동하면서 노트를 바꿔볼 수 있게 해줘.
노트 목록 기본 정렬은 생성일로 해줘. 최근 노트만 최근 수정일을 유지해줘.
노트를 삭제하면 휴지통으로 이동하게 해줘. 휴지통에서는 완전히 삭제하기 전까지 유지하고 복구할 수 있게 해줘.AI에게 한 요청들
한 번에 완성된 기획을 입력한 것이 아니라, 사용하다가 불편한 점이 생길 때마다 새로운 요청을 추가했다.
가능하면 구조는 단순하게 유지하려고 했지만, 세부 기능과 디자인을 수정하는 데 예상보다 많은 시간이 들었다.
용어 하나가 기능 전체를 헷갈리게 했다
진행 중 여러번 문제가 된 부분 중 하나는 연락처와 연락처 목록이었다.
왼쪽의 화면 영역이 길어지면서 스크롤 처리도 필요해졌다.
왼쪽의 연락처 영역과 연락처 목록 영역을 포괄하는 부분을 스크롤해서 볼 수 있게 해주세요.그러나 연락처 목록이라는 표현을 계속 사용하자, 사람의 목록인지 그룹 기능인지 혼동이 반복됐다.
결국 기능 이름 자체를 바꿨다.
"연락처 목록"을 "목록"으로 바꿔줘.
"연락처" 목록이라고 말하는 것과 "연락처 목록"이라는 기능 이름이 헷갈려서 그래.이 과정에서 이름을 정하는 일이 단순한 문구 수정이 아니라는 것을 체감했다.
사람도 헷갈리는 용어는 AI도 높은 확률로 헷갈린다. 특히 자연어로 계속 기능을 추가할 때는 용어 하나가 데이터 구조, 화면, 검색과 필터 조건까지 영향을 준다.
동작에 문제가 있어 커밋(Commit)했던 코드는 되돌리고 이후에는 필요할때 목록으로만 요청하니 충돌하지 않았다.
연락처 추가 시 목록을 입력하거나 선택할 수 있게 해줘.
개별 노트에 연락처의 목록 정보도 표시해줘.
목록을 선택해서 노트를 필터링할 수 있게 해줘.
목록만 따로 추가할 수 있게 해줘.연락처 변경 기능에서 발생한 문제
노트에 연결된 연락처를 변경하는 기능도 여러 번 수정했다.
처음에는 노트에 표시된 연락처 이름을 클릭하면 해당 연락처의 노트 목록으로 이동하고, 별도의 연락처 변경 기능으로 연결된 사람을 수정하고 싶었다.
노트에 있는 연락처 부분을 수정하고 싶을 때 "연락처 변경" 텍스트를 누르면 수정할 수 있게 해줘.
연락처 정보는 평상시에는 텍스트로 표시하고, 해당 텍스트를 클릭하면 그 연락처가 선택된 상태로 노트 목록이 나오게 해줘.그런데 연락처 변경 화면에서 현재 연락처의 이름과 회사명이 합쳐진 문자열이 검색창에 자동으로 들어가는 문제가 생겼다.
예를 들어 현재 연락처가 이하늘 · Daylight라면 이 전체 문자열이 검색어로 사용됐다. 실제 연락처 이름은 이하늘인데 합쳐진 문자열로 검색하니 결과가 나오지 않았고, 이미 등록된 연락처인데도 새 연락처 등록 버튼이 나타났다.
이 문제를 해결하기 위해 GPT의 도움을 받아 수정 지시사항을 다시 정리했다.
**수정 지시사항**
1. **진입 시 검색창을 비워둘 것.** 현재 연결된 연락처의 합성 문자열("이하늘 · Daylight")을 검색어로 자동 입력하지 말 것.
2. **화면 진입 시 전체 연락처 리스트를 노출하고, 현재 연결된 연락처에 체크/하이라이트 표시.** 검색은 "다른 사람 찾기"용 보조 기능으로만 사용.
3. **검색은 이름 필드 기준 부분일치로 처리.** "·"로 합쳐진 표시 문자열을 검색 쿼리로 사용하지 말 것.
4. **"연락처 없음" + "등록" 버튼은 실제 부분일치 검색 결과가 0건일 때만 노출.** 현재 연결된 연락처가 이 상태로 뜨는 경우가 없도록 1~2번 먼저 수정.
5. **등록 버튼 클릭 시 이름/별칭 필드를 분리해서 프리뷰 확인 후 저장.** 합성 문자열 전체를 이름 필드에 그대로 넣지 말 것.하지만 여전히 사용하기 어려웠고 방식을 바꾸자는 생각이 들었다.
노트의 연락처 부분을 일반 텍스트로 바꾸고, 클릭하면 해당 연락처 필터가 선택되게 해줘.
연락처 정보 옆의 ... 버튼을 클릭하면 선택지가 나오고, "연락처 변경"을 클릭하면 모달을 띄워 연락처를 검색하고 선택할 수 있게 해줘.작은 부분을 클릭하고 수정하는것보다 훨씬 편안했다. 돌이켜보면 GPT에게 일부 화면 기획을 맡기면 복잡해지는 경우가 있어보인다.
검색과 휴지통
검색 기능도 점차 세분화했다.
처음에는 노트와 연락처를 한 번에 검색했지만, 실제로 사용해보니 노트 검색과 통합 검색의 역할을 나누는 편이 나았다.
"노트 또는 연락처 검색" 기능을 노트만 검색하도록 바꿔줘.
노트 검색어와 일치하는 단어가 있으면 노트 목록의 미리보기 내용에 형광색으로 표시해줘.휴지통도 노트와 연락처를 함께 관리하도록 다시 구성했다.
휴지통을 클릭했을 때 기존에 연락처가 필터링되는 기능은 빼주세요.
휴지통 안에서 "노트 | 연락처" 세그먼티드 탭으로 구분해주세요.
연락처를 완전 삭제하거나 복구할 수 있게 해주세요.기능은 점점 갖춰졌지만 그만큼 상태와 예외도 늘어났다.
노트를 삭제한 상태, 연락처가 삭제된 상태, 삭제된 연락처가 연결된 노트, 휴지통에서 복구한 뒤의 상태처럼 처음에는 생각하지 못한 조건들이 떠올랐다.
다행히 써봤을때는 AI가 큰 문제 없이 돌아가게 만들어둔걸로 보였지만 향후 엄밀한 테스트가 필요해보인다.
작은 디자인 수정에 많은 시간이 들었다
화면 전체를 만드는 것보다 이미 만들어진 화면의 디테일을 고치는 일이 오히려 더 어려웠다.
가장 아래에 있는 메뉴 버튼을 누르면 드롭다운이 화면 밖으로 잘리는 문제가 있었다.
목록에서 가장 아래의 ... 버튼을 눌렀을 때 메뉴가 잘리는 현상을 고쳐줘.드롭다운의 위치도 계속 어긋났다.
노트 상세에서 ... 클릭 시 아래에 나오는 선택지가 왼쪽으로 쏠려 있어.
"..." 바로 아래에 선택지들이 나오게 고쳐줘.버튼 모양도 신경 쓰였다.
... 버튼을 감싸는 배경을 원형으로 바꿔줘.
가로가 눌려서 찌그러진 것 같은데 수정해줘.요청 자체는 작았지만 AI는 어떤 요소를 말하는지 정확히 파악하지 못하거나 다른 부분까지 함께 바꾸는 일이 있었다.
이런 수정은 사용하는 개발 언어를 배운 뒤 직접 수정하는 편이 더 빠를 수도 있겠다는 생각이 들었다.
단축키와 앱다운 동작
노트를 자주 사용하는 도구로 만들려면 키보드 사용성이 중요했다.
통합 검색에는 Cmd + K, 새 노트 생성에는 Cmd + N을 추가했다. 윈도우에서는 각각 Ctrl + K, Ctrl + N을 사용하도록 요청했다.
맥에서는 Cmd + K, 윈도우에서는 Ctrl + K를 누르면 통합 검색창 팔레트가 뜨게 해줘.
검색 결과는 키보드 화살표로 이동할 수 있고, Enter를 누르면 해당 내역으로 이동하거나 적용되게 해줘.맥에서는 Cmd + N, 윈도우에서는 Ctrl + N을 누르면 새 노트가 추가되게 해줘.나중에는 노트를 선택하고 Delete 키를 누르면 삭제되도록 하고 싶었다. 그러나 macOS의 Delete 키는 브라우저 환경에서 Backspace로 전달되는 경우가 있어 생각대로 동작하지 않았다.
삭제 직후 실행 취소도 시도했다.
노트를 삭제한 후 다른 행동을 하지 않고 Cmd + Z 또는 Ctrl + Z를 누르면 삭제된 노트가 복구되게 해줘.기본적인 앱 동작처럼 보이지만 브라우저의 기본 단축키, 텍스트 입력창의 실행 취소, 앱 내부 실행 취소가 충돌할 수 있었다.
웹서비스에서 데스크탑 앱과 같은 사용성을 구현하는 일이 생각보다 단순하지 않았다.
디자인 원칙을 AI에게 맡겨보다
화면마다 글자 크기, 간격과 색상이 조금씩 달라지는 문제도 생겼다.
처음에는 README에 현재 프로젝트와 디자인 스타일을 정리하도록 요청했다.
현재 프로젝트에 대한 내용을 README에 업데이트해줘.
디자인 스타일에 대해서도 추가해줘.그다음에는 화면을 보고 알아서 균형을 맞추도록 요청했다.
현재 이미지처럼 요소가 약간 틀어지거나, 크기가 다른 요소와 균일하지 않은 부분들을 아름답게 개선해줘.하지만 아름답게, 조화롭게, 일관성 있게 같은 표현은 기대한 결과로 이어지지 않았다.
아이콘을 하나의 라이브러리로 통일하고, 검색 입력창과 연락처 선택 UI를 같은 스타일로 맞추기도 했다.
텍스트 크기, UI 요소 간 간격, 디자인 컬러에 대해 일정한 규칙과 원칙을 세우고, 그 기준에 따라 전체를 수정해줘.이것도 기대만큼 잘되지는 않았고 원래 있던 UI 요소들이 빠지기도 했다. 디자인은 단순히 전체를 균일하게 해달라고 해결되는 문제가 아니었다.
연락처 화면과 로고를 다시 정리하다
처음에는 연락처에 회사와 관계 정보를 넣었다. 이후 아이폰 연락처 앱을 참고하면서 필드를 다시 정리했다.
연락처에서 회사 또는 관계 부분을 없애줘.
연락처 정보에 메모, 이메일, 전화번호를 추가해줘.
연락처 변경 시 목록을 검색해서 선택할 수 있게 해줘.
목록 선택 영역에서 목록을 새로 추가할 수도 있게 해줘.실제로 입력할 가능성이 낮은 필드는 제거하고 자주 볼 정보만 남겼다.
AI와 Figma를 활용해서 로고를 바꿔보려고 했지만 SVG 여백을 줄이거나 크기를 맞추는 등 여러 작업에 시간이 필요해보였다. 결국 왼쪽의 로고와 서비스명 영역을 제거했다.
로고가 없어도 사용에는 큰 문제가 없었고 오히려 화면은 더 단순해졌다.
처음에는 무언가 사라지면 결과가 나빠졌다고 생각했지만, 계속 사용하다 보니 없어도 괜찮은 경우가 있었다. 이것을 좋은 판단이라고 해야 할지, 구현 실패에 적응한 것이라고 해야 할지는 아직 모르겠다.
여기까지는 브라우저 안의 개인용 도구였다
처음에는 연락처와 노트를 연결해서 보여주는 작은 도구만 만들 생각이었다.
직접 사용하기 시작하자 검색, 휴지통, 단축키, 연락처 그룹과 디자인 규칙처럼 이전에는 생각하지 못했던 요구가 계속 생겼다. 구조는 단순했지만 내가 원하는 디테일을 맞추는 데에는 예상보다 많은 수정이 필요했다.
그래도 여기까지는 브라우저 안에서 혼자 사용하는 개인용 도구였다.
데이터를 별도의 서버에 저장할 필요도 없었고, 로그인이나 사용자 권한, 배포 환경을 깊게 고민할 필요도 없었다.
어느 정도 사용할 수 있는 형태가 되자 다음 욕심이 생겼다.
단순히 화면이 동작하는 수준을 넘어, 데이터를 서버에 저장하고 다른 환경에서도 사용할 수 있는 실제 앱에 가까운 형태로 만들어보고 싶었다.
다음 글에서는 Cloudflare와 Firebase를 연결하고, 브라우저 안의 프로토타입을 배포 가능한 웹서비스로 확장하면서 겪은 일을 정리해보려고 한다.
Hakbeom Kim