<div id="readability-page-1" class="page"><div><p><strong>이 글은 <a href="https://www.threads.com/@koeunyeon">제 쓰레드</a>에 쓴 글을 블로그 식으로 다시 작성한 것입니다. 당연히 글자수 제한이 없는 만큼 이 글이 조금 더 자세합니다. 간단하게 읽으시려면 쓰레드에서, 상세한 건 이 페이지에서 보시면 됩니다.</strong></p>
<hr>
<h2 id="하루만에-마이크로-서비스-만들기">하루만에 마이크로 서비스 만들기.</h2>
<p>거창한 건 아닙니다.<br>
누구나 쉽게 만들 수 있는 것들을 하나씩 바이브코딩으로 만들어보기로 했습니다.</p>
<p>규칙은 딱 하나입니다.<br>
<strong>만드는 시간은 하루를 넘기지 않기.</strong></p>
<p>오늘은 <a href="https://maumlog.com/">"마음로그"</a>라는 심리 테스트 사이트를 만들었습니다.<br>
조코딩님의 테토 에겐 테스트 만드는 영상을 보고 이런것도 재밌겠군 싶어서 만들어 봤어요.</p>
<p><img src="https://velog.velcdn.com/images/koeunyeon/post/9253c0b3-75fb-4164-83e4-a91c15b92b5b/image.png"></p>
<h2 id="도메인은-호스팅케이알에서-구매">도메인은 호스팅케이알에서 구매</h2>
<p>퍼플렉시티에게 "어디서 도메인 구매하는 게 제일 쌀까?" 라고 물어보니 "호스팅케이알"을 추천하기에 <del>추천인을 퍼플렉시티로 적고</del> 호스팅케이알에 가서 도메인을 하나 구매했습니다.<br>
부가세 포함 16,000원 정도 냈어요. 그닥 저렴한 것 같지는 않지만 터무니없이 비싼 것도 아니어서 그냥 샀어요. </p>
<p>그리고 DNS를 바로 클라우드플레어로 옮겼습니다. 개인적으로 클라우드플레어 무료 기능은 최고인 것 같아요. DNS도 제공해주고, Proxy도 만들어주고, 자동 HTTPS도 지원해 주거든요. DDOS도 방어해 주고요.</p>
<h2 id="배포는-클라우드플레어에">배포는 클라우드플레어에</h2>
<p>하루만에 도메인을 신청하고 <a href="https://pages.cloudflare.com/">cloudflare pages</a>에다가 올렸습니다.<br>
클라우드플레어 페이지는 처음 써보는데 잘 만든 것 같습니다. 마음에 들어요.<br>
요금제도 착해서, 무료 요금제로도 충분할 것 같아요.<br>
<img src="https://velog.velcdn.com/images/koeunyeon/post/c311972d-c9a3-471e-8eae-ef8820a945fa/image.png"></p>
<h2 id="커서-해프닝">커서 해프닝</h2>
<h2 id="토큰을-다-썼다고">토큰을 다 썼다고?</h2>
<p>만드는 와중에 커서에서 토큰을 다 썼다며 더이상 작동을 안하길래 급하게 Opt Out 해서 예전 요금제로 돌아가는 해프닝도 있었습니다.<br>
분명 제가 20$를 결제할 때는 "무제한 사용" 이었는데, 지금 보니까 어느새 요금제 설명에서 "unlimited"가 사라졌네요.<br>
<img src="https://velog.velcdn.com/images/koeunyeon/post/5c9ef967-9cfa-4ba6-809b-e71c1e59073b/image.png"></p>
<p>커서는 너무 요금제를 자주 바꿔요. 기능에 대해서는 신뢰하지만, 가격 정책은 신뢰하기 어렵군요.</p>
<h2 id="커서-opt-out-후-후기">커서 Opt out 후 후기</h2>
<p>이전에는 별 생각 없이 MAX 모드로 해 놓고 썼었거든요. 그래서 Opt Out한 이후로도<br>
MAX 모드로 해 놓고 썼더니 토큰이 말도 안되게 많이 사용된는 걸 보고 깜짝 놀랐습니다. 기능 하나 고쳤는데 Requests가 89개가 순삭되어 버린 거에요.<br>
한달에 500 Requests를 제공하는데 요청 하나에 89개면 여섯번만 하면 한도에 다다르는 거잖아요. 놀라서 급하게 MAX Mode를 껐습니다.</p>
<p>Normal로 맞춰놓고 sonnet 4로 코딩했는데... 좀 불편했습니다.<br>
MAX Mode로 놓고 썼을때는 잘 되던 것이 일반 모드에서는 하나 고치면 다른 버그가 또 생기는 기적이 발생한 거죠.<br>
LLM 이슈인지 컨텍스트 창 크기 문제인지 커서에서 일부러 그러는지는 알 수가 없네요.<br>
짐작컨데 MAX Mode는 최대 100회까지 툴체인(연속으로 LLM을 호출하는 것)을 하는 데 비해 Normal Mode는 25회까지만 해서 그런 게 아닌가 싶기는 한데.. 상세한 내막은 모르겠습니다.</p>
<p>덕분에 바이브코딩에 대한 산뜻한 기억이 빛바랜듯한 느낌과 함께 <strong>역시 돈이 최고</strong>라는 진리를 깨달았습니다.</p>
<h2 id="디자인은-폴리모피즘-베이스">디자인은 폴리모피즘 베이스</h2>
<p>디자인은 폴리모피즘을 기반으로 했습니다.</p>
<p><img src="https://velog.velcdn.com/images/koeunyeon/post/1215986e-2354-4bb4-917f-0d73ebed9f4a/image.png"></p>
<p>직접 피그마 같은 걸로 디자인한 건 아니고 클로드 오푸스에게 폴리모피즘으로 디자인해 달라고 했더니 나름 괜찮게 뽑아준 것 같아요.<br>
최초 디자인은 Opt Out 하기 전에 한 거라, 편하게 Opus를 쓸 수 있었죠. </p>
<p>기술 스택은 단순합니다.<br>
이정도 사이트는 굳이 백엔드가 필요없을 것 같아서 일부러 백엔드는 만들지 않았습니다. 단순 HTML, CSS, JS만으로 만들었어요.<br>
전 SPA를 그닥 좋아하지 않아서 일부러 REACT 같은거는 사용하지 않았습니다. </p>
<h2 id="심리-테스트-추가하기">심리 테스트 추가하기</h2>
<p>처음에 "에겐 테토 테스트"를 만들고 나서 이것만 있는 건 좀 부족한 것 같아 야금야금 추가했더니 어느새 테스트가 열개가 되버렸지 뭡니까.</p>
<ul>
<li><a href="https://maumlog.com/womanlang/">여자어 능력고사</a></li>
<li><a href="https://maumlog.com/mbti/">MBTI 성격 유형 테스트</a></li>
<li><a href="https://maumlog.com/chillguy/">나는 칠가이일까</a></li>
<li><a href="https://maumlog.com/teto-egen/">에겐 VS 테토</a></li>
<li><a href="https://maumlog.com/manlang/">남자어 레벨 테스트</a></li>
<li><a href="https://maumlog.com/marry/">결혼 능력 시험</a></li>
<li><a href="https://maumlog.com/italian-brainrot/">이탈리안 브레인 롯</a></li>
<li><a href="https://maumlog.com/squid-test/">오징어 테스트</a></li>
<li><a href="https://maumlog.com/summer-vacation/">국내 여름 휴가지 추천</a></li>
<li><a href="https://maumlog.com/family-vacation/">가족 여름 휴가지 추천.</a></li>
</ul>
<p>어떤 테스트들이 있는지 찾아보려고 국내 테스트 사이트들 열심히 돌아다녔어요. 재미있었습니다.</p>
<h2 id="만들기는-했는데">만들기는 했는데..</h2>
<p>수익 창출 모델이야 뻔할테고... (광고 혹은 제휴겠죠)<br>
마케팅이 문제인데, 이건 어떻게 해야 할 지 잘 모르겠습니다. 챗 GPT에게 물어보니 SNS에 열심히 퍼널을 만들고 하라던데 해 본 적이 없어서 괜히 떨려 오네요. 포스팅이 이상하다고 계정 정지 먹을까봐 무섭기도 하고 그러네요.</p>
<h2 id="바이브-코딩-후기">바이브 코딩 후기</h2>
<p>이전에는 이런 사이트를 만들려면 (저같은 경우에는) 보통 다음 프로세스를 거쳤습니다.</p>
<ol>
<li>기능 정의</li>
<li>데이터베이스 설계</li>
<li>디자인 시안 뽑아내기</li>
<li>데이터베이스에 값을 설정하는 백오피스 개발</li>
<li>해당 디자인에 맞춰 프론트 페이지 개발</li>
</ol>
<p>지금 제가 밟아온 절차는 다음과 같습니다.</p>
<ol>
<li>심리 테스트 사이트 만들어달라고 하기</li>
<li>계속 다듬기</li>
<li>무한 반복하기</li>
</ol>
<p>어떻게 보면 워터폴과 애자일처럼 보일수도 있습니다만, 오히려 계획 vs 무계획으로 보이기도 합니다.<br>
물론 제가 기존에 개발을 했던 방식으로 만든 사이트들은 규모가 크고, 여러명이 협업해서 만든 사이트였던 것에 반해 이번에 만든 건 혼자 똑딱똑딱 만든 거여서 그럴수도 있고, 비즈니스 로직이랄 것도 없기 때문에 그럴 수도 있겠네요. </p>
<p>다만, 조금 큰 사이트를 만들려면 바이브코딩으로 접근하는 방식도 조금 바꿔야겠다는 생각도 듭니다. 설계를 맞기기에는 좀 어려울 것 같고, 실행만 위임하는 걸로요. </p>
<h2 id="결론">결론</h2>
<p>여하튼, 이런 식으로 "하루만에 마이크로 서비스 만들기"는 짬 날때마다 계속할 예정입니다.<br>
<a href="https://maumlog.com/">제가 만든 사이트</a>에 굳이 오시지 않아도 괜찮습니다.<del>물론 와 주심 훨씬 좋을 것 같기는 합니다.</del><br>
뭔가를 만드는 여정은 계속 기록할테니, 그냥 내가 어떻게 하고 있는지 지켜봐주면 감사하겠습니다.</p></div></div>

