소개
이번 기수의 목표는 최대한 많은 도전을 해보는 것입니다. 좀 더 기술적으로 다양한 걸 해보고 싶었습니다.
간단하게 떠오르는 아이템으로, 여러 사이트에 흩어져 있는 장애인 대상 구인 공고를 크롤링해서 쉽게 볼 수 있게 해주는 서비스를 생각해봤습니다. 직업이 있다는 것은 단순히 생계 유지의 의미를 넘어서 재활의 경과에도 정말 좋은 영향을 줍니다. 다들 일하고 싶어하시고요. 하지만 일을 구한다는 것이 쉽지 않죠.
여자가 텔레비전 화면 앞 의자에 앉아 있습니다.
뉴스에도 나왔던 이야기지만 일정 규모 이상의 직장은 반드시 장애인을 고용하도록 되어 있습니다. 하지만 많은 경우에 그리고 대기업들도 채용하기보단 부담금을 내고 말아버린다고 알고 있습니다. 그래서 일자리 자체도 적은 편입니다. 그러니 발품을 많이 팔아야겠죠? 그 발품 파는 수고를 좀 줄여주면 어떨까 라는 생각으로 시작합니다.
한국어 문자 메시지의 스크린 샷
제 담당 업무가 아니라 잘은 모르지만 여기저기 흩어져 있는 구인 공고를 보고 잘 맞을 것 같은 거 제안해주고 취업을 도와주는 사회복지사 선생님이 병원에 있습니다. 몇가지 물어보고 개발에 들어갔습니다.
진행 방법
일단 다음 스터디 날 전까지 MVP 구현 + 웹 디플로이 딱 2개를 목표로 했습니다. MVP는 여러 사이트에 흩어져 있는 구인 공고를 크롤링해서 목록으로 보여주는 것이 핵심 기능이었습니다. 기간이 1주일이니 큰 욕심은 내지 말고 목표한 것만 만들자라고 생각하고 접근 했습니다.
이렇게 한 이유는 지난 번에 MVP를 만들어보니 점점 욕심이 생기고 이거 구현하면 이걸 하고 싶고 그러다 보면 프로젝트 구조도 좀 깔끔하게 만들고 싶고. 그렇게 지난 스터디 때 2달이 금방 지나갔습니다. 명확한 목표와 시간 계획을 세우는 것이 필요하더라구요.
금요일은 쉬고, 토요일부터 시작했습니다.
이번 스터디에서 스터디장님이 소개해주신 vooster ai 는 다른 분들도 사례글에 많이 소개해주셔서 저는 스킵하겠습니다.
작업 목록을 보여주는 웹 페이지의 스크린 샷
써보시면 아시겠지만 mcp가 있어서 클로드 코드에 작업하고 난 후 개발이 완료되면 알아서 완료 테스크로 옮겨주더라구요. GUI인게 장점인 것 같습니다. task master가 cli 환경에서 작동하니까 보기가 약간 불편하다고 생각은 했었습니다.
MRD, PRD, TRD, 기술문서, 아키텍쳐 문서 작성 단계도 무척 중요하지만 아직까지 바이브 코딩은 여기서 부터도 꽤 높은 산인거 같습니다.
당연히 테스크는 모두 완료 되었지만 아직은 코딩 성능이 가장 뛰어나다는 클로드 OPUS도 한번에 개발을 끝낼 성능은 아니거든요. 디버깅 싸움의 시작입니다.
메시지가있는 검은 색 화면의 스크린 샷
첫 화면 입니다. 클로드 코드 칭찬해~^^
토큰과 시간을 그렇게 잡아먹고 프리뷰를 띄워봤지만 저렇군요. 개발자 분들이라면 여기서 원인을 하나하나 고치거나, 이미 코드를 짤 때 조금씩 고쳐가며 만드시겠지만 비개발자에겐 그런게 없습니다. 사실 전 요즘 클로드 코드에 권한 다 주고 잘 안보고 있습니다. 일하면서 한 쪽에 띄워두고 멈출 때 마다 엔터만 치거든요.
이제부터는 메인화면 옆에 개발자 콘솔 띄워두고 복사 붙여넣기로 에러 로그를 클로드 코드에 넣고 어떻게 고칠래 하면 클로드 코드가 고쳐주고 새로고침 해보고. 잘 작동하면 넘어가고 작동 안하면 새 에러 코드 또 넘기고의 반복입니다.
조금 더 고치니까 이제 화면은 나왔는데요, 물론 제가 잘 활용을 못해서겠지만 늘 보는 tailwind CSS, shadcn/ui가 지겨워서
한국어 웹 사이트의 스크린 샷
(흔한 tailwind CSS, shadcn/ui)
한국 음악 웹 사이트의 스크린 샷
프롬프트를 곱게 넣어 바꿔봤습니다.
사본
🎨 ReBridge 디자인 마스터플랜 (v1.0)
⸻
① 디자인 컨셉 (Visual Direction)
🎯 제목: “부드럽지만 단단한 연결”
🔍 설명:
ReBridge는 정신적 어려움을 겪는 사용자에게 “안정감”, “신뢰”, “존중”을 제공해야 합니다. 디자인은 의도적으로 과한 장식이나 자극을 배제하고, 직관적 정보 구조와 따뜻한 시각 언어로 설계되어야 합니다.
요소 적용 방향
컬러 전략 절제된 색상군: Midtone Blue (#4F6D7A), Soft Green (#C6DABF), Warm Gray (#F2F2F2)기본은 무채색 계열, CTA(저장/알림)는 차분한 액센트 컬러
타이포그래피 간결하고 친숙한 Humanist Sans-serif 계열 (예: Inter, Noto Sans KR)크기 대비 강조: 타이틀 대비 내용은 0.875~1rem로 축소
UI 요소 스타일 Card 기반 레이아웃, 모서리 곡률 12px, 섀도우 최소화 (Flat-friendly)클릭 영역은 크고 여백을 넉넉히 확보하여 인지 부담을 낮춤
이미지/아이콘 의미 중심의 Line-style 아이콘 (Lucide, Tabler 등)사진보다는 일러스트 또는 의미 중심의 정보 이미지 우선
📝 적용 이유: 시각 자극에 예민하거나 집중력이 낮은 사용자에게 과도한 컬러/움직임은 피로 요인입니다. 감성적 안정성을 주되 정보 탐색에는 흐림이 없어야 합니다.
(이하 생략)
한국 문자 메시지의 스크린 샷
하지만 초보 버디 JIN님에게 까였습니다.ㅜㅜ
그래서 좀 더 블링블링한 디자인으로 바꿨습니다. 이것도 사실 프롬프트 이리저리 넣어보다 클로드 코드가 알아서 바꾼거라...
기능도 좀 추가해보다 보면
한국 웹 사이트의 스크린 샷
그동안 만든게 무위로 돌아가기도 하고요.
한국어 텍스트가있는 검은 색 화면
404 에러 화면은 늘 봅니다. 어려워요. 아직은. 더 뭔가 아쉬운 건 코드에 대한 지식이 없으면 이걸 고치는 것도 수월하진 않습니다. 아직은요 ㅎㅎ
검은 색 화면의 한국어 텍스트
어이가 없다, 클로드야!!!!!개발 해보신 분들은 공감하시겠지만 이건 사실 순화버전입니다. 밤은 깊어가는데 구현은 잘 안되면 '어이가 없네.' 정도는 순한 수준이 됩니다. 더 거친 표현들이 많지만 저의 대외 이미지 재고를 위해 여기까지만...
그래도 어느 정도 완성했습니다.
한국 웹 사이트의 스크린 샷
이건 메인 화면. 제가 오픈톡에 올린 gif 보신 분들이면 여기에 뭐가 왔다갔다 하고 애니메이션 효과도 있고 한 거 보셨을 거에요. 챌린지에도 올렸는데 스쳐가며 보신 분들도 있으실 것 같네요.
하지만 무엇보다 중요한 건
한국어와 한자 목록
크롤링을 해옵니다! 처음 시작할때 구현 하고자 했던 MVP의 핵심 기능이 이거였거든요. 스크린 샷엔 사람인과 고용24 두군데에서 크롤링 해온 구직 정보가 나와있습니다. 저는 제가 처음 1주일 목표로 세운 것 중 반은 달성했습니다. 실제 올라온 데이터가 맞다는 것도 확인했고요. 이거면 됐죠 ㅎㅎ
이제 남은 목표인 vercel로 웹 디플로이 하러 갑니다. 그런데...
한국어 텍스트가있는 검은 색 화면
vercel로 배포 준비하자고 했더니 이것저것 준비하고 이제 준비됐다고 합니다. 그런데 전 기억하고 있거든요. 분명 며칠 전 초기 세팅으로 환경 변수 세팅할때 제가 로컬 세팅만 넣어주었던 것을...그래서 물어봤더니 이제 확인해본다네요?
한국어 프로그램의 스크린 샷
어...로컬용 맞네요. 이걸 웹 디플로이 하려면 해야되는게 많군요. 사실 조금만 도메인 지식이 있었다면 vooster에서 TRD만들때 이거 이대로 만들면 로컬에서만 돌아가고 언젠가는 DB도 옮겨야 한다는 걸 알았을 겁니다. 하지만 전 몰랐군요😂
이거 할 수 있는건가요?네, 가능합니다. 가입해야되는 사이트 가입해주고, 키 달라고 하면 찾아서 키 환경변수에 넣어주고 유료면 결제하고 다 하면 됩니다. 세팅은?또 클로드랑 열심히 투닥투닥하면 언젠가는 됩니다. 언젠가라는게 문제일뿐...지난 기수 때 그렇게 두달을 보냈습니다.
한국어 문자 메시지의 스크린 샷
하다보면 약간 짬밥이 생깁니다. 아무리 개발 지식이 없고 기본 스텍이 없고 지식이 없어도 논리적으로 말도 안되는 소리는 거를 수 있습니다. 저 때 퇴근 시간 직전 쯤 되서 좀 스트레스가 쌓였나보네요. 헤헤
이 쯤에서 이번 주는 여기까지만 하기로 했습니다. 웹 디플로이는 사실 실제 서비스를 하기보단 스터디 때 보여드리고 싶어서 설정한 목표 였던 거고 그냥 시연용 한번으로 도전하기엔 해야할게 너무 많았어요. 할 수 있습니다. 하지만 하기 위해 너무 많은 시간이 필요해요. 그래서 여기까지만 하기로 했습니다.
작업 복기
중단 결정하고 스터디를 기다리다 클로드와 이번 프로젝트를 복기해보면 좋을 것 같아 해보기로 했습니다. 처음 스택을 잘못 선정한 것이 아쉬운 부분이라 왜 그걸 선택했나 물어보고 싶기도 했고요.
먼저 프로젝트를 잠시 중단할 건데 다시 시작할때 참고하게 인수인계 파일을 만들라고 하고, 그 파일에 정리된 내용을 토대로 복기를 시작합니다.
한국어 텍스트가있는 검은 색 화면
먼저 각 기술 스텍과 선정 이유를 묻고.
한국어 텍스트가있는 검은 색 화면의 스크린 샷
특히 진행 과정에서 계속 문제가 생겨서 수정했던 Next.js에 대해 물어봅니다. Next.js + Turbopack은 뭔지도 잘 모르는데 끊임없이 오류가 생기고 클로드 코드가 여러차례 일단 그거 임시로 중단하고 실행해보겠습니다. 이런 말도 많이 해서 대체 저게 뭐길래...라는 생각을 했었습니다. 오버 스펙이었나?싶은 생각이 드네요. 왜 이 문제가 생겼나 돌아보면 이번에 최대한 효율적이고 오류 없이 해 보고 싶어서 https://easynext.org/
여기서 기본 세팅 파일을 다 받고 시작했었거든요.
이런 것들이 미리 세팅 됩니다. 분명 이걸 잘 이해하고 쓸 수 있었다면 사전에 잘 만들어진 밀키트 같은 느낌일텐데 조리법을 읽지 않고 마음대로 조리했던거 아닌 가 싶네요. 원래 vooster에서 설계 했던 건 next.js가 아니었을텐데 TRD가져오고 개발을 시작하면서 프로젝트에 저런 사전 설정들이 있으니까 거기서 꼬였던 거 아닐까 추정합니다.
계속 이야기를 나오다 보니 애초에 프로젝트와 안맞을 수도 있었던 거 같네요. Next.js가 SEO에 강점이 있다는데 이 서비스는 일단 SEO를 잘 세팅해서 검색 노출을 통해 사용자를 유입시켜야 하는 서비스가 아니었거든요. 적어도 이 도구를 왜 쓰는지 정도는 공부해야겠다는 생각을 했습니다.
한국어 프로그램의 스크린 샷
결국 더 간단한 구조로 재설계 해주네요. 박우영님의 글에서 커서맛피아님이 조언해주신 것처럼 기술 선정에서도 익숙하지 않다면 난이도가 낮은 것 부터 시도해봐야할 것 같습니다.
그냥 클로드 코드랑 노가리 깐다고 생각하고 계속 이것저것 궁금했던 것을 물어보고 있습니다. 성공했든 실패했든 하나 뭔가 있으니까 그걸 통해 배우네요.
결과와 배운 점
사실 이 사례는 MVP를 달성했다지만 아쉽다면 아쉬운게 많습니다. 하지만 그 모든 걸 떠나서 이번 한 주가 너무 즐거웠습니다.
의미있고 저에게 필요한 무언가를 만들어 나가는 과정이 즐거웠구요. 어쩌다 보니 타쿠님 추천으로 사업계획서 스터디 청강 하다 사례글도 하나 썼구요.
https://www.gpters.org/wealth/post/creating-business-plan-investment-T3r3rb9U3Qvm6yb
청강만 아니었으면 베스트를 받았을....지도 모르는(?) 글도 하나 썼습니다. 일단 우리 스터디장 GPTaku님의 한 표는 확실하게 받았습니다ㅎㅎ
어렸을 때 레고를 참 좋아했거든요(그렇게 비싼지도 모르고!). 그때 밤 새 만들다가 혼날수 밖에 없었던 기분을 요즘 MVP 만들면서 다시 느끼고 있습니다. 우리 스터디원 여러분 화이팅입니다!
Let's VIBE!
