DEVOCEAN

시작하는 글

안녕하세요 웹 프론트엔드 개발자 Felix입니다.

올해 업무가 변화가 생기면서 오랜만에 데보션에 글 기고하게 되었네요.

작년초와 다르게 올해부터는 본격적으로 AI와 함께 코딩을 하는 시대가 오고야 말았습니다.

과거에는 chat gpt 등 AI LLM model이 수많은 할루시네이션(hallucination)을 만들고, 거짓말하고 감히 이런것들로 코딩을 할 수 있을까라는 의문이 있었는데,

생각보다 빠르게 LLM 모델이 개선되면서 많은 개발자들, 그리고 비개발자들이 바이브 코딩을 하고 있습니다.

저 역시도 처음에는 바이브코딩에 부정적이였지만, 생각이 좀 바뀌었고 상반기에 바이브코딩을 하면서 느낀 점들을 글로 옮겨보려고 합니다.

저는 Cursor, Windsurf, chatGPT 를 통해서 바이브코딩 (AI 페어코딩)을 해보았습니다.

이 글을 읽으시고, 바이브코딩 하시는 분들 혹은 프론트엔드 개발 하시는 분들의 개발 생산성에 기여를 할 수 있으면 좋겠네요.

바야흐로 바이브코딩 시대

바이브 코딩(Vibe coding)은 오픈AI 공동 창업자인 안드레 카파시(Andrej Karpathy)가 바이브코딩이라는 개념을 처음 X를 통해 개시했었는데요.

안드레 카페시는 바이브 코딩은 코딩에 몸을 맡기고 지수적 증가를 받아들이며 코드가 존재하는 것조차 잊는다고 말합니다.

LLM 기능이 너무 좋아지며, AI가 수준 높은 코드를 작성하게 되었습니다.

요즘은 예전과 동일하게 AI도구 없이 개발을 할 수는 있지만, 커서, 윈드서프 등 여러 AI도구를 활용하면 개발의 생산성을 올릴 수 있다고 생각합니다.

바이브코딩 시대라기보다는 사실 요즘 개발과 뗄레야 뗄 수 없는 키워드가 된 것 같습니다.

바이브코딩은 만능 키인가?

비개발자와 개발자는 접근법이 달라져야 할 것 같습니다.

기획자 등 비개발자는 많은 케이스들에서 보듯이 개발지식이 없어도 개발이 가능합니다. 라이브 환경 배포까지 가능합니다.

개발자들은 기존에 혼자 개발하는 것보다 생산성을 높일 수도 있습니다.

바이브코딩의 장단점은 많이들 들어보셨겠지만, chatGPT를 사용해서 이 질문에 대한 답을 확인해 보았습니다.

chatGPT로 바이브 코딩의 장점과 단점을 물어보았는데, 아래와 같은 답변을 얻을 수 있었습니다.

Claud Code의 경우, md파일을 잘 성정해주면 코딩스타일, 규칙에 대해 어느정도 보완이 가능합니다.

어느정도 맞는 이야기지만 저는 좀 다른 관점에 대해서도 이야기 해볼까 합니다.

프론트엔드 개발자가 경험해본 바이브 코딩의 특징은?

1.Productivity

HTML 마크업 , 퍼블리싱 관련 부분에서 시간을 절약할 수 있었습니다.

바이브코딩을 통해 기본 틀 및 기본 Sample을 만들고 그것을 바탕으로 수정하여 실제 개발 소스에 녹일 수 있었습니다.

스타일 관련한 부분에서도 오랜만에 CSS 스타일링을 하게 되면 헷갈리는 부분이 있었는데 AI의 도움을 받을 수 있었습니다.

예전에는 공식 다큐먼트나 stackoverflow 등에서 찾았지만 AI 프롬프트 한두번 보내면 원하는 결과를 확인할 수 있었습니다.

