brunch

임팩트를 향한 출발선 앞에서.

Ep.3 Tech for Social Impact

by MSMMX

학교 프로젝트에서 만난 팀원들과 소셜임팩트를 위해 시작한 프로젝트를 진행한지 벌써 2개월이 넘어가고 있다.


++ 참고로 현재 그 과정을 모두 글로 기록하고있으니 해당 수업에 관심이 있거나, 대학생들이 임팩트를 만들어나가는 과정이 궁금한 분들은 아래 글도 함께 읽어주시면 감사하겠습니다:)


지난 아티클에서는 기획의 첫 단계, [아이디어 제시 - 검증 - 솔루션 도출] 의 과정을 거쳐 지금은 머릿속에만 있던 아이디어를 실제 제품으로 구현하는 단계에 접어들어 서비스 구현을 진행하는 중에 있다.


서비스 구현을 위해 세운 계획은 다음과 같다:

1. 기술 스택 선정
2. 핵심 기능 픽스 및 동작 로직 설계
3. 개발 역할 분담
4. 구현


1. 기술 스택 선정하기


우리 팀에 대한 간략한 백그라운드를 설명하자면,

기획/디자인 3명

프론트/백엔드 2명

AI 모델 개발 1명

⇒ 총 6명으로 구성되어있다.


본인은 이번 프로젝트에서 개발팀에 합류하였지만 약간의 우려사항은 나를 포함한 다른 개발팀원 둘 다 개발경험이 많지않았기에 실력적인 한계로 인해 프로젝트 진행에 차질이 생길 수 있다는 점이였다.


따라서, 우리는 쉽고 빠르게 MVP를 구현할 수 있는 방법에 대해 고민했고 AI툴을 이용해 개발을 진행하기로 결정했다.


선정한 AI 툴 + 이유
1.png


우리 팀은 replit이라는 AI툴을 선정했다.


리플릿은 워낙 많이 언급되고있는 AI툴이기도하고 주위에서 리플릿으로 개발해 단기간에 실유저를 모은 케이스를 간접적으로 보기도 해서 이번 기회에 사용해보고자 주저없이 선정하게 되었다.


++ 참고로 replit은 클라우드를 기반으로 동작하는 통합 개발 환경 서비스로 풀스택 개발에 용이한 AI 툴이다.


2. 핵심 기능 픽스 및 동작 로직 설계

2.png


구현 작업 진행 전, 우리 팀은 다 같이 모여 핵심 기능을 픽스했고

아래 몇 가지 사항들에 대한 논의를 진행했다:


1) 어떤 데이터를 사용할 것인지

2) 데이터를 어떻게 가공하고 import 할 것인지

3) 어떤api가 필요한지

4) 서버 & 프론트 통신 방식과 시점


AI툴임에도 불구하고 동작 로직 설계가 필요한 이유:

프롬프트만 입력하면 그만이라고 생각하면 오산.
서비스의 기초 토대를 이해하고, 틀을 잡고 가야 프롬프트 명령도 훨씬 수월해지기 때문이다.

만약, 동작 로직에 대한 이해 없이 무작정 프롬프트만으로 서비스를 구현하기 시작하면,
추후 새로운 기능 추가 시 AI 속도가 느려질 수 있다는 단점이 있다.


예시를 들어보면:


1. 동작 로직 없이 프롬프트만 사용하는 경우


3.png


이런식으로 뾰족하지 않은 명령을 하게 된다면 앱 전반의 흐름이나 데이터 구조, 지도 API 호출 방식,

글 작성 시 위치 데이터 연동 방식 등은 빠지거나, 엉성하게 나올 가능성이 크다.


이 상황에서 나중에 “근처 글만 보여주기” 와 같은 기능을 추가하려 하면:

1. 어떤 데이터에 위치 정보가 붙어 있는지 파악 안 됨

2. 글과 위치가 연동되지 않음

3. 기존 구조를 다시 설계해야 함

⇒ 결국 전체 흐름을 다시 짜야 하고, AI 응답 속도도 느려진다는 단점이 있지만


2. 만약 미리 동작 로직을 설계를 하는 경우


4.png

예:

사용자가 글을 쓸 때 위치정보도 같이 저장

글은 Posts 테이블에 저장, 위치는 Location 테이블로 분리

지도는 Kakao API를 통해 현재 위치를 가져오고, 주변 글을 좌표 기반으로 필터링

클라이언트는 지도에서 마커 클릭 시 글 내용을 불러옴

→ 이런식으로 간단하게 데이터 흐름 / 기능 간 연결 방식 / API 사용 방식을 미리 설계한 뒤 작성하는 프롬프트는 위 이미지와 같이 도출될 수 있다.


따라서 무작정 AI에게만 의존에서 프롬프트만으로 구현을 하는 것에 초점을 두기보다, AI를 수단으로 사용하되 초기 기획 및 로직 설계는 필수로 진행해야 하는 것에 대한 필요성을 느낄 수 있었다.




