20편. 다음 목표, NOPLAN 진짜 서비스로

이미지
다음 목표, NOPLAN 진짜 서비스로 여기까지가 코딩 모르던 디자이너가 AI로 앱을 만든 이야기예요. NOPLAN은 이제 시작일 뿐입니다. 앞으로 어디로 갈지, 그 계획을 이야기하면서 이 시리즈를 마무리하려고 해요. 골프는 시작일 뿐이었다 NOPLAN은 골프 여행으로 시작했어요. 제가 제일 좋아하는 거니까요. 근데 처음부터 골프만을 위한 앱은 아니었어요. 여행에는 골프도 있고, 관광도 있고, 맛집 탐방도 있잖아요. 골프는 그중 첫 번째 시작점이었을 뿐이에요. 동선이 제일 까다로운 골프에서 통하면, 다른 여행은 더 쉬울 거라고 봤거든요. 앞으로는 골프 너머로 넓혀갈 계획이에요. 어떤 여행이든 NOPLAN을 켜고 그냥 떠날 수 있게요. 진짜 쓸 수 있는 서비스로 지금 NOPLAN은 데모에 가까워요. 후쿠오카로 고정돼 있고, 추천 정보도 제가 넣은 범위 안에 있어요. 목표는 이걸 진짜 서비스로 키우는 거예요. 여행지를 자유롭게 고르고, 더 다양한 정보가 들어가고, 실제 예약까지 이어지는 것. 갈 길이 멀지만, 여기까지 온 것처럼 하나씩 만들어가려고 해요. 코딩을 못 한다는 건 이제 핑계가 안 돼요. AI랑 같이 하면 되니까요. 이 블로그를 이어가는 이유 이 블로그는 NOPLAN을 만드는 과정을 적는 곳이에요. 앞으로도 계속 적을 거예요. 새 기능을 만들면서 막힌 이야기, AI랑 씨름한 이야기, 사람들 반응을 듣고 고친 이야기. 잘된 것만이 아니라 헤맨 것까지 다 적을게요. 저처럼 "나도 만들어보고 싶은데" 하는 사람한테, "어 나도 할 수 있겠다"는 용기가 되면 좋겠어요. 계획 없이 사는 사람이, 계획 없이 시작한 앱 만들기. 그 여정은 계속됩니다. 여기까지 오는 데 걸린 시간 첫 프롬프트를 쳤던 날부터 지금까지, 돌아보면 짧지 않은 시간이었습니다. 에러도 여러 번 만났고, 하루치 작업을 통째로 날린 날도 있었고, 이름 하나 짓는 데도 한참 걸렸어요. 그래도 결국 여기까지 왔습니다. 앞으로는 후...

11편. 드래그로 일정 순서 바꾸기

드래그로 일정 순서 바꾸기

일정을 짜다 보면 순서를 바꾸고 싶을 때가 있어요. 아침에 가려던 곳을 오후로, 첫째 날 일정을 둘째 날로.

이걸 손가락으로 끌어서(드래그) 옮길 수 있게 만들고 싶었습니다. 근데 이게 생각보다 훨씬 어려웠어요.

일정 카드 드래그

욕심이 부른 도전

사실 이 기능은 없어도 됐어요. 위아래 화살표 버튼으로 순서를 바꾸게 해도 되니까요.

근데 욕심이 났습니다. 요즘 앱들은 다 손가락으로 끌어서 옮기잖아요. 그게 훨씬 직관적이고 편하거든요. 디자이너로서 "이왕이면 제대로" 하고 싶었어요.

그래서 AI한테 도전적으로 시켰습니다. "일정 카드를 마우스로 클끌어서 순서를 바꿀 수 있게 만들어줘."

쉽게 안 됐다

이건 정말 한 번에 안 됐어요.

처음엔 카드가 끌리긴 하는데 엉뚱한 자리에 놓이고, 다음엔 끌다가 화면이 멈추고, 또 다음엔 모바일에서만 안 되고. 에러의 연속이었어요. 제일 고생한 기능 중 하나입니다.

