refactor(devlog): adding article vibe-coding (#28)

Author: johnny-mh

apps/devlog/src/assets/postImages/20250331/pexels-googledeepmind-17483848.jpg

@@ -0,0 +1,52 @@
+---
+title: Vibe Coding
+description: Vibe Coding에 대한 13년차 프론트엔드 개발자의 생각
+cover: '../../assets/postImages/20250331/pexels-googledeepmind-17483848.jpg'
+coverAlt: Image from Google DeepMind
+categories: [Development]
+tags:
+  - Frontend
+  - Development
+  - AI
+  - Vibe Coding
+publishedAt: 2025-03-31T20:32+09:00
+---
+
+얼마 전부터 AI를 활용한 개발을 **Vibe Coding**이라 부르기 시작했다. 단어가 적절한 듯 하면서도,
+무언가 불필요하게 포장된 느낌이라 입에 딱 붙지는 않는다. 업무상으로는 아예 다르게 표현하고 싶을 정도...
+
+2024년 중순부터 내가 속한 조직에서도 copilot을 시작으로 cursor 등의 AI를 보안 검토 후 사용할 수 있게 되었다.
+하지만 개인, 조직별로 실제 실무에서 적극적으로 활용하는 사례는 찾아보기 어려운 듯 하다.
+
+개발자 커뮤니티, YouTube등 AI를 활용한 개발 대해 검색해 보면. 효율에 대해서는 좀 의견이 갈린다.
+실제로 과거에 함께 일했던 분들의 이야기를 들어보았을 때는 부정적인 쪽으로 기울어있는 느낌이다.
+
+실효성이 떨어진다는 의견의 이유를 대략 정리하자면 "답변의 품질이 떨어진다.", "업무 프로세스 상 번거롭다." 였다.
+
+## 생각 외로 높은 진입장벽
+
+AI로 효율적으로 사용하는 것이 생각보다 만만하지 않다. 그나마 IDE에 붙어 다양한 정보를 주고받게 되어
+단순 채팅만 가능했던 이전보다 쓰기는 훨씬 편해졌지만, 그것만으로 실무에서 큰 도움이나 성과를 만들기엔 무리가 있다.
+
+효과를 보려면 의외로 개발자의 역량이 중요하다. 일을 시키는것도 아는 사람이 시킬수 있고. AI모델의 답변을 다듬는데에도 역량이 필요하다.
+
+또한 업무 프로세스도 이에 맞춰 변경해야 한다. 단순히 지금 필요한 알고리즘을 짜는 것이 아니라, 업무 시작 전.
+AI로 효율을 볼 수 있는 작업과 직접 하는게 더 효율적인 작업을 현실감있게 구분한다. AI에 대한 지식이 필요한 부분이다.
+
+업무 환경도 중요하다. 협업 부서와의 R&R정리라던가, AI사용에 대해 편견이 없는 분위기인지 등등 생각보다 이 부분도 쉽지 않다.
+
+그 동안 대부분의 개발자가 행해 왔던 업무 패턴도 걸림돌이 될 수 있다. 이를테면 자체 구축한 디자인 시스템을 AI가 알 수 있나?
+당연 방법은 있지만 AI활용에 대한 지식이 필요하다.
+
+## 앞으로의 Vibe Coding
+
+앞서 언급한 내용들로 인해. 현실적으로 소, 중규모의 시스템이 갖춰지지 않은 곳에서 먼저 적극적으로 활용할 듯 하다.
+다만 대기업들이 copilot이나 cursor 등 보안에 민감한데도 도입하는 것을 보면 중요성을 알게 되는 순간 금방 따라잡긴 할 것이다.
+
+과거 2010년 중반만 해도 Virtual Scroll, Web Based Editable Grid 들은 어느정도 FE에 투자할 수 있는 의지나 규모가 있는 회사들의
+전유물이었다. 그런데 지금은 AI모델 하나에 스크린샷만 보여주면 눈 깜짝할새에 구현해주는것은 물론이며 SSR도 완벽하다.
+
+그리고 AI는 정말 빠르게 새로운 기술이 나오고 있다. 지금도 그렇지만 23년만 해도 AI에 관련된 **논문**이 쉴 새 없이 쏟아져 나왔는데.
+이제는 개발자가 실제로 적용할만한 **기능**으로 쏟아져 나오고 있다.
+
+당연히 FE개발 역량은 똑같이 쌓아야 하며, AI에 대한 트렌드도 적극적으로 따라가야 한다. 대기업이 허튼데 돈 쓰는것 본 적이 없다.

apps/devlog/src/data/post/Vibe-Coding.mdx

@@ -107,7 +107,7 @@ const img = await getPostImage(post)
     }
 
     <div
-      class="_blog_content container prose prose-stone mb-20 max-w-none px-1 dark:prose-invert prose-headings:font-semibold prose-h1:mt-20 prose-a:relative prose-a:no-underline prose-a:after:absolute prose-a:after:bottom-0 prose-a:after:left-0 prose-a:after:right-0 prose-a:after:h-[1px] prose-a:after:bg-th-text/80 prose-a:after:content-['']"
+      class="_blog_content container prose prose-stone mb-20 max-w-none break-keep px-1 dark:prose-invert prose-headings:font-semibold prose-h1:mt-20 prose-a:relative prose-a:no-underline prose-a:after:absolute prose-a:after:bottom-0 prose-a:after:left-0 prose-a:after:right-0 prose-a:after:h-[1px] prose-a:after:bg-th-text/80 prose-a:after:content-['']"
     >
       <Content />
     </div>