고은연

이 글은 제 쓰레드에 쓴 글을 블로그 식으로 다시 작성한 것입니다. 당연히 글자수 제한이 없는 만큼 이 글이 조금 더 자세합니다. 간단하게 읽으시려면 쓰레드에서, 상세한 건 이 페이지에서 보시면 됩니다.
하루만에 마이크로 서비스 만들기.
거창한 건 아닙니다. 
누구나 쉽게 만들 수 있는 것들을 하나씩 바이브코딩으로 만들어보기로 했습니다.
규칙은 딱 하나입니다. 
만드는 시간은 하루를 넘기지 않기.
오늘은 "마음로그"라는 심리 테스트 사이트를 만들었습니다.
조코딩님의 테토 에겐 테스트 만드는 영상을 보고 이런것도 재밌겠군 싶어서 만들어 봤어요.
도메인은 호스팅케이알에서 구매
퍼플렉시티에게 "어디서 도메인 구매하는 게 제일 쌀까?" 라고 물어보니 "호스팅케이알"을 추천하기에 추천인을 퍼플렉시티로 적고 호스팅케이알에 가서 도메인을 하나 구매했습니다.
부가세 포함 16,000원 정도 냈어요. 그닥 저렴한 것 같지는 않지만 터무니없이 비싼 것도 아니어서 그냥 샀어요. 
그리고 DNS를 바로 클라우드플레어로 옮겼습니다. 개인적으로 클라우드플레어 무료 기능은 최고인 것 같아요. DNS도 제공해주고, Proxy도 만들어주고, 자동 HTTPS도 지원해 주거든요. DDOS도 방어해 주고요.
배포는 클라우드플레어에
하루만에 도메인을 신청하고 cloudflare pages에다가 올렸습니다.
클라우드플레어 페이지는 처음 써보는데 잘 만든 것 같습니다. 마음에 들어요.
요금제도 착해서, 무료 요금제로도 충분할 것 같아요.
커서 해프닝
토큰을 다 썼다고?
만드는 와중에 커서에서 토큰을 다 썼다며 더이상 작동을 안하길래 급하게 Opt Out 해서 예전 요금제로 돌아가는 해프닝도 있었습니다.
분명 제가 20$를 결제할 때는 "무제한 사용" 이었는데, 지금 보니까 어느새 요금제 설명에서 "unlimited"가 사라졌네요. 
커서는 너무 요금제를 자주 바꿔요. 기능에 대해서는 신뢰하지만, 가격 정책은 신뢰하기 어렵군요.
커서 Opt out 후 후기
이전에는 별 생각 없이 MAX 모드로 해 놓고 썼었거든요. 그래서 Opt Out한 이후로도 
MAX 모드로 해 놓고 썼더니 토큰이 말도 안되게 많이 사용된는 걸 보고 깜짝 놀랐습니다. 기능 하나 고쳤는데 Requests가 89개가 순삭되어 버린 거에요. 
한달에 500 Requests를 제공하는데 요청 하나에 89개면 여섯번만 하면 한도에 다다르는 거잖아요. 놀라서 급하게 MAX Mode를 껐습니다.
Normal로 맞춰놓고 sonnet 4로 코딩했는데... 좀 불편했습니다.
MAX Mode로 놓고 썼을때는 잘 되던 것이 일반 모드에서는 하나 고치면 다른 버그가 또 생기는 기적이 발생한 거죠.
LLM 이슈인지 컨텍스트 창 크기 문제인지 커서에서 일부러 그러는지는 알 수가 없네요.
짐작컨데 MAX Mode는 최대 100회까지 툴체인(연속으로 LLM을 호출하는 것)을 하는 데 비해 Normal Mode는 25회까지만 해서 그런 게 아닌가 싶기는 한데.. 상세한 내막은 모르겠습니다.
덕분에 바이브코딩에 대한 산뜻한 기억이 빛바랜듯한 느낌과 함께 역시 돈이 최고라는 진리를 깨달았습니다.
디자인은 폴리모피즘 베이스
디자인은 폴리모피즘을 기반으로 했습니다.
직접 피그마 같은 걸로 디자인한 건 아니고 클로드 오푸스에게 폴리모피즘으로 디자인해 달라고 했더니 나름 괜찮게 뽑아준 것 같아요. 
최초 디자인은 Opt Out 하기 전에 한 거라, 편하게 Opus를 쓸 수 있었죠. 
기술 스택은 단순합니다.
이정도 사이트는 굳이 백엔드가 필요없을 것 같아서 일부러 백엔드는 만들지 않았습니다. 단순 HTML, CSS, JS만으로 만들었어요. 
전 SPA를 그닥 좋아하지 않아서 일부러 REACT 같은거는 사용하지 않았습니다. 
심리 테스트 추가하기
처음에 "에겐 테토 테스트"를 만들고 나서 이것만 있는 건 좀 부족한 것 같아 야금야금 추가했더니 어느새 테스트가 열개가 되버렸지 뭡니까.
여자어 능력고사
MBTI 성격 유형 테스트
나는 칠가이일까
에겐 VS 테토
남자어 레벨 테스트
결혼 능력 시험
이탈리안 브레인 롯
오징어 테스트
국내 여름 휴가지 추천
가족 여름 휴가지 추천.
어떤 테스트들이 있는지 찾아보려고 국내 테스트 사이트들 열심히 돌아다녔어요. 재미있었습니다.
만들기는 했는데..
수익 창출 모델이야 뻔할테고... (광고 혹은 제휴겠죠)
마케팅이 문제인데, 이건 어떻게 해야 할 지 잘 모르겠습니다. 챗 GPT에게 물어보니 SNS에 열심히 퍼널을 만들고 하라던데 해 본 적이 없어서 괜히 떨려 오네요. 포스팅이 이상하다고 계정 정지 먹을까봐 무섭기도 하고 그러네요.
바이브 코딩 후기
이전에는 이런 사이트를 만들려면 (저같은 경우에는) 보통 다음 프로세스를 거쳤습니다.
기능 정의
데이터베이스 설계
디자인 시안 뽑아내기
데이터베이스에 값을 설정하는 백오피스 개발
해당 디자인에 맞춰 프론트 페이지 개발
지금 제가 밟아온 절차는 다음과 같습니다.
심리 테스트 사이트 만들어달라고 하기
계속 다듬기
무한 반복하기
어떻게 보면 워터폴과 애자일처럼 보일수도 있습니다만, 오히려 계획 vs 무계획으로 보이기도 합니다.
물론 제가 기존에 개발을 했던 방식으로 만든 사이트들은 규모가 크고, 여러명이 협업해서 만든 사이트였던 것에 반해 이번에 만든 건 혼자 똑딱똑딱 만든 거여서 그럴수도 있고, 비즈니스 로직이랄 것도 없기 때문에 그럴 수도 있겠네요. 
다만, 조금 큰 사이트를 만들려면 바이브코딩으로 접근하는 방식도 조금 바꿔야겠다는 생각도 듭니다. 설계를 맞기기에는 좀 어려울 것 같고, 실행만 위임하는 걸로요. 
결론
여하튼, 이런 식으로 "하루만에 마이크로 서비스 만들기"는 짬 날때마다 계속할 예정입니다.
제가 만든 사이트에 굳이 오시지 않아도 괜찮습니다.물론 와 주심 훨씬 좋을 것 같기는 합니다.
뭔가를 만드는 여정은 계속 기록할테니, 그냥 내가 어떻게 하고 있는지 지켜봐주면 감사하겠습니다.

하루만에 심리 테스트 사이트 "마음로그" 만든 후기

댓글