Windsurf IDE, Claude Code 사용하여 웹 개발하기

오래전에 Flutter web으로 만들어봤던 웹인데, 필요한 것들 추가로 더 기능 추가도 하고 프레임워크도 SvelteKit으로 완전히 바꿔서 AI로 바이브 코딩을 해봤습니다.

 

그 과정에서 느낀 것들 공유를 해보고자 포스팅을 합니다. ㅎㅎ

 

Wep Application

먼저, 간략하게 개발한 웹을 소개시켜 드릴게요.

https://hmultitools.vercel.app/

 

개인적으로 필요했던 툴들을 쉽게 사용하려고 모아둔 사이트 정도로 생각해 주시면 될 것 같아요.

프로그래머용 계산기, 대출 계산기, 할인 계산기, 환전 계산기, 로또 계사기, 단위 변환 계산기, BMI 계산기 등 실생활에서 자주 혹은 가끔 이용하는 것들을 계산기 형태로 만들었어요.

비교 등을 위해 최근에 했던 계산 결과가 필요한 경우가 많아서, 브라우저의 storage를 이용하여 히스토리 기능을 넣었습니다.

굳이 회원 관리를 해가며 DB를 쓸 이유는 없어보여서, 누구나 쓸 수 있게 하면서 각자의 브라우저에 기록을 남기도록 했어요.

 

연습삼아 구글 광고를 넣으려고 했는데, 큰텐츠가 적다고 퇴짜를 맞아서 쿠팡을 넣어봤는데 쿠팡 광고 넣는 건 꽤나 삽질이 많이 필요했네요.

Buy me a coffee 같은 건 아주 쉽게 적용이 되더라고요.

 

호스팅은 이번에도 vercel을 통해서 했어요.

 

요 정도의 웹을 바이브 코딩을 통해서 해봤네요. ^^

Used AI Tools

처음엔 windsurf IDE에 남은 게 조금 있어서 이걸로 시작을 했어요.

이후, cursor IDE + claude code를 썼는데 cursor 기본 사용량은 순식간에 사라지더라고요.

그래서 마지막은 VSCode + cline + claude code를 쓰려고 했는데, 결과적으로 cline은 한 번도 안썼네요.

 

이 툴들과 함께 대충 하루 1~2시간 정도로 20일 가량 걸렸어요.

Cost

가장 중요한 게 비용 문제죠.

 

Windsurf의 경우 월 결제를 했음에도 불구하고, 보름만에 끝이나네요. 하루 1~2시간 쓰는 게 전부였는데도요.

월 결제인데 중간에 못쓰게 되버리니 뭔가 빈정 상하는 기분이 들더라고요.

안그래도 무료 쿠폰 받은 거 쓰다가 되는지도 모르고 있다 자동 결제 되버려서 바로 취소 했는데도 환불은 안되서 그냥 쓴거였다보니 더 기분이 나빴어요.

 

그래서 이후 claude code를 결제했는데, 이건 사용량 제약 방식이라 월 결제를 해두면 어쨋건 한 달은 쓸 수 있더라고요.

하루 1~2시간 사용으로는 생각보다 빠르게 사용량이 차더라고요.

아껴가며 천천히 했는데도 2번 정도 limit에 걸렸어요. 그래도 5시간마다 새로 충전이 되서 퇴근 후 잠깐씩 쓰는 정도는 쓸만은 한 것 같아요.

 

생각보다 자동 완성 기능은 없으면 좀 아쉽긴 하더라고요.

회사에선 copilot을 지원해줘서 그걸 쓰는데 업무용으로는 잘 안쓰게 되는 이유가 추천해주는 코드도 전혀 엉뚱한 쓸모 없는 게 대부분이라 오히려 불편했었는데, 혼자 취미로 공부할 때는 은근 편했거든요. ㅎㅎ

 

암튼 과금 면에서는 windsurf 같은 방식은 개인적으로 경험이 너무 안좋아서 claude code가 훨씬 나은 것 같아요.

월 결제라고 해서 했는데도 보름 만에 못쓰게 되버리니....

 

과거엔 chatgpt, gemini, grok 같은 AI들이 자꾸 엉뚱한 데 빠져서 챗바퀴 돌 때 claude만이 구원자가 되어주던 경험이 많았었는데, 워낙 발전 속도가 빠른 분야라 계속 다른 것들 사용하면서 비교해보게 되네요.

다음번엔 뭘로 넘어갈지... ^^

Devlog

요번엔 바이브 코딩으로 만들 작정을 해서 되도록 개입을 안하려고 했지만, 그럴 순 없더라고요. ㅎㅎ

 

로직이나 큰 윤곽을 잡는 건 잘하는 데, 사소한 데서 한 번 빠지면 헤어나오질 못하는 건 여전한 것 같았어요.

 

전체 코드의 통일성을 맞추는 작업은 전적으로 제가 담당했어요. 이런 건 좀 아직 떨어지는 것 같네요.

 

UI에서도 크기, 모양, 색깔 이런 부분은 잘 하는 데, 다른 모듈들이나 컴포넌트를 고려해서 전체적인 구조를 잡는거나 세세한 스크롤 컨트롤이라던지 반응형의 세밀한 조절 같은 건 자꾸 챗바퀴에 빠져서 헤어나오질 못하는 경향이 좀 있었어요.

 

이런 부분은 나서서 다른 관점을 제시하거나 아예 방향을 알려주거나 예시 코드를 줘야만 어느 정도 빠져나오는 경향이 보이더라고요.

다만 이 경우에도 제대로 해결이 안될 경우, 다시 챗바퀴에 빠지면서 하지 말라고 하고 메모리 시켜 놓은 것 까지도 무시하면서 다시 예전으로 회귀하는 경향도 종종 목격되었어요.

따라서, 아직도 어느 정도 규모가 있는 앱을 만들거나 완성도 있는 서비스를 만들기 위해선 관련 지식이 있어야 할 것 같아요.

Wrap Up

다시 한 번 느끼지만 정말 기업 입장에서는 신입은 물론이고 저년차 까지는 뽑을 이유가 없긴 할 것 같아요.

상대적으로 말도 안되게 저렴한 비용으로 비교도 안되는 실력을 갖춘 직원을 고용할 수 있는데 뭐하러 뽑을까 싶어요.

이게 실리콘 밸리에서의 지속적인 대규모 감원과 컴공 졸업생 취업률이 반토막이 난 이유이겠죠...

 

하지만 위에서 언급한 이유들 때문에 숙련 개발자들은 아직은 필요하긴 하고요.

 

반대로 아이디어만 있다면 단 돈 몇 만원에 상용앱 출시까지 가능하니 또다른 기회가 열려서 이미 수익을 창출하고 있는 사람들도 많은 실정이긴 해요.

 

앞으로 어떻게 발전해 나갈지 기대도 되면서 두렵네요.