배경 및 목적
매월 지피터스에서는 오프라인 모임이 있는데, 처음 오시는 분들은 뻘쭘해하는 경우가 많음
관심사 기반으로 3명씩 그룹을 지어서 대화를 하게끔 해보고 싶었음
덧) 비개발자도 입코딩으로 서비스를 구현해보고 싶었음
참고 자료
활용 툴
o1으로 초기 아이데이션을 한 후
대략적인 이미지를 클로드 아티팩트로 그려낸 다음 - o1으로 코드를 합침
cursor ai로 코드를 수정하고
실시간으로 수정되는 것을 보기 위해 replit에서 코드를 복붙함
실행 과정
아이데이션
AI Foundations에서 - o1 추론 과정을 최대한 활용할 수 있는 프롬프트를 받아서 입력했습니다.
나의 문제에 대해 3가지 해결책을 제시하고- 각각의 성공 확률을 평가해서 1개를 살리고,
다시 2개의 해결책을 제시하고 - 성공 확률을 평가해서 살리는 루프를 3번 돌려서 총 9개의 해결책 중 하나를 선택하게 되었습니다.
프롬프트 전문
1.) 내 문제:
귀하는 전문가 [역할 정의]입니다. 여러분이 해결해 주셨으면 하는 문제가 있습니다. 여기에 [문제 삽입]하세요. 이 주기가 끝날 때까지 한 명의 승자가 남아야 합니다.
2.) 브레인스토밍 솔루션:
이제 제가 다루고 있는 문제를 이해하셨으니, 이 문제를 해결하기 위한 세 가지 해결책을 브레인스토밍해 주세요. 이러한 해결책을 제시할 때, 각 해결책을 선택한 이유를 생각해 보고 그 해결책을 선택하는 데 들어간 3가지 구성 요소 또는 요소를 나열하세요.
3.) 확률 평가:
이제 나열된 각 솔루션에 대해 성공 확률을 평가해 주세요. 성공 확률을 평가할 때 다음 요소를 염두에 두시기 바랍니다: 각 솔루션의 장단점, 수행 난이도, 도전 과제, 예상되는 결과, 문제의 범위, 문제의 대상 또는 대상, 솔루션의 영향력. 각 솔루션에 성공 확률을 부여합니다. 이 성공 확률은 1%-100%의 백분율로 측정할 수 있습니다. 어떻게 백분율로 결론을 내렸는지에 대한 추론을 제시하세요.
4.) 패자는 배제하고 승자는 격리하기:
이제 문제에 대한 해결책을 백분율로 평가하여 가장 낮은 백분율을 가진 두 가지 해결책을 제거하고 싶습니다. 가장 높은 비율을 가진 솔루션만 남겨두고 성공 확률을 다시 한 번 요약하여 작성합니다. 그런 다음 브레인스토밍 루프를 시작하고 이 루프를 세 번 실행해야 합니다:
5.) 경쟁 솔루션 브레인스토밍하기:
문제를 다시 한 번 반복하겠습니다: [문제 다시 삽입] 이제 여러분이 찾은 우승 솔루션을 살펴보세요. 제 문제를 해결하는 데 있어 첫 번째 우승 솔루션보다 잠재적으로 더 나은 결과를 가져올 수 있는 두 가지 아이디어를 더 브레인스토밍해 주세요. 이 두 가지 새로운 해결책을 제시할 때, 그 해결책을 효과적으로 만드는 데 필요한 세 가지 요소를 제시하세요. 또한, 이 목록에 현재 우승한 솔루션을 추가하여 총 3개의 솔루션이 되도록 합니다. 지금은 솔루션과 그 솔루션을 성공적으로 만드는 데 필요한 3가지 구성 요소만 나열하고, 이 두 가지 새로운 아이디어에 대한 확률 평가는 걱정하지 마세요.
6.) 확률 평가:
이제 나열된 각 솔루션에 대해 성공 확률을 평가해야 합니다. 성공 확률을 평가할 때 다음 요소를 염두에 두시기 바랍니다: 각 솔루션의 장단점, 수행 난이도, 도전 과제, 예상되는 결과, 문제의 범위, 문제의 대상 또는 대상, 솔루션의 영향력. 각 솔루션에 성공 확률을 부여합니다. 이 성공 확률은 1%-100%의 백분율로 측정할 수 있습니다. 어떻게 백분율로 결론을 내렸는지에 대한 추론을 제시하세요.
7.) 패자는 배제하고 승자는 격리하기:
이제 문제에 대한 해결책을 백분율로 평가하여 가장 낮은 백분율을 가진 두 가지 해결책을 제거하고 싶습니다. 가장 높은 비율을 가진 솔루션만 남겨서 요약을 작성하고 성공 확률을 다시 한 번 나열합니다.
이 반복 과정(5~7단계)을 3번 반복하여 최종 답안에 도달합니다.
마지막으로, 이 루프를 모두 반복한 후 가장 좋은 해답과 이 해답을 제시한 이유를 적으세요.기능 명세서 작성
최종으로 선정된 'AI 기반 관심사 매칭 및 게임화 소셜 플랫폼' 아이디어를 토대로 기능 명세서를 써달라고 했습니다.
절대로 혼자서는 구현할 수 없는 어마어마한 스펙의 서비스를 작성해주었습니다. (투머치....)
필요없거나 복잡한 기능은 다 빼달라고 했습니다. (2시간 만에 구현을 해야했기 때문)
여전히 불필요해보이는 기능들이 있어서 추가로 제외해달라고 하고 최소로 간단한 버전의 개발 가이드를 얻어냈습니다.
기능
유저가 관심 주제 2개 및 관심 툴 3개를 선택하면 이를 기반으로 매칭해주는 것. 이걸 클로드와 함께 프리뷰 형태로 구현했습니다.
그리고 이를 바탕으로 (우선) 20명의 더미 데이터를 만들어달라고 했습 니다.
그리고 이걸 슬롯머신 형태로 돌리는 UI를 만들어달라고 했습니다. (너무 현란해서 눈이 아프네요)
두 개의 코드를 o1에게 주고 연관성을 추론해서 합치라고 하기
이 부분이 가장 놀라웠는데요, 어찌보면 아예 연관성 없어보이는 두 개의 데이터를 결합해서 코드를 짜주었습니다.
유저 더미 데이터와 슬롯머신 구현 코드요!
그러자 17초 동안 생각하더니, 2개 데이터의 연관 관계를 토대로 코드를 짜주었습니다.
replit로 프리뷰 구현
프론트와 백엔드를 구현할 시간적 여유와 지적 능력이 없었기 때문에, replit에서 프리뷰 화면을 보며 코드를 수정해나가고 싶었습니다. 단 replit은 유료 구독을 하지 않았기 때문에 즉각적으로 코드 수정을 요청하긴 어려웠어요.
위에서 o1 preview가 짜준 코드로 replit에 프로젝트를 만들었습니다.
시키는대로 차근차근 진행하면서 ctrl C, ctrl V 를 이어나갑니다. 그리고 webview에서 돌아가는지 확인하고요.
위에서도 잠시 언급을 했지만 replit은 유료 구독 중이 아니라서, 코드에 오류가 나거나 수정 요청사항이 있을 때 바로 AI의 도움을 받을 수 없었어요. 하여 이를 github에 올리고, 이를 커서에서 클론코딩한 후 cursor에서 AI 조언으로 코드 수정을 이어나갔습니다.
그리고 노가다로... cursor AI에서 수정한 내용을 replit에 붙여놓고 실제로 잘 동작하는지를 확인했습니다.
클로드가 프리뷰로 구현해주는 것보다 UI는 엉망입니다. (동작은 합니다만...) 사실 상 동작하는 기능은 제대로 없지만, 이렇게 구현할 수 있겠다라는 아이디어의 실현 가능성을 확인했어요.
결과 및 인사이트
o1은 브레인스토밍에 진짜 도움이 되겠다! 추론에 추론을 이어서 총 9가지의 해결책을 루프로 돌리며 좋은 아이디어를 찾는 과정이 재밌었습니다.
전혀 무관해보이는 두 코드를 제시했을 때 - 중간의 연관성을 발견하고 코드를 완성해주는 지점이 놀라웠어요. 꽤 뛰어난 개발자더라도 중간 접점을 바로 찾는건 쉽지 않았을 것 같습니다.
조금 더 재밌는 사례를 가지고 오고 싶었는데, 생각의 발산이 잘 되진 않더라고요... 😭 스터디 멤버분들 사례 보고 많이 배우고 싶네요.