hyukstory

비개발자 BD의 빌더(Builder) 되기 #13 — 로그인을 붙이고, 내 매장 것만 보이게

지난 글에서 화면을 진짜 데이터 창고에 연결했다. 그런데 사장님 웹은 만능열쇠로 창고를 열고 있었고, 직원 앱은 문지기에게 막혀 0명만 보였다.이번 글에서는 로그인을 붙였다. 그리고 창고의 문지기에게 "내 매장 사람에게만 내 매장 것을 보여 줘"라는 규칙을 가르쳤다.오늘의 목표사장님 웹과 직원 앱에 로그인 붙이기문지기에게 "내 매장 것만" 규칙 세우기사장님 웹에서 만능열쇠 버리기사장과 알바가 같은 화면에서 다른 것을 보는지 확인하기1. 무엇부터? — 소셜 로그인은 잠깐 미뤘다이번에도 Claude가 보기 세 개를 그림으로 보여 줬다.A. 웹과 앱 둘 다 이메일 로그인 + 문지기 규칙B. 웹만 먼저C. 카카오·구글 같은 소셜 로그인부터설계서에는 "카카오·구글·애플로 로그인"이라고 적어 뒀다. 그런데 소셜 로..

비개발자 BD의 빌더(Builder) 되기 #12 — 가짜 데이터에서 진짜 데이터 창고로

지금까지 만든 화면은 전부 가짜 데이터로 돌아갔다. 사람을 등록해도 새로 고침하면 사라졌다. 코드 속에 적어 둔 견본을 보여 줬을 뿐이라서다.이번 글에서 드디어 8회에 만들어 둔 진짜 데이터 창고(Supabase)에 화면을 연결했다. 그리고 "0명이 나와야 성공"이라는 이상한 확인도 해 봤다.오늘의 목표무엇부터 옮길지 고르기창고에 표를 만들고 견본 데이터 넣기직원 앱: 창고에 닿는지, 문지기가 잘 막는지 확인사장님 웹: 사람을 등록하고 새로 고침해도 남아 있게1. 무엇부터? — 다른 기능이 다 기대는 바닥부터이번에도 Claude가 보기 세 개를 그림으로 보여 줬다. 매장·사람부터 / 공지부터 / 로그인부터.나는 매장·사람부터 골랐다. 근무표도 공지도 결국 "어느 매장의 누구"를 알아야 돌아간다. 집을 지..

비개발자 BD의 빌더(Builder) 되기 #11 — 사진·동영상 붙이기와 '끌어다 놓기'

연재 이름을 바꿨다. "BD(Business Developer)의 PB(Product Builder) 되기"는 너무 길어서, "비개발자 BD의 빌더(Builder) 되기"로 줄였다. 지난 글들도 모두 새 이름으로 바꿔 뒀다. 이번 글에서는 공지에 사진과 동영상을 붙일 수 있게 했다. 처음으로 "파일을 어디에 저장하지?"를 고민했고, 같은 끌어다 놓기가 웹과 휴대폰에서 얼마나 다른지도 알게 됐다. 오늘의 목표공지에 사진·동영상을 넣는 규칙 정하기 (몇 개까지, 어디에 보일지, 어디에 저장할지)사장님 웹과 직원 앱에 목업으로 넣고 직접 눌러 보기1. 규칙부터 — "몇 개까지?"가 아니라 "얼마나 무겁게?"이번에도 Claude가 화면 보기 3개를 그림으로 보여 줬다. 사진만 받기 / 사진·동영상을 본문 아래..

비개발자 BD의 빌더(Builder) 되기 #10 — 웹에 화면 여러 개 만들고, 써 보며 고치기

지난 글에서는 휴대폰 앱에 공지 화면을 만들었다. 이번엔 사장님이 PC로 쓰는 웹에도 같은 화면을 붙였다.만들면서 제일 많이 배운 건 코드보다 "직접 눌러 보면 불편한 게 보인다"는 것이었다. 그리고 Next.js가 처음 보는 오류를 냈다.오늘의 목표앱과 웹이 같은 방식으로 동작하게 하기 — 그러려면 설계서부터웹(Next.js)에 화면 여러 개와 주소를 만들기직접 써 보면서 불편한 곳을 바로 고치기1. 앱과 웹이 다르게 굴면 안 된다 — 설계서부터같은 기능이 앱에서는 이렇게, 웹에서는 저렇게 움직이면 쓰는 사람이 헷갈린다. 그래서 웹을 만들기 전에 설계서를 먼저 고치고, 그 설계서대로 앱과 웹을 둘 다 만들었다.이번에도 Claude가 화면 보기 2~3개를 그림으로 그려 보여 줬다. 말로만 들을 때보다 고..

지난 글 끝에서 "다음엔 데이터 창고에 첫 표를 만든다"고 했다. 그런데 그 사이에 꼭 넣고 싶은 기능이 하나 생각났다. 매장에서 일하면서 늘 아쉬웠던 공지다.그래서 순서를 바꿨다. 이번 글은 그 기능을 핑계로, 직원 앱에 화면을 여러 개 만들고 오가게 하는 법을 배운 이야기다.(기능을 어떻게 만들었는지는 출시 전까지 조금 아껴 두려고 한다. 대신 배운 건 다 적는다.)오늘의 목표하고 싶은 기능이 생겼을 때, 바로 만들지 않고 설계서에 먼저 적기직원 앱에 탭(아래쪽 버튼)과 화면 이동 만들기버튼을 누르면 다른 화면까지 같이 바뀌는 구조 이해하기가상 아이폰에서 눌러 보며 확인하기1. 기능이 떠오르면, 먼저 설계서에예전 같았으면 "공지 기능 만들어 줘" 한 줄을 던졌을 것이다. 이번엔 Claude에게 기능을..

