개발자는 아니지만, 인디 메이커가 되고 싶어
내가 쓰고 싶어서 만드는, 퇴근일기
나는 1인 인디 개발자의 성공 스토리를 좋아한다.
나에게 필요한 앱을 만들었는데, 비슷한 타겟군들의 니즈와 맞아 프로덕트가 점점 커지는 스토리.
1인 디자이너는, 1인 기획자는, 인디 메이커가 될 수 없을까?
학생 때부터 프로젝트를 하면서 느꼈던 갈증이 있었다.
"여기서 더 나아갈 순 없을까?"
개발자외 협업을 하기 전, 학생시절엔 디자이너이자 기획자로서 프로덕트 기획은 항상 유저가 사용하기 직전까지였다. 나는 직접 유저가 제품을 사용하고 메이커와 상호작용하길 바라왔다. 하지만 나를 가로막는 것은 항상 개발 단계였다.
그래서 혼자 웹 개발을 독학해 보기도, 애플 디벨로퍼 아카데미를 수료하기도 했다. 그래도 개발을 전문적으로 한다기보단, 프론트앤드 개발에서 수정을 할 줄 아는 정도에 그쳤다.
그리고, 생성형 AI가 등장했다. 무서울 정도로 빠르게 성장하는 생성형 AI의 능력은 무궁무진했다. 디자인을 할 때 도움을 받기도 하고, 마케팅 문구를 만들 때 도움을 받으며 그 효용을 몸소 체감할 수 있었다.
이번에는 생성형 AI를 개발자로 고용해 보았다.
이 이야기는 생성형 AI와 함께
인디 메이커로 커가는 성장물이다.
나는 '일잘러'가 되고 싶다. 내 일을 정말 좋아하고 잘하고 싶은 마음이 크다.
일을 잘하기 위해선, 내 하루하루 업무 성과를 돌아보고, 더 잘하기 위해서 어떤 점을 보완해야 하고, 또 어떤 점은 더 발전시킬지를 메타인지하는 것이 중요했다. (*기획에 대한 이야기는 다음 컨텐츠에서 더 자세히 작성해보려고 한다.)
내가 정말 잘 쓸 수 있는 회고 기록용 앱이 필요했다. 그래서 직접 만들어보기로 했다.
먼저, ChatGPT와 개발을 해보았다. (사용한 GPT 모델: GPT-4)
간단한 기능 구현의 가능성을 보기 위해 기능 시나리오는 3개로 써보았다.
(*아래와 같이 AI에게 지시사항을 입력하는 부분을 '프롬프트'라고 한다.)
당신은 최고의 iOS 개발자입니다. 매일의 회고를 기록하는 간단한 앱을 만들려고 합니다. 아래 시나리오를 참고해서 SwiftUI로 개발해 주세요.
[시나리오]
오늘이 표시되어 있는 달력이 메인 화면입니다.
각 날짜를 클릭하면 회고 기록을 할 수 있는 페이지로 넘어갑니다.
기록을 한 후 저장하면 달력에 완료 표시가 뜹니다.
바로 Xcode를 열고 GPT가 정리해 준 파일을 그대로 복사해 실행해 보았다. (*Xcode는 iOS 앱 개발 환경이다.) 설레는 마음을 안고 기다렸는데... 역시나 여기저기 에러가 뜬다.
에러를 잡는 것 역시, GPT에게 도움을 요청했다. 그렇게 여러 번 에러 메시지를 전달하고 수정하는 것을 반복했다.
Tip) 에러 메시지를 일일이 복붙 해서 알려주지 않아도, 아래 화면처럼 에러 메시지가 뜬 이미지를 첨부해도 잘 인식해 대답해 준다.
드디어 Xcode에 "Build Success"가 떴다! 그렇게 확인해 본 결과물은 ...
내가 원한 달력뷰가 아닌 리스트뷰가 나왔다. 이게 뭐죠, GPT씨..? (이게 수십 번의 오류를 고치고 만든 결과물이 맞나요..!) 그래서, 다른 AI를 고용해 보기로 했다.
코드는 Claude라는 AI 모델이 더 잘 써준다는 친구의 추천으로 Claude에게 달려가 코드를 작성해 달라고 해보았다. 기능 명세는 GPT와 대화하면서 알게 된, AI가 쉽게 빠트릴 수 있는 지시사항을 추가해 작성했다.
(사용한 Claude 모델: 3.5 Sonnet)
당신은 최고의 iOS 개발자입니다. 매일의 회고를 기록하는 간단한 앱을 만들려고 합니다. 아래 시나리오를 참고해서 SwiftUI와 Coredata로 개발해 주세요.
[시나리오]
- 월요일부터 시작되는 주간 달력 달력이 메인 화면입니다.
- 오늘 날짜가 있는 주를 보여주고, 양옆 화살표 버튼으로 이전 주와 다음 주를 넘길 수 있습니다.
- 날짜를 클릭하고 맨 밑에 회고 추가하기 버튼을 클릭하면 해당 날짜에 회고 기록을 할 수 있는 페이지로 넘어갑니다.
- 기록을 한 후 저장하면 각 날짜 아래에서 작성한 회고 기록을 간략히 볼 수 있습니다.
Claude 역시, 에러를 주고받으며 수정하는 작업을 반복했다. 초심자 입장에서 코드를 수정할 때 도움이 되었던 프롬프트는 "수정된 코드 전문을 써줘"이다. 이렇게 프롬프트를 작성하면 어느 부분을 이렇게 바꾸면 된다는 말과 함께 붙여 넣기 할 수 있도록 코드 전문을 써준다. 코드 이해도가 낮은 사람인 나는 지시만으로 코드를 수정할 수 있어서 편리했다.
그렇게 최소 기능만으로 만든 앱은 아래와 같다. Chat GPT가 써준 코드보다 훨씬 마음에 들었다.
Chat GPT는 수정을 요청하면 코드 구조 자체를 바꿔버리는 등 이전의 코드를 기반으로 수정하지 않아 점차적인 코드 개선이 어려웠다. 그에 반해 Claude는 이전 코드를 기반으로 최소한의 수정사항으로 오류를 개선해 주는 큰 장점이 있었다.
이 이후로는 간단한 UI 수정, 사용성 개선을 위한 UX 수정 등을 진행했다. 사용했던 프롬프트 예시는 아래와 같다.
좋아요. 이제, 기록한 내용은 주간 달력에서 간단히 보여집니다. 하지만 이 내용을 클릭하면 기록물 페이지로 이동했으면 좋겠습니다. 기록물 페이지에선 내용을 수정하거나 삭제할 수 있습니다.
[수정 방안] 주간 달력 밑에 회고내용을 쓰도록 되어 있는데, 이를 같은 VStack안에 넣지 않고 따로 분리하고 싶습니다. 선택한 날짜에 작성한 회고 내용이 있다면 주간 달력 밑 공간에 넓게 보이도록 해주세요. 그리고 같은 영역에서 작성한 회고 내용이 없을 경우에 회고 추가하기 버튼이 노출되도록 해주세요.
코드를 이렇게 수정했습니다.(텍스트 파일 첨부함) 그런데, 앱을 껐다가 켜면 데이터가 사라져 있습니다. 고쳐야 할 부분을 반영해서 수정한 파일은 코드 전문을 써주세요.
그렇게 몇 시간을 Claude와 대화를 한 후, 간단한 회고 앱을 완성하고 출시까지 할 수 있었다!
*피드백은 언제나 환영입니다 :)
'퇴근일기' 앱의 기획, 디자인, 개발은 채 하루도 걸리지 않았다. 그리고 사실상 이 모든 단계가 동시에 이루어졌다. 개발을 하며 UX적으로 불편한 부분을 발견해 바로 기능을 수정하거나, 시뮬레이터에서 디자인이 마음에 들지 않으면 바로 코드를 수정해 볼 수 있었다.
이 프로젝트를 통해 코드를 잘 몰라도 AI와 함께 개발할 수 있다는 가능성을 보았고, 프롬프트에 상상하는 기능을 자세히 설명해 주는 방법, 함께 코드를 수정해 나가는 방법 등을 알아나갈 수 있었다.
다음 콘텐츠에선, '퇴근일기'를 왜, 그리고 어떻게 기획했는지, 어떻게 발전시켜 나갈지에 대해 자세히 써보려고 한다. 커밍쑨-!