대기업의 경우도 개발조직에 프론트엔드 개발자가 적은경우가 많은데, 이 경우 AI의 도움으로 적은 인력으로 높은 생산성을 만들 수 있다고 확신하게 되었습니다.

2.Randomness

LLM의 장점이자 단점이 같은 프롬프트라도 결과가 다른 경우가 존재했습니다.

그래서 첫 프롬프트의 결과가 아쉬워서 다시 프롬프트를 수정하여 작성하는 경우, 첫번째 결과를 보완되는 내용이 나오는 것이 아니라 전혀 다른 결과가 나오기도 했습니다.

Randomness는 AI LLM 모델의 특징으로 어느 경우 한번의 프롬프트로 확인하는 것보다 몇번더 프롬프팅을 하면서 진행해야 더 좋은 결과를 나올 수 있었습니다.

3. LLM Model Dependency

우리가 Cursor 등 AI 툴을 사용할때, LLM Model을 잘 이해하는 것이 필요할 수 있습니다.

즉 우리가 LLM 모델마다 성능 편차가 존재합니다.

aider라는 사이트는 Polyglot benchmark로 불리며 다양한 LLM 모델을 테스트하며 어느모델이 코딩 문제를 잘 푸는지 비교하여 확인 할 수 있는 사이트입니다.

절대적인 기준은 아니지만 LLM Model 선택시 참고할 만한 사이트 입니다.

많은 LLM 모델들이 파이썬 코딩에 초점을 둔게 많아서 파이썬 코딩은 잘하지만, Low level 코딩은 잘 못하는 경향이 있습니다.

참고 : https://aider.chat/docs/leaderboards/

프론트엔드 개발자가 경험해본 바이브 코딩 한계와 익햐야 하는 역량및 대응 방법은?

1.기능 불완전성 -> 테스트코드가 중요

1) 한계점

커서를 사용할 경우 여러부분을 agent가 수정하게 되는데, 정상적으로 동작되는 기능이 잘 되지 않을 수 있습니다.

AI 코딩은 실제 환경에서 빌드하여 테스트를 하지 않기 때문에 AI Agent로 수정하다보면 빌드 에러가 나는경우도 많을 수 있습니다.

2) 역량 / 대응 방법

이러한 상황 방지를 위해 로컬에서 테스트코드를 만들어서 개발소스를 배포하기 전에 테스트 해보는 것이 좋습니다.

AI코딩은 기능이 잘 동작되지 않을 수도 있기 때문에 배포 전, 테스트 코드를 통한 확인이 필수적인 것 같습니다.

AI가 짠 코드는 코드리뷰가 필수라고 생각합니다.

2.Long text -> 디테일하게 작은 단위로 명령

1) 한계점

AI Agent가 많은 일을 해야하는 경우 잘 처리하지 못하는 경우가 존재하여 큰일을 맡기기 어려운 경우가 존재했습니다.

Cursor와 Windsulf 모두 토큰 제한을 넘지 않게 하기 위해 관련된 핵심 정보만 추려서 LLM에 호출하여 정보를 가져오는 방식을 채택하고 있습니다.

이 방법이 효율적이라고 생각 할 수 있으나 복잡한 문제를 풀라고 했을때 원치 않은 결과를 얻을 수 있습니다.

2) 역량 / 대응 방법

첫번째, 이러한 방법 방지를 위해서는 해야하는 일을 잘 쪼개서 LLM을 사용하는 것이 업무에 효율적인 것 같습니다.

어떤 개발 업무를 시킬 때, 일을 잘 쪼개서 AI 페어코딩을 해야 합니다. 저 역시 실제 코딩해서 작은 단위로 일 수행을 유도함으로써 생산성을 높일 수 있었습니다.

두번째, 프롬프트를 쓰기 난해하거나 익숙하지 않은 경우에는 써야하는 프롬프트를 바로 작성하기 보다는

