레플릿(Replit)으로 단 3시간, 코딩없이 글로만 나만의 서비스를 만들다!

HOC(하이아웃풋클럽)의 Replit 워크샵 참여자로 선발되다

안녕하세요, 하이아웃풋클럽 13/19기 진 입니다.

설날 연휴가 시작되기 직전, 하이아웃풋클럽에서 진행한 ‘4시간 만에 MVP 만들기’ 워크샵에 참여해서 알차고 뿌듯한 주말을 보내고 왔습니다. 실리콘밸리 출신(전 DoorDash 개발자) 대표님 덕분에 레플릿(Replit)으로 코딩을 전혀 모르는 사람도 손쉽게 나만의 서비스를 만들어볼 수 있었습니다.

고민 끝에 마감일 23:59분에 지원서를 제출했던 HOC(하이아웃풋클럽) 워크샵!

사실 워크샵을 진행하기 전까지 저도 반신반의하는 마음이 들어 신청을 계속 망설였습니다. 문과 출신에, 코딩 실무 경험도 없는데 따라가기 어려워서 괜히 다른 참여자들에게 민폐가 되는 게 아닐까 싶었습니다. 그래서 고민 끝에 마감일 23:59분에 지원서를 제출했고, 돌이켜보면 1월에 제가 한 결심 중 가장 의미있었던 것 같습니다.

저는 3시간이라는 짧은 동안, 끊임없는 아이디에이션을 하면서 무려 3번이나 기획을 변경했습니다. 이 모든 게 개발을 대신해주는 Replit Agent 덕분에 가능했습니다.

제가 직접 느낀 생생한 후기를 아래에 공유해보겠습니다.

나만의 웹 서비스 기획 & 구체화 단계

저는 그동안 인스타그램에서 주로 장문의 글이 있는 콘텐츠를 발행해왔습니다. 긴 글은 쓰고 퇴고하는데 굉장히 오랜 시간이 걸립니다. 쓸수록 시간이 줄어드는 것이 아니라, 그때그때 몰입해서 쓰고 퇴고하는 과정을 5번 이상 거치기도 합니다.

저는 AI 툴(ChatGPT, Claude)을 주로 글을 다 쓴 뒤 퇴고하거나 감상을 물어볼 때 부분적으로 활용합니다. 처음부터 초안만 주고 글을 써달라고 하면 아직 티가 많이 나고 한계점이 명확합니다. 그래서 원래 글에서 더 발전시키는 방향으로만 사용하고 있습니다.

최근에 하이아웃풋클럽 내에서 ‘나만의 AI 비서 만들기’ 실험실에 참여하여 GPTs로 퇴고봇을 만든 적이 있습니다. 글쓰기에서 ‘퇴고’란 단순히 기술적인 오류 수정만 의미하지 않습니다.

퇴고하는 주체의 명확한 정체성을 바탕으로 이루어져야 타인이 쉽게 흉내낼 수 없는 글이 됩니다.

그 당시, 제 글을 브랜드라 생각하고 AI에 넣어 마음에 드는 비전, 미션, 포지셔닝을 받았고 이를 토대로 봇을 만들었을 때, 예상보다 작동을 잘 했었습니다.

그렇게 첫 번째 아이디어인, 진심을 담은 글로 만들어주는 ‘퇴고봇’이 나왔습니다.

레플릿(Replit) 개발 프로세스

1) 레플릿(Replit) 사용팁: ChatGPT로 프롬프트 작성하기

구현하고 싶은 아이디어가 추상적인 부분이 있어, ChatGPT에 자세히 설명하면서 드릴 다운하여 Replit 창에 입력할 코드를 받았습니다.

위의 캡쳐 외에도, 1) 이 서비스에 필요한 데이터 (API), 2) 사용자가 서비스에서 무언가를 클릭하거나 입력하면 나오는 결과값, 3) 앱 내 레이아웃에 들어갈 키워드 등을 구체적으로 설명했습니다.

ChatGPT는 프로젝트의 기본 설계를 세워줬고, 핵심 기능 정리 - 3시간 내 구현 전략 - 단계별 구현 (레이아웃, API 연동, 배포) - 업그레이드 아이디어 (추후 디벨롭 가능)를 뽑아줬습니다.

중간에 ‘생각 정리봇’으로 방향성을 바꾸기도 했는데, 전체적인 흐름이 유사해서 큰 수정사항은 없었습니다.

이후 세부 질문들을 통해서 프롬프트 작성 전에 궁금한 부분들을 명확하게 하는 과정을 거치기도 했습니다. 답변이 굉장히 상세해서 놀랐고, 단계별로 액션 플랜을 알려줘서 이후 레플릿(Replit)으로 이동하여 개발하는 단계에서도 도움이 크게 되었습니다.

Chat GPT를 통해 나온 Replit 프롬프트 업그레이드 버전

Build a web application called "생각 정리봇✍️ by @jiiinlog" where users can input their free-flowing thoughts and refine them into polished text. The application should include the following features:

Key Features:

