hyukstory

비개발자 BD의 빌더(Builder) 되기 #16 — 공지에 사진·동영상: 파일 창고와 1시간짜리 주소

지난 글에서 공지를 진짜 데이터 창고로 옮겼다. 사장님이 올리면 직원 앱에 오고, 직원이 읽으면 사장님이 안다.그런데 매장 공지는 글만으로는 부족할 때가 많다. "제빙기는 이렇게 닦아요"는 사진 한 장이, "새 메뉴 만드는 법"은 짧은 영상 하나가 더 낫다. 11회에 화면만 만들어 뒀던 사진·동영상 붙이기를 이번에 진짜로 붙였다.오늘의 목표사진·동영상을 보관할 파일 창고 만들기사장님 웹에서 공지에 사진·동영상 올리기직원 앱에서 사진 보고 동영상 재생하기1. 글과 파일은 따로 보관한다지금까지 데이터 창고(Supabase)에 넣은 건 전부 표였다. 엑셀처럼 칸과 줄이 있고, 글자나 숫자가 들어간다.사진·동영상은 다르다. 크기가 훨씬 크고, 표 칸에 넣을 수 있는 모양도 아니다. 그래서 Supabase에는 파..

비개발자 BD의 빌더(Builder) 되기 #15 — 공지를 진짜 창고로: 직원이 읽으면 사장님이 안다

지난 글에서 초대 링크를 만들었다. 이제 진짜 직원 계정이 우리 매장에 들어올 수 있다.그런데 앱의 공지는 아직 가짜였다. 화면 안에만 있는 데이터라서, 새로 고침하면 처음 상태로 돌아갔다. 이번 글에서는 공지를 진짜 데이터 창고로 옮겼다. 사장님이 올리면 직원 앱에 오고, 직원이 [확인했어요] 버튼을 누르면 사장님 웹에 "누가 언제 읽었는지"가 남는다.오늘의 목표공지를 데이터 창고(Supabase)에 저장하기사장님 웹에서 올린 공지가 직원 앱에 오게 하기직원이 [확인했어요]를 누르면 사장님 웹에 읽음이 남게 하기1. 무엇부터? — 공지 vs 소셜 로그인이번에도 Claude가 보기를 그림으로 보여 줬다.A. 가짜 데이터로 남아 있는 공지를 데이터 창고로 옮기기B. 카카오·구글·애플 로그인 붙이기B는 쓰는..

비개발자 BD의 빌더(Builder) 되기 #14 — 초대 링크 하나로 직원을 매장에 연결하기

지난 글에서 로그인을 붙였다. 그런데 시험 계정은 내가 대시보드에서 손으로 만들고, 매장 사람과 손으로 이어 줬다.진짜 매장에서는 그럴 수 없다. 사장님이 링크 하나를 카톡으로 보내면, 직원이 눌러서 가입만 하면 끝나야 한다. 이번 글에서는 그 초대 링크를 만들었다.오늘의 목표사장님 웹에서 사람마다 초대 링크 만들기직원이 그 링크를 누르면 앱의 초대 화면이 열리게 하기가입하면 그 매장에 자동으로 연결되게 하기한 번 쓴 링크는 다시 못 쓰게 하기1. 무엇부터? — 초대 링크 vs 공지이번에도 Claude가 보기를 그림으로 보여 줬다.A. 초대 링크로 직원 계정 연결하기B. 아직 가짜 데이터로 남아 있는 공지를 데이터 창고로 옮기기Claude는 A를 추천했다. 지금은 사장님이 사람을 등록해도 그 직원이 앱에..

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

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

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

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

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

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

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