그때마다 증상을 정확히 말해줬어요. "카드를 끌어서 두 번째 자리에 놓으려는데 자꾸 맨 아래로 가", "데스크탑에선 되는데 폰에선 안 끌려." 이렇게요. 그러면 AI가 하나씩 고쳐줬습니다.

포기하고 싶을 때 버틴 이유

솔직히 중간에 "그냥 화살표 버튼으로 할까" 싶었어요. 너무 안 되니까요.

근데 버텼습니다. 이게 되면 앱이 훨씬 좋아질 걸 아니까요. 그리고 한 단계씩 증상을 말하고 고치다 보니, 결국 됐어요. 손가락으로 부드럽게 카드가 옮겨지는 걸 봤을 때 진짜 뿌듯했습니다.

어려운 기능일수록 됐을 때 보람이 커요. 그리고 "안 되면 AI랑 같이 하나씩 고치면 된다"는 자신감도 생겼고요.

완성된 드래그 기능 시연

드래그 기능, 제일 오래 걸린 이유

지금까지 만든 기능 중에 시간이 가장 오래 걸린 게 이 드래그 기능이었습니다. 카드를 옮기는 것 자체는 금방 됐는데, 문제는 순서를 바꾸면 이동 시간과 전체 일정표가 전부 다시 계산돼야 한다는 점이었어요.

AI한테 여러 번 다시 요청했습니다. "카드 순서만 바꾸는 게 아니라, 그 뒤에 오는 모든 항목의 시간도 같이 밀려야 해." 처음엔 순서만 바뀌고 시간은 그대로인 이상한 상태가 됐어요. 몇 차례 수정 끝에 지금처럼 순서를 바꾸면 시간표 전체가 자연스럽게 재정렬되는 방식이 완성됐습니다.

작은 인터랙션 하나가 뒤에서는 이렇게 많은 계산을 요구한다는 걸 처음 알았습니다.

드래그가 왜 필요했을까

처음엔 순서를 화살표 버튼으로 바꾸게 만들었습니다. 위로, 아래로. 그런데 직접 써보니 너무 불편했어요. 항목이 몇 개만 돼도 버튼을 몇 번씩 눌러야 했거든요.

그래서 드래그 방식으로 바꿨습니다. 카드를 손가락으로 잡고 원하는 자리에 놓으면 끝나는 방식이요. 훨씬 직관적이고 여행 앱답게 느껴졌습니다.

기능을 만들 때 "이게 정말 편한가"를 직접 써보고 판단하는 게 중요하다는 걸 다시 느꼈어요. 머릿속으로 생각한 것과 실제로 써보는 건 완전히 다르더라고요.

드래그 기능을 완성하고 나서 제일 좋았던 반응은 제 스스로의 반응이었습니다. 실제로 일정을 짜면서 카드를 이리저리 옮겨볼 때, "아 이게 진짜 여행 계획 짜는 느낌이구나" 싶더라고요. 기능 하나가 앱의 인상을 이렇게까지 바꿀 줄 몰랐습니다.

드래그 기능은 지금도 제가 이 앱에서 제일 좋아하는 부분입니다. 만들 때는 제일 힘들었지만, 다 쓰고 나서는 제일 자연스럽게 느껴지는 기능이 됐어요. 힘들게 만든 만큼 애정도 가는 것 같습니다.

"그렇게 어려운 것도 코딩 없이 돼?"

1. 어려워도 일단 시도하세요. 안 될 것 같아도 AI랑 하나씩 고치면 됩니다. 처음부터 포기하면 아무것도 안 만들어져요.

2. 증상을 구체적으로 말하세요. "안 돼"가 아니라 "끌어서 두 번째에 놓으려는데 맨 아래로 가"처럼 정확히 말해야 AI가 제대로 고쳐요.

3. 안 되면 더 쉬운 방법도 있습니다. 정 안 되면 화살표 버튼 같은 대안도 있어요. 완벽을 고집하다 지치는 것보다, 되는 선에서 가는 것도 방법입니다.

다음 이야기

