여자친구는 사실 개발을 먼저 시작했던 디자이너입니다. 코로나 때 개발자 붐을 타고 부트캠프까지 다녔지만, 코드를 짜는 것에 어려움을 느끼고 UI 설계에 흥미를 느껴 디자이너로 전향했죠.
그런데 최근 '개발 프로세스를 이해하는 디자이너'가 대세가 되면서 다시 개발에 도전하기로 마음먹었습니다.
"변수가 뭐야? 함수가 뭐야? 어지러워... 😵"
이전에도 어려웠는데 지금도 쉬울리는 없는 코딩이었습니다. 하지만, 이전과는 달리 곁에는 1년차 개발자가 있기에 저에게 도움을 요청했습니다.
비전공자인 저도 부트캠프를 다닐 때 개념을 이해하고 활용하는 것이 어려웠던 것을 충분히 이해하고, 최근에 기본 개념 다시 공부해야겠다는 생각이 드던 찰나 잘 되었다는 생각으로 여자친구의 개발 멘토가 되어주기로 결심했습니다.
무작정 모든 프론트엔드를 가르치는 건 시간낭비라 생각했습니다. 목표는 개발자로 취업하기가 아니기 때문이죠. 또한, 어렴풋이 HTML/CSS, JS의 기본적인 문법들을 알고 있기에 1차 목표를 '컴포넌트를 생성하고 다루기'로 잡았습니다.
디자이너분들과 협업을 할 때, 컴포넌트를 어떻게 잡아주냐에 따라 Figma Dev mode로 편하게 작업하거나 번거로워졌던 경험이 있어 '개발 프로세스를 이해하는 것'은 '개발자를 이해하는 것'이라고 생각이 들어 리액트로 컴포넌트를 다룰 수 있게끔 목표를 설정했습니다.
누구를 가르치는 게 처음이라 AI와 함께 커리큘럼을 설계해봤습니다.
먼저, JS를 어느정도 알지만, 코드 작성에 두려움이 있는 디자이너가 리액트를 어떻게 배워야하는지 페르소나를 지정하고 조언을 구해봤습니다.
AI: "디자이너에게 흥미를 끌려면 이쁜 학습용 페이지를 제작해보세요. 또한, 너무 많은 개념을 익히려 하기보다 React의 간단한 문법부터 익히게 해보세요"
역시 떼깔이 좋아야 공부할 맛이 나죠. 바이브 코딩으로 나름 이쁜 페이지를 제작했고, 난이도를 고려하여 가장 기본 훅인 useState
를 제외하고 기본적인 문법을 커리큘럼으로 설정했습니다.
직접 제작한 페이지를 보고 여자친구가 감동했습니다. 보답을 하기 위해 열심히 수업에 임하더군요. 모든 개념을 잘 파악했고, 재미있어 했습니다.
문제는 응용을 위해 제공했던 연습문제를 풀 때부터였습니다.
// 내가 준 문제
"Props를 활용해서 재사용 가능한 Card 컴포넌트를 만들어봐"
// 여자친구의 반응
"...뭘 질문해야 할지 모르겠어"
"무엇을 모르는지도 모르겠어"
더 구체적으로 관찰해보니 이런 패턴이 보였습니다.
// Button 컴포넌트는 방금 배워서 만들 수 있음
function Button({ text }) {
return <button>{text}</button>
}
// Card로 바뀌니까 멘붕
"Button이랑 Card가 뭐가 달라?"
"props는 아는데... 어디에 어떻게 써야 하지?"
알고보니 여자친구는 개념을 외우고 있었던 겁니다. 마치 수학 공식을 외우듯이요. Props를 '택배 상자'라고 비유를 들어 알려주면, 그걸 외우기만 하고, 왜 필요하고 언제 사용해야 하는지는 모르고 있었던 거죠.
이 문제를 제대로 짚기 위해 여자친구와 좀 더 이야기를 제대로 나눠보았습니다. 여기서 결정적인 힌트를 얻을 수 있었습니다.
"나는 고등학교 때 수학문제를 풀면서 늘 울던 사람이야. 개념을 이해했다고 생각하고 풀면 또 아무것도 못했거든"
주입식으로 개념을 외웠기 때문에 조금만 응용이 나타나면 풀지를 못했던 것이었습니다. 부트캠프에서도, 지금 저와의 수업에서도 같은 패턴이 반복되고 있었던 거죠.
개념을 응용하려면 먼저 생각을 해야 합니다. 패턴을 외워서 풀게 하기보다는 모르는 문제라도 풀려고 노력을 해서 사고력을 키워야 합니다.
최근에 제가 업무를 보면서 했던 방식으로 프로세스를 먼저 생각하고 메모하여 그대로 실행하다가 안되는 부분이 있으면 멈추고 다시 프로세스를 설계하는 방식으로 업무를 보면서 효율이 좋았던 기억을 떠올랐습니다.
따라서 연습문제를 풀기 전에, 주석으로 먼저 어떻게 풀어야 할지 계획을 세우고 그 계획대로 실행하면서 안되는 부분을 AI와 함께 풀어보도록 숙제를 내주었습니다.
// 먼저 주석으로 계획 세우기
// 1. 버튼 컴포넌트 만들기
// 2. props로 텍스트 받기
// 3. 클릭 이벤트 추가하기
// 그 다음에 코드 작성
function Button(props) {
return <button>{props.text}</button>
}
이후, 숙제로 냈던 문제를 다시 설명해보도록 했습니다. 이 과정에서 놀라운 변화가 일어났습니다.
// Before: 무작정 복사-붙여넣기
// After: "왜 여기서 props를 쓰는 거지?"
"어? Auto Layout이랑 Flexbox가 같은 거네?"
"Component Variant가 Props랑 비슷하잖아!"
이때부터 여자친구만는 자기만의 언어로 React를 이해하기 시작했습니다.
어느 날 밤, 여자친구가 자신만만하게 메시지를 보냈습니다
"나 혼자 했어! 쩔지~"
function Card({ title, content, imageUrl }) {
// "이미지가 없을 수도 있으니까 조건부 렌더링!"
return (
<div className="card">
{imageUrl && <img src={imageUrl} alt={title} />}
<h2>{title}</h2>
<p>{content}</p>
</div>
)
}
이제는 주석으로 프로세스를 설계하다가 막히는 부분이 있으면 AI에게 힌트를 얻는방식으로 거침없이 연습문제를 푸는 여자친구를 볼 수 있었습니다.
스스로 응용을 하다 보니 문제를 푸는데 재미를 붙이는 걸 볼 수 있었습니다. 이러한 관성을 놓치고 싶지 않아 블로그에 자신이 해결했던 문제들을 풀었던 과정들을 업로드하게 하고 잔디를 심게끔 설정해주었습니다.
이에 더 성취감을 느꼈는지, 기존에 제작했던 연습문제가 부족하여 더 많은 연습문제들을 만들어야 했습니다.
이후에는 여자친구가 만들었던 Figma 파일들을 Dev mode로 직접 퍼블리싱하는 것을 시도해보려고 합니다. 자신이 만든 디자인을 직접 퍼블리싱하면서 개발자들의 입장과 디자이너의 입장을 이해하기에 완벽한 과제라고 생각이 들었습니다.
또한, Figma MCP로 디자인한 파일들을 AI가 얼마나 정확하게 만드는지 파악하게 하고 정확도를 높이는 방향으로 지도하려고 합니다. 개발자들이 퍼블리싱할 시간을 AI로 획기적으로 줄여주게끔 한다면 너무나 이상적인 디자이너가 될 것 같다고 생각이 들었습니다.
여자친구가 "왜 그래야 해?"라고 물으면 제대로 설명 못하는 제 자신을 발견했습니다.
// 내가 생각한 내 지식
"useState는 상태 관리 훅이야! 완벽히 알아!"
// 실제 내 지식
"음... 그게... 리렌더링이... 어... 그냥 그래야 돼"
특히 이런 순간이 충격적이었습니다.
여친: "setState하면 왜 바로 state가 안 바뀌어?"
나: "비동기라서...?"
여친: "비동기가 뭐야?"
나: "음... (급하게 구글링)"
아인슈타인은 "만약 당신이 여섯 살 아이에게 설명할 수 없다면, 당신은 그것을 충분히 이해하지 못한 것이다"라는 말을 했습니다.
막연히 알고 있던 것들은 진짜 알고 있는게 아니라 아무것도 모르는 사람에게 설명할 수 있는 정도가 되어야 한다는 것을 깨닫고, 지금이라도 기본기에 좀 더 관심을 기울이고 공부를 제대로 해야겠다는 생각이 들었습니다.
누군가를 가르치는 것은 단순히 지식을 전달하는 것이 아니라, 함께 성장하는 과정이었습니다. 여자친구는 응용의 희열을 느꼈고, 저는 기초의 중요성을 깨달았습니다.
무엇보다 가장 큰 수확은, 이제 여자친구가 코드를 보면서 답답해하거나 좌절하지 않는다는 것입니다. 앞으로도 좌절하지 않게끔 잘 인도해보도록 하겠습니다
"만약 당신이 여섯 살 아이에게 설명할 수 없다면, 당신은 그것을 충분히 이해하지 못한 것이다" 이말이 너무 인상깊네요! 내가 알고있는걸 누군가를 이해시킬수 있게 설명할수 있어야 진짜 제대로 이해하고 있다는걸 말해주는것 같네요!
'누군가를 가르치는 것은 단순히 지식을 전달하는 것이 아니라, 함께 성장하는 과정'이라는 말에 공감합니다! 저도 회사에서 다른 팀원에게 내가 알고 있는 지식들에 대해 발표하고 공유할 때 많이 성장했던 것 같아요 ㅎㅎ 재밌는 글 감사합니다.
오! 제 와이프도 디자이너인데 한번 시도해봐야겠네요 ㅎㅎ
재밌어보여요