3. 개발 역할 분담


위와 같이 핵심 기능 및 동작 로직을 설계한 후, 개발팀은 각자 작업을 맡을 부분에 대해 논의를 진행하였다.

5.png


어떻게 보면 2명이 풀스택으로 AI를 이용해 서비스를 개발을 해야하기때문에 최대한 역할을 잘 분배하려고 하였고, 한 명은 지도에 초점을 두고, 나머지 한 명은 크라우드 소싱 + 그 외 자잘한 기능에 포커싱하여 개발을 진행하기로했다.


이 때, Q. 개발은 협업이 핵심인데, AI툴로 개발하는 경우 어떻게 협업하나요? << 와 같은 의문이 들 수 있을 것 같다. 직접 경험해본 입장에서의 답변은:


AI툴로 협업을 할 때의 장단점

장점

1. 유연한 개발이 가능

ㄴ 일반 프로덕트팀의 경우, 개발자들은 깃허브를 이용해 보통 협업을 진행하지만 리플릿은 깃허브를 이용할 필요 없이 프롬프트 로그를 확인하는 방식으로 진행 (++ 리플릿 자체 git 확인 가능)


2. 코드리뷰가 필요없음.

ㄴ AI툴을 이용해 개발을 하는건 코드를 짜는 일이 아니기 때문에 각자 코드를 짜는 수고와 리뷰를 통한 피드백이 필요없다는 점에서 작업 시간을 줄여줄 수 있다는 점이 최대 장점이라고 생각한다. (하지만 동시에 협업의 강도가 낮다는 점에서 단점으로도 볼 수 있음)


단점

1. 프롬프트에만 의존해야함

ㄴ 리플릿에서 프롬프트를 작성하는 즉시 구현을 진행하며 코드도 실시간으로 짜여지는 것을 볼 수 있다. 하지만 리플릿 안에서 실시간으로 코드 수정을 하지 못하는 점이 최대단점. (만약 코드 수정을 하려면 전체 코드 다운 후 로컬로 코드를 모두 옮겨야함)



4. 구현

구현을 위한 앞단의 모든 기획 및 설계들을 마무리한 후, 본격적으로 구현작업에 들어갔다.

현재까지 거의 모든 주요 기능들은 구현이 완료 된 상황이고, 현재는 기능적으로 수정이 필요한 부분들을 수정 및 보완하는 작업 중에 있다.


6.png replit 일부 작업 코드


replit을 이용하면 위 이미지에서 볼 수 있듯이, 본인이 엑세스하길 원하는 폴더의 파일들의 코드를 모두 열람 가능하며, 우측에는 preview를 띄워놓고 실시간으로 수정사항을 반영하며 화면에 잘 반영이 되었는지를 확인할 수 있다.


7.png


프롬프트는 위 이미지와 같이 replit agent에게 요청하면 되고, 명령을 내리면 에이전트가 실시간으로 어떤 코드를 수정했는지에 대한 내역들을 모두 열람할 수 있다. 오히려 문제 해결 프로세스를 경험할 수 있어 코드에 대한 이해가 없어도 어떤 로직으로 기능이 동작하는지, 어떤 컴포넌트들이 만들어져있는지 등에 대한 내용들을 머릿속에 집어넣을 수 있다.


현재는 replit 개발에 익숙해져서, 어떤 방식으로 프롬프트를 짜야하고 명확하게 명령을 내려야하는지에 대한 감을 잡은 상황이라 구현에 가속도가 더 붙고있다는 사실을 체감하며 시간투자를 해가며 개발을 하고있다:)



마무리

8.png

현재까지 머릿속에만 있던 아이디어를 실제 제품으로 만들기 위한 replit으로 다행히 쉽고 빠르게 MVP를 구현할 수 있었고, next step으로는 우리 서비스에서 가장 중요한 접근성 정보 (data)들을 AI 모델을 이용해 1차 가공 이후, json으로 데이터들을 저장해 fetching 하는 작업을 앞두고 있다. (이 다음 글에서 AI 모델 동작 로직에 대해 간단하게 다룰 예정이다!)


테크포임팩트 수업을 통해 정말 기술로 사회문제를 해결해나가는 경험을 한 단계씩 해나가고 있기에 더욱 의미있는 학기를 보내고 있다. 우리의 순수한 열정과 진심이 사회에, 그리고 정말 이 서비스가 필요한 누군가에게 닿길 바라며 글을 마무리한다!


테크포임팩트 캠퍼스 크리에이터 활동의 일환으로 제작된 콘텐츠입니다.

#테크포임팩트 #테크포임팩트캠퍼스 #테크포임팩트캠퍼스크리에이터 #테캠크

keyword
작가의 이전글두 달동안 AI 툴로 MVP 4개 만들며 얻은 인사이트