<div id="readability-page-1" class="page"><div id="SE-e2a63180-d63c-4b5d-88dd-9726458f8409">
 안녕하세요 멍개입니다.​이번 포스트에서는 인공지능을 이용하여 바이브 코딩할 때 좋은 팁과 신입 개발자가 설계를 공부하는 방법을 다뤄보도록 하겠습니다.​요즘 인공지능을 이용하여 코드 작성이 매우 쉬워지고 있습니다. 이로인해 많은 사람들이 바이브 코딩, 딸깍 코딩이라는 용어르 사용하고 있습니다. ​인공지능의 퍼포먼스는 어마어마 합니다. 하지만 공통적으로 나오는 의견이 있는데 일정 수준 이상의 어플리케이션 제작은 어렵다입니다. 물론 이 부분은 저도 동의하는 부분입니다. 그럼에도 불구하고 개발자들은 어떻게 거대한 시스템에서 인공지능을 활용할까요? 그건 바로 비개발자와 개발자의 차이점이 코드이해의 여부입니다. 그렇다면 어떤 포인트를 알아야 거대한 서비스에서도 인공지능을 이용해도 서비스 확장이 가능할지 알려드리겠습니다.​흔히 개발자들은 코드를 작성할 때 설계라는 과정을 거칩니다. 쉬운 말로는 내가 작성하려는 코드를 어느 디렉터리에 배치할지에 대한 고민입니다. 이것을 구조, 설계, 디자인, 아키텍처 등으로 불립니다.​개발자들은 인공지능에게 코드 작성을 시킬 때 코드의 구조를 완전히 이해를 하고 있기 때문에 서비스가 확장이 되더라도 인공지능의 도움을 잘 받을 수 있습니다. 물론 시스템이 커질수록 xx 설계를 그대로 쓰지 못하는 경우도 있습니다. 항상 커스텀의 영역이 존재하기 때문입니다.​하지만 인공지능은 여러 설계 기법을 아주 best practice 방법으로 사람에게 제안을 할 수 있습니다. 즉, 바이브 코딩, 딸깍코딩이 유행인 이 시점에서 코드 디자인을 명시만 하더라도 깔끔한 코드를 제공받을 수 있습니다. 그리고 이 코드는 best practice이기 때문에 신입 개발자가 여러 설계 방법을 공부하는 데 있어 아주 효과적입니다. 저 또한 여러 설계 기법으로 개발을 오래 해왔지만 인공지능이 작성한 코드를 보면 "와 이런 방법으로 할 수 있구나" 하는 생각을 많이 하곤 합니다.​여기서는 프론트엔드와 벡엔드의 대표적인 설계 기법이 무엇이 있는지 보고 실제 결과를 확인해보도록 하겠습니다.​프론트엔드의 대표적인 설계방법은 Atomic Design Pattern과 FSD(Feature Slided Design) Pattern이 있습니다.​벡엔드의 대표적인 설계방법은 Layered Pattern과 Hexagonal Pattern이 있습니다. ​물론 이 외에도 수 많은 패턴이 존재합니다. MVC, MVP, MVVM 등 있습니다.​코드를 작성할 때 설계 다음으로도 중요한 점이 하나 더 있습니다. 바로 라이브러리 선택입니다. 어떤 라이브러리를 사용하냐에 따라 인공지능에 적합한(인공지능이 이해하기 쉬운) 라이브러리가 간혹 있습니다. 라이브러리 관련되서는 추후에 다뤄보겠습니다.​· frontend - Atomic Design Pattern​사용한 프롬프트는 다음과 같습니다.
 </div><div id="SE-5d2b29c9-c0db-4154-8ec3-80bc2b322f38">
 만들어진 코드는 다음과 같습니다.​참고로 프론트의 경우 "모던한 디자인 적용" 문구를 추가하면 좀 더 모던한 형태의 디자인이 적용됩니다. 아니면 이미지를 넣어서 "이와 유사한 느낌으로 해주세요"라고 요청하면 비슷한 느낌으로 퍼블리싱을 수행합니다.​<a href="https://github.com/pjt3591oo/todo-web-atomic-with-ai" data-linktype="text" data-linkdata="{&quot;id&quot;: &quot;SE-503a54c7-3a7d-4822-942c-4c9088028dbd&quot;, &quot;link&quot;: &quot;https://github.com/pjt3591oo/todo-web-atomic-with-ai&quot;}" target="_blank">https://github.com/pjt3591oo/todo-web-atomic-with-ai</a>
 </div><div id="SE-8ae96fa0-ff2d-4104-b523-f66c16c0fa8b">
 신입 개발자라면 README.md를 보면서 왜 이런 구조로 코드가 작성되었는지 설명을 볼 수 있습니다.
 </div><div id="SE-42abd648-c16b-4c4d-b984-b587d5f1c5d7">
 ​· frontend - FSD Design Pattern사용한 프롬프트는 다음과 같습니다.
 </div><div id="SE-426ea3ac-c392-406f-859a-1f843a48f991">
 ​· Backend - Layered Architecture사용한 프롬프트는 다음과 같습니다.
 </div><div id="SE-e887cd41-4870-4215-b6f7-1173361b20ed">
 프롬프트가 실행될 때 만들어진 docker-compose.yaml을 up하여 실행까지도 하며, 디비 정보를 알고있기 때문에 .env까지도 잘 만들어줍니다. 다만 여기서 좀 더 명확하게 postgres의 버전을 명시하는것이 좋습니다. 저는 명시하지 않았더니 14 버전을 사용하고 있어 15로 수정했습니다.​또한 prisma의 경우 prisma generate로 나온 결과의 generate/prisma의 PrismaClient를 사용해야 하는데 이 부분도 적절히 수정을 해주었습니다. 아마 @prisma/client를 import하여 PrismaClient를 사용한다면 에러를 발생합니다.​만들어진 코드는 다음과 같습니다.<a href="https://github.com/pjt3591oo/todo-api-layered-with-ai" data-linktype="text" data-linkdata="{&quot;id&quot;: &quot;SE-40b2241d-ff73-4239-8b3b-a008e2c6c180&quot;, &quot;link&quot;: &quot;https://github.com/pjt3591oo/todo-api-layered-with-ai&quot;}" target="_blank">https://github.com/pjt3591oo/todo-api-layered-with-ai</a>
 </div><div id="SE-56805c63-7502-4e36-8dc9-cf820a68bbae">
 · Backend - Hexagonal Architecture사용한 프롬프트는 다음과 같습니다.
 </div></div>

삽질하는 멍개씨

안녕하세요 멍개입니다. 이번 포스트에서는 인공지능을 이용하여 바이브 코딩할 때 좋은 팁과 신입 개발자가 설계를 공부하는 방법을 다뤄보도록 하겠습니다. 요즘 인공지능을 이용하여 코드 작성이 매우 쉬워지고 있습니다. 이로인해 많은 사람들이 바이브 코딩, 딸깍 코딩이라는 용어르 사용하고 있습니다. 인공지능의 퍼포먼스는 어마어마 합니다. 하지만 공통적으로 나오는 의견이 있는데 일정 수준 이상의 어플리케이션 제작은 어렵다입니다. 물론 이 부분은 저도 동의하는 부분입니다. 그럼에도 불구하고 개발자들은 어떻게 거대한 시스템에서 인공지능을 활용할까요? 그건 바로 비개발자와 개발자의 차이점이 코드이해의 여부입니다. 그렇.......

[인공지능] 개발자가 권장하는 바이브 코딩하는 방법과 신입 개발자가 설계 공부하는 방법

댓글