어려운 기능까지 넘기고 나니 자신감이 붙었어요. 근데 그 자신감을 꺾는 일이 또 생겼습니다. AI가 한 군데를 고치랬더니 멀쩡하던 다른 데를 건드리는 거예요. 다음 글에서 이야기하겠습니다.

이 블로그의 인기 게시물

18편. 사람들에게 보여준 첫 반응

이미지
사람들에게 보여준 첫 반응 앱을 다 만들고 나니 떨렸어요. 이걸 사람들이 어떻게 볼까. 혼자 만들 땐 몰랐는데, 막상 보여주려니 두려웠습니다. "별로면 어쩌지?" 하는 마음이요. 공개가 제일 무서웠다 사실 만드는 것보다 보여주는 게 더 무서웠어요. 내 컴퓨터 안에 있을 땐 누가 뭐라 할 사람이 없잖아요. 근데 세상에 내놓는 순간 평가를 받게 되니까요. "이게 뭐야", "별로다" 같은 말을 들을까 봐 겁났어요. 근데 안 보여주면 아무 의미가 없잖아요. 쓰라고 만든 앱인데. 그래서 용기를 내서 SNS에 올렸어요. 만든 과정이랑 앱 화면을 같이요. 솔직하게 보여줬다 저는 "완벽한 앱"인 척 안 했어요. 오히려 솔직하게 갔습니다. "극P라서 여행 계획 짜기 싫어서 그냥 만들어버렸어요"라고요. 코딩도 모르는데 AI랑 만들었다는 것도 그대로 밝혔어요. 잘난 척이 아니라, 나 같은 사람도 만들었다는 이야기로요. 신기하게도 이 솔직함에 사람들이 반응했어요. "오 나도 극P인데", "이런 거 필요했어", "코딩 모르는데 어떻게 만들었어요?" 같은 댓글이 달렸어요. 완벽해서가 아니라 공감돼서 반응한 거예요. 반응에서 배운 것 사람들 반응을 보면서 많이 배웠어요. 내가 당연하다고 생각한 기능을 신기해하기도 하고, 내가 신경 못 쓴 부분을 불편해하기도 했어요. 혼자 만들 때는 안 보이던 것들이 남의 눈을 통해 보였습니다. 그리고 깨달았어요. 앱은 공개하고 나서가 진짜 시작이구나. 만드는 건 절반이고, 사람들 반응을 듣고 고쳐가는 게 나머지 절반이라는 걸요. 무서워도 보여주길 잘했습니다. 올리기 직전까지 망설였던 이유 스레드에 올리기 버튼을 누르기까지 한참 망설였습니다. "코딩도 모르면서 뭘 만들었다고 자랑하냐"는 말을 들을까 봐서요. 제가 만든 게 완벽하지 않다는 것도 스스로 잘 알고 있었고...
자세한 내용 보기

17편. 모바일에서도 되게 만들기