LLM 에 어떤 개발을 해야하는 상황인데 어떻게 프롬프트를 써야하는지 물어보고, 수신 받은 프롬프트를 수정해서 사용하는 것도 좋은 방법입니다.

3. 비효율적인 코드 -> 업무지식 필요

1) 한계점

AI Agent로 쉽게 누구나 코딩을 할 수 있습니다. 문장 한줄이면 앱도 만들어내고, 코딩학원에서 오랜 시간 공부해야 코딩이 가능했지만 지금은 다릅니다. 그러다 보니 바이브코딩으로 누구나 개발을 할 수 있지만 전문지식이 약하면 코드 완성도가 떨어질 수 있습니다. 이 점은 서비스에 영향이 없을 수도 있지만 큰 영향을 끼칠 수도 있습니다.

2) 역량 / 대응 방법

금융권이나 리테일 분야에서 하나의 실수는 수십년간 쌓았던 고객의 신뢰를 저버리고 기업을 존폐위기에 빠뜨릴 수 있습니다.

고로 큰 기업에서의 LLM 사용은 리스크를 만들 수 있습니다.

프롬프트를 잘 짜기 위해서나 프롬프트 확인을 위해서 개발지식이나 도메인 지식이 있다면 좀 더 안전한 코드를 짤 수 있다고 생각합니다.

프론트엔드 개발 역량을 쌓아서 바이브코딩에 너무 의존하지 않아야 한다.

그리고 개발하는 서비스 관련 넓은 분야의 지식을 쌓는게 업무에 완성도를 높이는데 도움이 될 수 있습니다.

마치는 글 : 프론트엔드 개발자는 바이브코딩 시대 어떻게 준비해야 할까?

AI 활용 역량이 비개발자들 뿐만 아니라, 개발자들한테도 중요합니다.

아래는 링크드인에서 공감이 되어서 가져온 reference입니다 (https://url.kr/mnz36k)

바이브코딩 역량 (AI 활용 역량) 이 많으면 많을 수록 개인이 낼 수 있는 성과는 높아집니다.

바이브 코딩역량은 경력과 비례하는 경향도 있어서, 경력이 많으면 바이브코딩을 잘 할 수 밖에 없습니다.

어떻게 바이브코딩 시대를 준비해야 할까요?

첫번째, 넓은 분야의 공부가 필요합니다.

바이브 코딩 시대는 개발 숙련자나 높은 개발 경험자일 수록 더 많은 것들을 할 수 있고, 그렇지 않은 사람은 LLM 사용이 제한될 수 있습니다.

고로 언어, 기술, 인프라, 도메인 등 넓은 분야의 공부를 하면 바이브 코딩이 날개를 달아줄 수 있다고 생각이 듭니다.

두번째, LLM에 대한 이해가 필요합니다.

LLM을 잘 알고 있으면 상황에 맡는 모델을 사용하거나 사용하면 안되는 모델을 피할 수 있을 것입니다.

그리고 토큰 제한이 있다는 사실을 알면 일을 쪼개서 시킬 것이고, LLM Model release를 할 때마다 어떤 변화가 있는지 잘 찾아 볼 것 입니다.

세번째, 프롬프트도 중요합니다.

프롬프트를 잘 알 고 있다면 프롬프팅 사용시 역할자 지정 (Act as)를 한다던가 LLM이 잘 할 수 있게 일을 시킴으로서 효율적으로 개발 할 수 있을 것이라 생각됩니다.

AI Agent가 등장하면서 많은 기회가 생겼습니다.

아마, 앞으로도 AI페어코딩 관련 기술은 좀 더 발전되고 개선될 것입니다.

바이브코딩과 LLM 모델이 변화하면서 개발방식이 좀 더 변화하면 다시 한번 정리 글을 써보겠습니다.많은 프론트엔드 개발자분들이나 IT업계 종사하는 분들이 이런 시대에 수혜를 입었으면 하는 바람으로 글을 마치겠습니다.

긴 글 읽어주셔서 감사합니다.