지난 글에서는 사장님이 PC로 보는 웹 화면을 만들었다. 이번엔 직원들이 쓸 휴대폰 앱 차례다.목표는 단순했다. "내 폰에 내 앱 첫 화면 띄우기." 그런데 이 한 화면을 띄우기까지 "버전이 안 맞아요"를 두 번, "로그인하세요"를 한 번, "도쿄에 만들어졌네?"를 한 번 만났다.오늘의 목표맥 안에 가상 아이폰을 띄우기직원 앱의 뼈대를 만들고 첫 화면 보기진짜 폰 두 대(아이폰, 갤럭시)에서 내 앱 열어 보기데이터를 담을 창고, Supabase 프로젝트 만들기1. 맥 안에 가상 아이폰 띄우기지난 글에서 Xcode를 깔아 뒀다. Xcode 안에는 iOS 시뮬레이터가 들어 있다. 맥 화면 안에서 돌아가는 가상 아이폰이다. 진짜 아이폰이 없어도 아이폰 앱이 어떻게 보이는지 확인할 수 있다.가상 아이폰을 쓰려면..

기획서도, 설계서도 다 썼다. 이제 진짜 "만들기"다.그런데 첫 화면을 띄우기도 전에 "도구만 30GB"라는 말을 듣고 멈칫했다. 결국 무거운 도구는 미루고, 브라우저에서 바로 눌러 볼 수 있는 사장님용 웹 화면부터 만들었다.오늘의 목표사장님이 쓰는 웹 화면의 목업을 만들어서 직접 눌러 보기휴대폰 앱은 무엇으로 확인할지 정하기만들어 보면서 바뀐 생각을 설계서에 다시 적기💡 목업(mockup)은 진짜 데이터 없이, 가짜 데이터로 화면 모양과 흐름만 먼저 만든 것이다. 집을 짓기 전에 모델하우스를 먼저 지어 보는 것과 비슷하다. 눌러 보고 어색한 곳을 고치는 비용이 제일 싼 단계다.1. "도구만 30GB?" — 무엇부터 만들까설계서에 적어 둔 순서는 도구 준비 → 웹 목업이었다. 휴대폰 앱을 맥에서 확인하..

지난 글에서 설계서를 다 썼다. 그런데 매장에서 실제로 쓰는 구글 시트와 문서를 다시 열어 보니, 빠진 일이 너무 많았다.서류 받기, 오픈·마감 체크리스트, 레시피, 발주. 이걸 다 더하고 나니 이 앱은 더 이상 "HR 관리"만 하는 앱이 아니게 됐다.오늘의 목표매장에서 실제로 하는 일을 앱 기능으로 옮기기지금 쓰는 구글 시트·문서 구조를 그대로 살펴보고 설계에 반영하기늘어난 기능을 언제, 어떤 순서로 만들지 다시 정하기1. 설계서를 다 쓰고 나서 생각난 것들설계를 마치고 매장 일을 하나씩 떠올려 보니, 근무표·교대·휴가 말고도 매일 손이 가는 일이 많았다. 생각나는 대로 Claude에게 말했다.직원·알바를 처음 초대하면 필수 서류(통장사본, 신분증)를 요청하기바로 못 내면 나중에 첨부하고, 고칠 수도 ..

지난 글에서 무엇을 만들지 정했다. 이번엔 어떻게 만들지 정할 차례다.이번에도 코드는 한 줄도 없다. Claude가 묻고 내가 고르는 대화만으로 설계서 한 장을 만들었다.오늘의 목표기획서에 "나중에 정하자"고 남겨 둔 숙제 풀기어떤 도구(기술)로 만들지 정하기앱이 저장할 정보 목록 만들기정한 내용을 설계서 한 장으로 정리하기💡 설계는 집으로 치면 도면 그리기다. 기획에서 "방 3개, 거실 넓게"를 정했다면, 설계에서는 벽을 어디에 세우고 어떤 자재를 쓸지 정한다. 도면 없이 벽부터 세우면 나중에 허물어야 한다.1. 기획서 숙제 6개를 하나씩기획서 맨 끝에 "설계에서 정할 것" 6개를 남겨 뒀었다. Claude가 이걸 한 번에 하나씩, 선택지 2~3개와 함께 물어봤다. 선택지마다 장단점이 한 줄씩 붙어 ..

0단계 준비가 끝났다. 이번 글부터 진짜 앱 이야기다.코드는 한 줄도 안 쓰고, Claude와 대화만으로 어떤 앱을 만들지 정했다. 결과물은 기획서 한 장이다.오늘의 목표누가 쓰는지, 어떤 불편을 푸는지 정하기꼭 있어야 하는 기능 고르기첫 버전(MVP)에 넣을 것과 뺄 것, 만드는 순서 정하기웹으로 갈지 앱으로 갈지 정하기정한 내용을 기획서 한 장으로 정리하기1. Claude가 한 번에 하나씩 물어본다기획이라고 해서 거창한 문서를 혼자 써야 하는 줄 알았는데, 실제로는 Claude가 질문을 하나씩 던지고 내가 고르는 식으로 진행됐다. 질문마다 선택지가 2~3개 나오고, 마음에 드는 게 없으면 직접 적으면 된다.내가 받은 질문은 이 순서였다.예전에 설계만 해 둔 근무관리 앱 아이디어를 이어갈까, 새로 정할..