MOA
링크와 캡처를
AI가 정리하는 스크랩 앱
링크나 캡처를 담아 두기만 하면 AI가 정보를 쓰기 좋게 정리합니다. 레시피는 재료와 조리 순서로, 여행 준비물은 체크리스트로 나누고, 행사 포스터는 캘린더에 바로 넣을 수 있게 합니다.
- 상태
- App Store 출시 · Android 준비 중
- 역할
- 루루랩스 창업자 · 제품 설계·개발 총괄
- 팀
- 1인 · AI 코딩 에이전트(구현 Codex · 감사 Claude Code)
- 기간
- 2026.07 – 현재
문제
저장한 정보를
다시 찾기 어려웠습니다
출발점
사려던 물건, 가 보고 싶은 맛집과 카페, 해 먹어 보고 싶던 레시피를 카카오톡, 인스타그램, 브라우저에 그때그때 저장해 두곤 했습니다.
문제
캡처는 사진첩에, 링크는 카카오톡 나와의 채팅방에, 게시물은 인스타그램과 유튜브 저장함에 계속 쌓였지만 정작 필요할 때는 그 정보가 어디에 있는지 찾을 수 없었습니다.
설계 목표
사용자는 담기만 하고 제목·내용·분류는 AI가 정리해 주는 것을 목표로 했습니다. 따로 정리하지 않아도 필요할 때 바로 꺼내 볼 수 있어야 했기 때문입니다.
결정 1
저장과 AI 정리를 분리
사용자는 필요한 내용을 발견하면 공유 버튼으로 링크와 캡처를 담습니다. 이때 AI 정리까지 마친 뒤에 저장되게 하면, 사용자는 한 링크당 보통 10초 정도를 기다려야 합니다. 그래서 저장은 공유 시트에서 바로 끝내고, 제목·요약·분류는 AI가 뒤이어 정리해 목록에서 찾아보기 쉽게 했습니다.
AI 정리와 별개로 저장 완료
인터넷이 끊기거나 정리가 늦어져도 스크랩은 목록에 남습니다. 캡처 속 글자와 링크 주소로 찾을 수 있고, 나중에 다시 정리할 수 있습니다.
결정 2
가입 없이 시작하고, 원문은 기기에 보관
링크와 캡처에는 대화 내용이나 연락처, 부동산·대출 정보처럼 노출되면 위험한 개인 정보가 함께 담기기 쉽습니다. 그래서 원문과 사진은 서비스 서버에 두지 않고 사용자의 기기에 저장합니다.
기기에 저장
원문이 기기에 있으니 가입하지 않아도 바로 담을 수 있습니다.
개인 iCloud로 동기화
기기 간 동기화에는 사용자의 iCloud를 이용했습니다.
MOA 서버
원문은 AI 정리를 위해 거쳐 갈 뿐, 서버에 보관하지 않습니다.
만드는 방식 1
AI로 구현한 화면을 Figma 디자인 시스템으로
MOA는 Figma 화면 없이 AI 에이전트와 함께 코드로 먼저 만들었습니다. 그래서 어떤 화면과 상태가 있는지 보려면 코드를 열어야 했고, 제품 전체 UX를 한눈에 검토하기 어려웠습니다. 만든 앱을 Figma로 옮겨 화면·컴포넌트·토큰을 정리하고, 이후 새 화면은 Figma에서 설계할 수 있게 세팅했습니다.
화면과 상태를 함께 검토
코드에만 있던 화면과 상태를 오토레이아웃 화면으로 옮겼습니다.
코드와 맞춘 변수·컴포넌트
토큰은 변수·스타일로, 공용 UI는 컴포넌트로 묶어 디자인 시스템을 만들었습니다.
만드는 방식 2
Figma 설계와 코드 구현을 같은 기준으로 관리
새 화면을 만들 때마다 Figma와 코드가 어긋나는 일을 막기 위해, 둘을 1:1로 잇는 규칙을 정했습니다. 구현은 AI가 맡기 때문에, 디자인 의도는 말로 설명하는 대신 AI가 읽고 검사할 수 있는 명세와 수치로 남겼습니다.
화면과 동작을 함께 명세
화면마다 어떤 조건에서 진입하고, 사용자가 무엇을 누르면 어떤 상태로 넘어가는지, 저장과 오류는 어떻게 되는지 모두 적었습니다.
Figma와 실제 앱을 수치로 대조
화면을 Figma와 실제 앱에서 숫자로 뽑아 비교하고, 어긋난 색·글자·치수는 고친 뒤 다시 생기지 않도록 문서로 정리했습니다.
AI가 진행하는 변경과 직접 승인하는 변경
화면 수정은 Figma대로 구현하고 대조하는 데까지 AI에 맡겼습니다. 새 색과 새 컴포넌트, 공용 컴포넌트 변경, 삭제는 직접 승인해 AI가 비슷한 색과 컴포넌트를 계속 새로 만드는 일을 막았습니다.