전기 엔지니어 출신의 분석노트

LogPage 만들기 두 번째 편이에요.지난 편에서 날짜, 시간, 장소 입력 필드까지 만들었어요.이번엔 이 앱에서 가장 고민을 많이 한 부분, 참석 업체 카드 구조를 이야기해볼게요.왜 업체 카드가 필요했냐고요?처음 구상할 때는 단순하게 생각했어요.고객사 하나, 담당자 하나. 이렇게 입력하면 되는 거 아닌가?그런데 실제 영업 현장은 달랐어요.미팅에 여러 업체가 동시에 참석하는 경우가 생각보다 많아요.A업체 담당자 두 명, B업체 담당자 한 명이 함께 앉아서 미팅하는 경우도 있고, 각 업체마다 담당자가 여러 명인 경우도 있어요.이걸 하나의 텍스트 필드에 다 적으면 나중에 데이터로 활용하기가 어려워요.업체별로, 담당자별로 따로 관리해야 People 페이지에서 히스토리를 볼 수 있거든요.그래서 나온 게 업체 카..

드디어 본격적인 화면 작업이에요.페이지 구조도 잡았고, 컬러 시스템도 설정했고, 이제 실제로 화면을 만들 차례예요.그 중에서도 가장 먼저 만든 건 LogPage였어요.LogPage는 이 앱의 심장이에요. 미팅 기록을 입력하는 화면이거든요.아무리 다른 기능이 좋아도 기록 입력이 불편하면 아무도 안 써요. 그래서 가장 공을 많이 들인 페이지예요.먼저 레이아웃 구조를 잡았어요화면을 만들기 전에 종이에 먼저 스케치를 했어요.위에서 아래로 어떤 순서로 입력 필드가 배치될지 생각해봤어요.날짜, 시작 시간과 종료 시간, 장소, 그리고 참석 업체 및 담당자. 이 순서가 가장 자연스러웠어요. 미팅을 회상하는 순서와 같거든요. 언제, 몇 시에, 어디서, 누구를 만났는지.FlutterFlow 레이아웃의 기본 — Column..

컬러 시스템을 잡고 나서 바로 부딪힌 현실적인 문제가 있었어요. "다크 모드는 어떻게 하지?" 요즘 앱들은 라이트 모드와 다크 모드를 둘 다 지원해요.사용자가 스마트폰 설정에서 다크 모드를 켜면 앱도 자동으로 어두운 테마로 바뀌는 거예요.FlutterFlow는 이걸 처음부터 지원해요.Theme Settings에 Light Mode Theme와 Dark Mode Theme가 나란히 있어요.둘 다 설정해두면 사용자 기기 설정에 따라 자동으로 전환돼요.다크 모드는 단순한 색 반전이 아니에요처음에 저도 착각했어요.다크 모드 = 라이트 모드 색상을 반전시키면 되는 거 아닌가?아니에요. 단순히 흰색을 검정으로, 검정을 흰색으로 바꾸면 어색하고 불편한 화면이 돼요.다크 모드를 제대로 설정하려면 색상의 역할이 바뀐다는..

페이지 구조를 잡고 나서 다음으로 한 일은 컬러 시스템을 만드는 거였어요.컬러 시스템이라고 하면 거창하게 들리지만, 쉽게 말하면 이 앱에서 쓸 색깔 팔레트를 정하는 거예요.어떤 색이 메인 컬러고, 어떤 색이 포인트 컬러고, 배경은 무슨 색으로 할지.이게 왜 중요하냐고요?앱을 만들다 보면 버튼 색, 아이콘 색, 배경 색을 수십 번 설정하게 돼요.그때마다 매번 다른 색을 쓰면 앱이 산만해 보여요.처음부터 팔레트를 정해두면 일관된 디자인을 유지할 수 있어요.처음에는 FlutterFlow 기본 보라색이었어요FlutterFlow를 처음 설치하면 기본 테마가 보라색 계열이에요.솔직히 처음엔 나쁘지 않았어요. 꽤 세련된 느낌이었거든요. 그냥 이걸로 갈까 생각도 했어요.그런데 조금 더 고민해봤어요.QuickLog는 비..

드디어 FlutterFlow를 본격적으로 열었어요.앱 아이디어도 있고, 페이지 구조도 설계했고, 이름도 다 정했어요. 이제 진짜로 만들어야 할 차례였어요.처음 FlutterFlow 화면을 봤을 때 솔직한 느낌은 이랬어요."생각보다 복잡한데?" 왼쪽엔 위젯 트리, 가운데엔 캔버스, 오른쪽엔 속성 패널.처음 보면 어디서 뭘 눌러야 할지 막막해요. 그런데 하나씩 해보면 생각보다 금방 익숙해져요.첫 번째 작업 — Blank Page 6개 만들기가장 먼저 한 일은 페이지를 만드는 거였어요.FlutterFlow에서 페이지 만드는 방법은 간단해요.좌측 사이드바 Pages 클릭 → 우측 상단 + 버튼 → Blank Page 선택 → 이름 입력이렇게 해서 총 6개 페이지를 만들었어요.순서페이지 이름1FeedPage2Lo..

