프론트엔드 인터랙티브 학습 센터

https://javascript-study.luvlog.xyz/

프론트엔드 인터랙티브 학습 - JavaScript 실습 플랫폼

 

자바스크립트 학습 사이트를 만들며: 생성형 AI와 개발자의 새로운 역할

 

최근 JavaScript 핵심 개념 학습 센터라는 이름의 학습용 웹사이트를 만들었습니다. 이 글은 그 과정과 철학을 공유하기 위한 글입니다.

그리고 이 글조차 생성형 AI(ChatGPT)의 도움을 받아 작성되고 있습니다. 그것도 이 프로젝트의 연장선상입니다.

 

---

 

🎯 이 프로젝트를 시작한 이유

 

저는 개발자로서 현재 AI의 수준이 어디까지 와 있는지, 그리고 그 흐름을 어떻게 받아들여야 할지 체감해보고 싶었습니다.

“이제 개발자에게 필요한 것은 단순한 구현 능력이 아니라, 구현의 ‘본질’을 파악하고 디렉션을 내릴 수 있는 사고”라는 인식이 점점 더 확고해졌고,

그 고민의 결과로 이 프로젝트를 직접 진행하게 되었습니다.

 

---

 

🧠 핵심은 “인터랙티브”, 하지만 진짜 중요한 건 따로 있다

 

이 사이트는 다양한 개념을 시각적으로 보여주는 인터랙티브 요소들로 구성되어 있습니다. 예컨대 이벤트 루프, 콜 스택, 프로토타입 체인, 렌더링 타이밍 등을 타임라인이나 애니메이션으로 보여줍니다.

 

하지만 이 프로젝트를 진행하며 깨달은 점은:

 

“인터랙티브 요소는 학습을 ‘돕기 위한 장치’일 뿐, 본질이 아니다.”

 

라는 사실이었습니다.

 

아무리 예쁘고 복잡한 인터랙션이라도,

 

• 개념을 정확히 설명하지 못하거나
• 오히려 시각적 요소가 이해를 방해하거나
• 학습자의 관점에서 흐름이 부자연스럽다면

 

그건 실패한 도구입니다.

 

그래서 저는 이 프로젝트에서 “인터랙션의 완성도”보다는

 

• 개념을 얼마나 정확히 전달하는가,
• 인터랙션이 이해를 ‘돕는가 방해하는가’,
• 이 두 가지 질문에만 집중하려고 했습니다.

 

---

 

🤖 인터랙션의 구현은 AI에게, 설계는 나에게

 

이러한 철학 아래, 사이트의 인터랙션 대부분은 **생성형 AI(Claude Code)**의 도움으로 구현했습니다.

정확히 말하면, 전체 코드의 90% 이상은 “Vibe Coding”이라는 방식으로 AI와 협업해 작성했습니다.

 

이 방식의 핵심은 이렇습니다:

 

1. 사람은 의도를 명확히 정의한다 — 예: “이벤트 루프의 흐름을 한눈에 보여주는 시뮬레이터를 만들고 싶다”
2. AI는 코드로 구현한다
3. 사람은 기획자가 되어, AI가 만든 코드를 검토하고 조정한다

 

즉, 저는 개발자가 아니라 학습 도구의 사용자 경험을 설계하는 사람으로 행동했습니다.

 

---

 

🧭 개발자의 새로운 역할: 설계자, 디렉터, 감식가

 

이번 프로젝트를 하며 느낀 가장 큰 변화는,

**“개발자는 코드를 짜는 사람이 아니라, 정확한 목표를 정의하고, 구현을 조율하는 사람”**이 되어가고 있다는 점이었습니다.

 

물론 코드를 짜는 기술도 중요하지만,

 

• 어떤 학습 흐름이 학습자에게 효과적인지
• 어느 수준까지 시각화가 필요한지
• 그 시각화가 개념을 오히려 혼란스럽게 하지는 않는지

 

이런 ‘사용자 관점의 판단력’이 진짜 중요한 역량이라고 느꼈습니다.

 

---

 

✍️ 그리고 이 글도, AI와 함께 씁니다

 

이 블로그 글도 마찬가지입니다.

초안은 ChatGPT의 도움을 받아 정리하고, 표현을 다듬고, 제 의도가 왜곡되지 않도록 스스로 감수했습니다.

 

이 과정을 통해 “AI가 글도 잘 쓰네”라는 단순한 인식을 넘어서,

**“AI가 글의 골격을 잡아주고, 나는 철학과 디테일을 조율한다”**는 방식으로 생각이 바뀌었습니다.

 

---

 

🧩 마치며

 

이 사이트는 단순한 학습 도구라기보다는, 제가 스스로에게 던진 질문에 대한 실험이었습니다.

“지금 개발자로서 나는 어떤 역할을 해야 할까?”
“AI 시대에 내가 기여할 수 있는 방식은 무엇일까?”

그 질문에 대한 하나의 방식으로, 저는 인터랙션을 설계하고, 흐름을 조율하고, AI와 협업하는 새로운 개발 방식을 시도해봤습니다.

아직 완성된 건 없지만, 이 과정을 통해 조금씩 방향을 잡아가고 있습니다.

 

👉 JavaScript 핵심 개념 학습 사이트 바로가기