A text input box where users can freely write their thoughts.
A "생각 정리" button that uses AI to generate two draft options based on the user's input.
A feature where users select one draft, and AI refines it further by:
- Correcting spelling, punctuation, and grammar.
- Enhancing the text based on the user's unique style.
A "내 생각 복사하기" button that allows users to copy the final text to their clipboard.

Style and Identity:

At the top of the application, include the following text to convey the app's mission and identity:

Title: "생각 정리봇✍️ by @jiiinlog"
Subtitle: "💭모든 생각이 소중한 자산으로 남을 수 있는 세상을 위해💭"
Description: "경험과 성장 기록을 통해 진심으로 소통하고, 나와 같은 가치를 공유하는 이들과 연결되는 글쓰기"

User Interface:

A simple and intuitive layout with a minimalist and clean design.
Background color: Ivory (#FFFFF0) for a soft, calming look.
Font: Use Pretendard for buttons and text descriptions.
Buttons: Rounded with hover effects for interactivity.
Layout Components:
- Header: Includes title, subtitle, and description (center-aligned).
- Input Area: Large text box with placeholder: "Write your thoughts here…".
- Buttons: "생각 정리" (AI generation) and "내 생각 복사하기" (copy to clipboard).
- Result Area: Displays the two AI-generated drafts and the final refined text.

AI Refinement:

When generating drafts and refining text, incorporate the following style:

Identity:
- Emphasize experience and growth as a journey of self-reflection.
- Focus on failure, recovery, challenges, and self-discovery.
Key Themes:
- Keywords: 진심, 시도, 내적 동기, 긍정, 불완전함의 매력.
- Storytelling: Highlight moments of failure and recovery, challenges and choices, with a tone of optimism and authenticity.
Tone and Style:
- Create drafts that are encouraging and empowering.
- Use a warm, conversational tone to connect with readers emotionally.

Technical Requirements:

Frontend: HTML, CSS, JavaScript.
AI Integration:
- Use ChatGPT or Claude API to generate drafts and refine text based on the above style.
- Include the given identity, keywords, and storytelling themes in the AI prompts.
Spell-check API: Integrate a Korean grammar correction API (e.g., Kakao Spell Checker or similar).
Clipboard Functionality: Use JavaScript's navigator.clipboard.writeText() to enable the copy feature.

Example Flow:

User writes their thoughts in the input box.
User clicks "생각 정리" → AI generates two drafts based on the input and specified style.
User selects one draft → AI refines it further with grammar and spelling corrections, while enhancing it with the user's unique style.
User clicks "내 생각 복사하기" → Final refined text is copied to the clipboard.

Additional Notes:

Keep the code modular and easy to update.
Design should be responsive and mobile-friendly.
Provide placeholder content for AI-generated results during the initial prototype phase.

이후 간단한 프롬프트 초안을 요청한 이후, 서비스 이름 & 핵심 기능 & 디자인 방향 & 필요한 기술을 입력하여 구체화하는 단계를 거쳐 위와 같은 프롬프트를 받았습니다.

2) Replit 사용팁: 빠른 아이디어 전환과 반영

사실 짧은 시간 안에 테스트 하려면 이런 번거로운 과정이 비효율적일 수도 있습니다. 하지만, 이 과정에서 제 기획에 대해서 다시 한번 고민하는 과정이 있었기에 다른 아이디어로 빠르게 전환할 수 있었습니다.

이렇게 간단한 단계를 거쳤을 뿐인데, 바로 위와 같이 웹 서비스가 구현되었습니다. 기획에 대해 다시 검토하느라 30분 정도 걸렸기에, 이미 아이디어가 구체적이면 여기까지는 5분 만에도 만들 수 있었을 것 같아서 신기했습니다.

이후 ChatGPT API를 연동해서 기능을 하나씩 작동해봤습니다. 특히, 퇴고 가이드라인에서 1시간 이상의 시간이 소요되었습니다. 퇴고 목표 & 문체와 톤 & & 강조할 키워드로 명령을 반복해서 테스트하면서 수정했습니다.

여기서 또 하나의 큰 변화가 생깁니다.

실제 서비스를 구현해보지 않고 아이디어만 기획할 때는 전혀 상상도 못했던 포인트들이 하나씩 눈에 보이기 시작했습니다.

유저가 이 서비스를 굳이 쓰려고 할까? 기존 인공지능 툴과의 차별점이 뭘까? 두 가지 초안을 생성해야 하는 이유가 뭘까? 등 의문점이 하나씩 들었습니다. 역시 직접 사용해보면서 피드백하는 게 어쩌면 가장 효과적인 기획이라는 깨달음을 얻었습니다.

이후 ‘나에게 부치는 편지’로 완전히 주제를 바꿨습니다. 특히, 유저 여정을 최대한 세밀하게 설계할 수 있도록 넘버링을 해놓았던 게 이후에 카피를 수정하는 데 있어서 도움이 컸습니다. 프롬프트는 최대한 작게 쪼개서 입력하는 게 이후 수정 사항을 바로 반영하기 편한 것 같습니다.