이미지
모바일에서도 되게 만들기 앱을 인터넷에 올리고 나서 폰으로 열어봤어요. 그런데 화면이 영 어색했습니다. 컴퓨터에서는 멀쩡했는데, 폰에서는 글자가 삐져나오고 버튼이 너무 작고. 사람들은 대부분 폰으로 볼 텐데 이러면 안 되잖아요. 사람들은 폰으로 본다 생각해보면 당연한 거였어요. 요즘은 여행 정보를 컴퓨터 앞에 앉아서 보는 것보다 대부분 침대에 누워서, 출퇴근길에, 폰으로 보겠죠. 근데 저는 만들 때 컴퓨터 화면만 보고 만들었어요. 그러니 컴퓨터에선 완벽한데 폰에선 엉망이었던 거죠. 큰 화면에 맞춘 걸 작은 화면에 욱여넣으니 깨질 수밖에요. 이걸 두 화면 다 잘 보이게 만드는 걸 "반응형"이라고 하더라고요. 화면 크기에 따라 알아서 모양이 바뀌는 거요. 폰 기준으로 다시 봤다 그래서 작업 방식을 바꿨어요. 폰 화면을 기준으로 확인하기 시작했습니다. AI한테 "폰에서 글자가 화면 밖으로 나가", "버튼이 너무 작아서 누르기 힘들어"처럼 폰에서의 문제를 구체적으로 말했어요. 그러면 폰 화면에 맞게 고쳐줬습니다. 이때도 직접 확인이 중요했어요. 고쳤다고 하면 진짜 폰으로 열어봤어요. 글자가 잘 들어가는지, 버튼이 누를 만한지, 스크롤이 자연스러운지. 사용자가 진짜 쓸 환경에서 봐야 진짜 문제가 보이거든요. 디자이너라서 예민했던 부분 여기서도 보는 눈이 도움이 됐어요. 폰에서 살짝 어색한 것들이 눈에 띄었거든요. 글자가 너무 빽빽하다, 버튼 사이가 좁아서 잘못 누르겠다, 위아래 여백이 답답하다. 기능은 되는데 "쓰기 불편한" 부분들이요. 이런 걸 하나하나 다듬었어요. 작은 화면일수록 이런 디테일이 더 중요해요. 공간이 좁으니까 조금만 빽빽해도 답답하게 느껴지거든요. 덜어내고, 띄우고, 키우고. 폰에서 편하게 보이도록 계속 손봤습니다. 컴퓨터에선 예뻤는데 폰에선 다 깨졌다 컴퓨터 화면에서 확인할 땐 완벽해 보였습니다. 그런데 폰으로 열어보니 버튼은 화면 밖으로 삐져나가...
자세한 내용 보기

19편. AI로 앱 만들며 알게 된 것 5가지

이미지
AI로 앱 만들며 알게 된 것 5가지 코딩 한 줄 못 하던 제가 AI로 앱을 만들었어요. 완벽하진 않지만, 진짜 작동하는 앱을요. 그 과정에서 배운 것들을 정리해봤습니다. 저처럼 시작하려는 분들한테 도움이 됐으면 해요. 1. AI는 직원이 아니라 동료다 처음엔 AI한테 "이거 해, 저거 해" 일방적으로 시켰어요. 근데 그렇게 하면 결과가 별로예요. AI는 시키는 대로 하는 도구가 아니라, 같이 만들어가는 동료에 가까웠어요. 제 의도를 전하고, AI가 방법을 제안하고, 같이 다듬는 거죠. 일방적인 지시보다 주고받는 소통이 훨씬 좋은 결과를 만들었어요. 2. 못 만드는 게 아니라 설명을 못 하는 거다 "이건 어려워서 못 만들겠지"라고 지레 포기한 게 많았어요. 근데 막상 AI한테 물어보면 되는 경우가 대부분이었어요. 문제는 "만들 수 있냐"가 아니라 "내가 원하는 걸 정확히 설명할 수 있냐"였어요. 머릿속 그림이 또렷할수록 결과가 좋았고, 막연하면 막연한 게 나왔어요. 결국 실력은 코딩이 아니라 설명하는 능력이었어요. 3. 천천히 가는 게 빠르다 급하게 한꺼번에 시키면 꼭 사고가 났어요. 그리고 그 사고 수습에 며칠이 날아갔죠. 한 번에 하나씩, 확인하면서 가는 게 답답해 보여도 제일 빨랐어요. 특히 코드를 못 고치는 비개발자한테는 "안 망가뜨리는 것"이 최고의 전략이에요. 4. 보는 눈이 코딩 실력보다 중요하다 저는 코드를 못 읽어요. 대신 "이게 좋은지 나쁜지, 편한지 불편한지"는 봐요. AI가 만든 걸 보고 어디가 어색한지 잡아내는 것. 이게 코딩 실력보다 중요했어요. 그리고 이 눈은 디자이너가 아니어도, 평소 불편함을 느낄 줄 아는 사람이면 누구나 있어요. 5. 공개해야 진짜 완성이다 내 컴퓨터 안에 있는 건 반쪽짜리예요. 사람들한테 보여주고, 반응을 듣고, 고쳐가야 진짜 완성됩니다. 무서워도 내놓으세요. 만드는 건 절...
자세한 내용 보기