코드학습의 필요, K-Pen 과 함께

AI 해고의 역풍…구조조정 기업 절반 "결정 후회한다" ( 2025. 11. 3 )
https://zdnet.co.kr/view/?no=20251102051028

AI 해고의 역풍…구조조정 기업 절반 "결정 후회한다"

바이브 코딩 좋아, 그런데?..

요새 바이브 코딩이 인기이긴 하지만,
바이브 코딩으로 만들어진 앱은 결정적인 문제가 있습니다.
바로 '바이브 디버깅'입니다. 그냥 말로 '이러이러하게 고쳐줘'하는 거지요.

보여주기용 웹앱(웹페이지에서 돌아가는 앱)을 만드는건 쉽습니다.
뚝딱- 하면 AI가 순식간에 만들어주는게 요즘 추세인데요.

하지만 그렇게 만들어진 앱을 수정하는 것은 만만하지 않습니다.
작은 코드에서는 웬만큼 해내지만 코드량이 커지면 커질수록 AI가 잘 듣지 않거든요.
특히 백앤드를 연결한 후 바이브 디버깅하면 코드가 망가지기 쉽상입니다.

해결법은 손코딩이라구?

바이브 코딩을 효과적으로 활용하기 위해서는 초안이나 신기능 구현은 바이브 코딩으로,
기능 수정은 손코딩으로 하는 것이 바람직한데요.
손코딩을 하려면 코딩을 알아야 합니다.

코딩이 어려운거 아닌가..요?

AI가 만들어주는 웹앱은 보통 리액트(React) 코딩 언어를 기본으로 사용합니다.
요즘 추세로 보거나 초심자에게도 리액트가 접근하기 쉬운 언어인데요.코딩을 익히는 가장 큰 장벽은 준비작업이 어렵다는 것입니다.

이것저것 설치하고 환경 잡고 그러다 보면 시작도 전에 지쳐서
포기하는 경우가 일쑤인데요.만일 아무 준비도 하지 않아도 바로 코딩을 학습할 수 있고,
그 결과를 친구들에게 공유도 할 수도 있다면 어떨까요?
누군가 내 결과물을 봐준다면 의욕은 10배 올라가기 마련입니다.

그러다 보면 그 의욕 때문에 실제 개발할 때 번거로운 과정들을 모두 이겨낼 수 있습니다.해외 사이트는 이미 그런 서비스를 하는 코드펜(CodePen)이란 곳이 있습니다.
다만 인터페이스가 영문이라 영어울렁증이 있다면 접근하기 버겁습니다.
한국형 코드펜이 있다면 좀 더 학습이 쉽지 않을까요?

케이펜을 소개합니다.

그래서 마련했습니다. 바로 케이펜(K-Pen)인데요.
https://cray7.mycafe24.com/k-pen/

개인 프로젝트용으로 바이브 코딩으로 준비했지만 꽤 괜찮게 나온것 같아
베타 버전을 공개하며 기능 안정화 겸 리액트 코딩 과정 공유를 진행하고자 합니다.
바로 앞의 URL에 접속하시면 아래와 같은 화면이 등장할텐데요.

HTML, CSS, JS 3개의 탭이 있지만 우선 무시하고 코딩 연습은 JS 탭에서만 하면 됩니다.
왼쪽에 코딩을 하면 바로 오른쪽에 결과화면이 나오는데요.

당장 이걸 어떻게 써먹나..? 생각하실 수도 있지만,
코딩연습으로 재미가 붙고 적성이 맞는다 생각되시면
추후 실제 개발자를 고려하실 때 상당부분 도움이 되실 겁니다.

샘플 좀 봅시다!

오늘은 첫번째로 샘플 코드를 둘러보는 시간을 갖겠습니다.
우측 상단 햄버거 메뉴를 클릭하면 메뉴가 노출될텐데요.

1~8까지 샘플코드가 마련되어 있습니다.
(추후 더 늘어날 수도 있습니다)

1번을 선택해볼까요?

그리고 '확인'버튼을 누르면,

화면이 이렇게 바뀝니다.

이 예제는 버튼을 누를때마다 숫자가 1씩 증가하는 간단한 예제인데요.
기초를 익히시기 딱 좋은 예제입니다.

좀 더 수준 높은 예제도 있는데요.
5번 예제의 경우

계산기 기능을 구현한 앱이 작동합니다.

마무~리

오늘은 주저리 주저리 설명이 많았으니
샘플을 둘러보는 것으로 마무리 짓도록 하겠습니다.

손코딩에 관심 있는 분께 '숙제'입니다 ^^
예제3을 실행해보세요.
그리고 어떤 기능을 하는건지 댓글로 남겨주신다면 좋을것 같습니다.

AI로 산출한 바이브코딩의 불확실성에 두려움이 있다면,
리액트로 만나는 손코딩 학습도 함께 해보세요.

많이 알면 알수록, 많이 익숙해질수록 두려움이 점점 사라질 겁니다.

방문해 주셔서 감사합니다!

---

성경 말씀 한절 공유드립니다.
말씀이 여러분의 삶을 풍성하게 하시기를 소망합니다!

"태초에 하나님이 천지를 창조하시니라." (창세기 1장 1절)