3) 레플릿(Replit) 사용팁: 핵심 기능만 넣어서 바로 테스트해보기

편지로 형식이 달라졌기 때문에, 퇴고 스타일을 다시 작성하여 최대한 자연스러운 결과값이 도출될 수 있도록 만들었습니다. 특히, 유저가 바로 접하는 기능들을 최대한 직관적으로 이용할 수 있게 단순화했습니다.

MVP에 핵심 기능만 넣어서 니즈를 파악하는 것이 서비스를 준비하고 있으신 분들께 큰 힘이 될 거라 생각합니다.

인스타 로고에 하이퍼링크를 넣거나, 페이지 하단에 저작권 표시를 넣는 것은 5초면 가능했습니다.

💡

"나에게 부치는 편지✍️ by @jiiinlog" 서비스

고민과 생각을 적으면 나에게 쓰는 편지를 보내줍니다.
AI가 따뜻한 위로와 응원을 담아 글을 수정해줍니다.
사용자는 수정된 글을 다시 퇴고할 수 있습니다.
맞춤법 검사 후 글을 복사하여 어디든 공유할 수 있습니다.

웹 서비스가 완성되면, 바로 배포를 해서 유저 테스트를 해볼 수 있는 점이 굉장히 매력적이었습니다. 실제로 워크샵에 참여한 멤버분들의 결과를 즉각적으로 보니 더 재밌기도 했습니다.

앞으로 디벨롭 하고 싶은 기능들을 리스트업 하고 있습니다.
- 뒤로 가는 기능
- 퇴고를 더 부탁할 수 있는 기능 (무제한)
  - 어떤 부분을 퇴고해달라고 따로 요청할 수 있는 기능
  - 좀 더 자연스러운 문체로 퇴고 스타일 수정 필요
- 음악 추천
- 소셜 로그인 연동
- 캘린더 기능 (게이미피케이션 아이디어)
- 일주일, 한 달, 일 년 뒤 이메일로 편지를 보내주는 기능

레플릿(Replit)을 통해 직접 구현할 수 있는지 테스트해보는 과정을 거쳐보고 싶습니다. 제가 다른 방면으로 활용할 수 있는 아예 다른 기획도 구상 중입니다.

하이아웃풋클럽 Replit 워크샵 회고를 마치며,

예전에는 코딩을 할 줄 몰라서 제게는 불가능하다고 여겼던 것들을, 글쓰기 하나만으로 이렇게 구현하는 세상이 온 게 놀라웠습니다.

각자의 서비스를 발표하고 난 뒤, 소감을 한 마디씩 했었는데요. 이 소중한 경험을 통해서 저는 '앞으로 소프트 스킬이 더 중요해지는 시대가 온다'는 것을 느꼈습니다.

💡

당장 눈에 보이는 건 하드 스킬일지 몰라도, 많은 일들을 AI가 대체하는 사회에서는 '질문하는 능력'과 '생각하는 능력'이 더 대두되지 않을까요?

사색과 글쓰기처럼 인생에 있어 철학적인 영역은 등한시되기 쉽습니다.

저도 커리어를 이어오면서, 제너럴리스트로서의 소프트 스킬 디벨롭에만 신경썼던 시절이 있었는데요. 처음에는 당장 실무에 투입될 수 있는 능력을 더 키웠어야 하는 게 아니냐며 자책하기도 했습니다.

하지만 요즘 다양한 기회를 통해, 제가 그동안 걸어왔던 길이 어쩌면 틀리지 않다는 걸 증명해내는 것 같아 뿌듯합니다.

멋진 기회를 주신 하이아웃풋클럽과 레플릿(Replit)에 진심으로 감사드립니다.

나만의 서비스 만들기 사전 알림 신청 안내

코딩을 몰라도 괜찮습니다! 개발자가 없어 막막했던 분들을 위해 준비한 이번 워크샵은, 실리콘밸리 개발자 출신(전 DoorDash) 대표님과 함께하는 특별한 기회입니다.
개발 경험이 전혀 없던 참여자 48명이 3시간 만에 직접 서비스를 만들고 배포까지 성공적으로 마친 경험을 바탕으로, 자신의 아이디어를 현실로 만들 수 있도록 도와드립니다.

💡 워크샵 사전 알림 신청 시 워크샵 오픈 소식을 안내드려요!

🔥 [실제 사례] 이런 것들을 만들어 볼 수 있어요!

1) 개발을 전혀 모르던 마케터 와니님은 점심시간 30분 만에 '글쓰기 서비스'를 만들었습니다.
2) 직장인 영끌님은 단 돈 만 원으로 '영어 단어 학습 서비스'를 완성했습니다.
3) 영어강사 따스텔님은 4시간 만에 '맞춤형 교재 추천 서비스'를 완성했습니다.
4) 크리에이터 리나몬드님은 '4시간 만에 '학술 논문 리뷰 시뮬레이터'를 완성했습니다.
5) 웹서비스 기획자 윤샐리님은 직접 '캘린더 예약 서비스'를 완성했습니다.

👇 더 많은 사례들은 여기서 확인하실 수 있습니다!