앱을 만들면서 생각보다 오래 고민한 부분이 있어요.바로 이름 짓기예요.앱 이름, 페이지 이름, 버튼 텍스트 하나하나가 사용자 경험에 영향을 미친다는 걸 이번에 처음 실감했어요.단순히 예쁜 이름이 아니라, 사용자가 직관적으로 이해할 수 있는 이름이어야 했거든요.앱 이름 — QuickLog앱 이름 후보가 처음엔 세 개였어요.MeetLog, BriefNote, 그리고 Convo.MeetLog는 미팅 기록이라는 의미가 명확하지만 너무 평범했어요.BriefNote는 간결한 메모라는 뉘앙스가 좋았지만 발음하기 어색했어요.Convo는 대화를 뜻하는 영어 슬랭인데 너무 캐주얼한 느낌이었어요.결국 QuickLog로 결정했어요.빠르게(Quick) 기록한다(Log). 앱의 핵심 가치가 이름 안에 다 담겨 있어요. 발음하기도..

FlutterFlow를 처음 열었을 때 가장 먼저 한 일은 페이지 구조를 설계하는 거였어요.머릿속에 있는 아이디어를 실제 화면으로 옮기기 전에, 어떤 페이지가 필요하고 어떻게 연결될지 큰 그림을 먼저 그려야 했거든요.처음에 제가 생각한 페이지 목록은 이랬어요.처음 구상한 페이지 목록페이지용도Feed팀 활동 타임라인Log미팅 기록 입력Summary캘린더 형태 요약Partners고객사 데이터베이스InsightAI 분석My Page개인 설정총 6개 페이지였어요. 그런데 여기서 두 가지 고민이 생겼어요.첫 번째 고민 — Partners라는 이름Partners라는 단어가 너무 B2B 냄새가 난다는 생각이 들었어요.지금은 비즈니스용으로 만들고 있지만, 나중에 일반 사용자들도 쓸 수 있는 앱으로 확장하고 싶었거든요...

앱 아이디어가 구체화되고 나서 바로 부딪힌 문제가 있었어요. "이걸 어떻게 만들지?" 개발자 친구한테 물어봤더니 이런 말을 들었어요. "iOS랑 Android 둘 다 만들려면 React Native나 Flutter 써야 하는데, 배우는 데만 6개월은 걸려. 그리고 백엔드도 따로 만들어야 하고." 현실적으로 코딩을 처음부터 배워서 앱을 만드는 건 불가능했어요.시간도 없고, 솔직히 자신도 없었어요.그래서 노코드 툴을 찾아보기 시작했어요.노코드 툴 비교찾아보니 노코드 앱 개발 툴이 생각보다 많았어요. Bubble, Adalo, Glide, AppGyver, 그리고 FlutterFlow.여러 가지를 비교해봤는데 결국 FlutterFlow를 선택한 이유는 세 가지였어요.첫째, Flutter 기반이에요. Flutt..

아이디어는 있었어요. 그런데 막상 앱을 만들려고 하니 머릿속에 있는 그림을 구체적인 말로 표현하는 게 생각보다 어려웠어요. "미팅 기록 앱이요? 그게 구체적으로 어떤 건데요?" 누군가 물어보면 대답하기가 애매했어요. 그냥 편하게 기록하는 앱이요, 라고 하면 너무 두루뭉술하고.그래서 제가 한 첫 번째 작업은 레퍼런스 앱 찾기였어요.Babytime에서 배운 것Babytime은 아기 육아 기록 앱이에요.수유, 수면, 기저귀 교체 시간을 버튼 하나로 기록할 수 있어요. 복잡한 입력 없이 탭 몇 번이면 끝나요.제가 이 앱에서 배운 핵심은 딱 하나였어요. "기록은 귀찮으면 안 한다. 1분 안에 끝나야 한다." 영업팀 직원들은 출장을 나가거나, 의전을 다니다 보면, 회의록이나, 그 때 나온 내용의 대화 등을 길게 보..

사실 저는 개발자가 아닙니다.코딩이 뭔지도 모르고, 깃허브가 뭔지도 모르고, 터미널 창을 열어본 적도 없어요.그냥 평범한 직장인이에요.그런데 어느 날, 업무를 하다가 문득 이런 생각이 들었어요. "왜 우리 팀은 미팅하고 돌아오면 매번 회의록 쓰는 게 이렇게 힘들지?" 회사에서 일하다 보면 하루에도 여러 고객사를 만나요.누굴 만났고, 어떤 얘기를 했고, 밥은 어디서 먹었고, 이전에 선물은 뭘 드렸는지.이걸 매번 엑셀에 정리하거나 메모장에 적어두는데, 솔직히 귀찮아서 빠뜨리는 경우가 많았어요. 그러다 어느 날 Babytime이라는 앱을 알게되었어요.아기 수유 시간, 수면 시간을 버튼 한 번으로 기록하는 앱이었는데, 너무 간단하고 직관적인 거예요. "이거다. 이런 방식으로 미팅을 기록하면 되겠다." 그때부터 ..