AI 시대, 대체불가한 프론트엔드 엔지니어가 되는 방법

8주 동안 Camp 에서
AI와 함께 내 주변에 실제 문제를 해결하며
Product Engineer 로 확장 하세요

이런 분들에게 추천해요

🤩
AI 와 효율적으로 협업하는 방법을 깊이 있게 배우고 싶은 분
🤔
"좋은 프론트엔드 설계란 무엇인가?" 에 대해 고민하는 분
🤐
성장에 대한 나의 고민에 대해 피드백을 주고 받을 사수, 동료가 없는 분

어떤 것들을 경험할 수 있나요?

🚀
정규 세션 & 개인과제 UX 에 대한 깊은 이해를 통해, 기획과 설계가 AI 협업에서 중요한 이유를 발견합니다.
👥
팀과제 & 피드백 세션 팀과제, 피드백 세션을 통해 팀원과 서로 도움을 주고 받으며 함께 발전합니다.
🤖
AI 협업 & 리뷰 설계를 기반으로 AI 와 협업하며, 그 과정과 결과물(코드)에 대해 리뷰를 받습니다.

정규 세션

라이브 세션에 참여하여 주차별 주제를 학습하고, 수행한 과제에 대해 피드백을 받습니다.
ZOOM 세션 강의

코드 리뷰

기획에 기반하여 설계한 후 구현합니다. 이 과정에서 AI와 협업하는 방법과 결과물(코드)에 대해 리뷰합니다.
멘토 코드리뷰

개인 과제

주차별 주제에 대해 각자 개인 과제를 진행합니다. 개인 과제를 통해 주제를 실습하며 경험합니다.
UX framework 를 통해 F.E 설계 기반을 학습

피드백 세션

완성한 과제에 대해, 심화 피드백 세션을 추가로 진행하며 과제 완성도를 높입니다.
과제에 대한 심화 피드백을 제공

팀 과제

앞서 진행한 개인 과제를 바탕으로, 팀원과 함께 ZOOM 을 통해 의견을 나누며 과제를 완성합니다.
함께 완성하는 팀 과제

실시간 질문

Discord 로 세션과 과제에 대해 실시간으로 질문하며, 이를 토대로 깊이 있게 학습합니다.
Dicord 로 피드백 및 실시간 Q&A

제공하는 것들

세션 가이드

주차별 세션 주제 상세 설명, 과제 진행 방법 관한 세션 가이드 파일을 제공합니다.
2주차 세션 가이드 파일(pdf)

F.S.D 보일러플레이트

기획 기반 설계를 이해하기 쉽게, F.S.D 보일러플레이트를 제공합니다.(F.S.D 가 궁금하다면?)
F.S.D 보일러플레이트 github repository

UX framework 템플릿

좋은 설계란 무엇인지에 대해 이해를 돕기 위해 제작 framework 템플릿을 제공합니다.
(개인과제와 동일)자체 제작한 UX framework 템플릿

세션 녹화 영상

정규 세션과 피드백 세션에 대한 녹화 영상을 제공하여, 복습을 통해 이해도를 높일 수 있도록 돕습니다.
(피드백 세션과 동일)피드백 세션 녹화 영상

함께 다룰 기술들

P.E.C 주간 일정

(기수별로 요일 조정 가능)

정규 세션

주 1회 90분 동안 진행하는 ZOOM 라이브 세션에 참여합니다. (팀 과제 피드백 + 주제 세션)

개인 과제

금요일부터 주말을 활용해 개인 과제를 진행합니다.(discord 에서 질문하실 수 있습니다.)

피드백 세션

개인 과제를 완성하면, 월요일에 ZOOM 피드백 세션을 통해 멘토와 함께 과제를 개선합니다.

팀 과제

개선한 개인 과제를 토대로, 팀원과 함께 ZOOM 에서 의견을 나누며 팀 과제를 완성합니다.

P.E.C 주차별 주제

💬

1주차 문제 정의
사용자의 관점을 이해하고 문제를 명확히 정의합니다.

🗃️

2주차 Information flow
서비스의 전반적인 흐름을 이해하고, 사용자의 패턴을 파악합니다.

💡

3주차 서비스 구체화
실제 서비스를 개발하기 위해 필요한 정보들을 구체화합니다.

✍️

4주차 컴포넌트 설계(F.S.D)
구체화한 개념들을 활용하여 변화에 대응이 쉽도록 설계합니다.

🤖

5-6주차 AI 와 협업(Cursor)
좋은 설계를 기반으로, AI 와 효율적으로 협업하는 방법을 배웁니다.

🧑‍💻

7-8주차 상태 설계 및 전체 구현
상태(데이터) 설계의 기준을 배웁니다. AI 와 함께 전체를 구현합니다.

주제 상세

1주차 💬 문제 정의 

AI 와 협업할 때 정확한 방향을 알려주려면, 문제를 명확히 정의해야 합니다.
이를 위해 직접 사용자와 대화하고 팀원들과 Persona 를 완성합니다.
Empathize: 사용자의 필요와 문제, 목표, 행동, 생각, 감정 등을 파악하려고 노력합니다. 이를 위해 사용자 인터뷰를 합니다. 사용자의 실제 경험과 문제를 사용자 인터뷰를 통해 깊이 이해하는, 나아가 사용자의 관점에서 문제를 바라보는 연습을 합니다. 사용자 인터뷰 질문지 작성 요령을 배웁니다.
Define: 사용자 인터뷰 결과를 바탕으로 페르소나를 작성합니다. 이 과정을 통해 문제를 명확히 정의합니다.

과제

사용자 인터뷰
사용자 인터뷰 질문지 작성법을 토대로, 질문지를 완성합니다. 3명의 사용자를 인터뷰 진행합니다.
Persona
사용자 인터뷰 내용을 기반으로 framework 를 활용하여 Persona 를 구체화 합니다.

2주차 🗃️ Information flow

AI 에게 일관된 방향을 알려주기 위해, 서비스의 흐름을 정리해야 합니다.
이를 위해 서비스 내 핵심적인 정보의 흐름과, 이에 따른 사용자의 패턴을 파악합니다.

과제

Service Flow
서비스의 전체적인 흐름을 이해하고 시각화합니다. 서비스가 어떻게 작동하는지를 나타냅니다.
Information Mind Map
서비스의 정보 구조를 시각화하는 도구입니다. 이를 통해 서비스의 다양한 정보와 관계를 파악합니다.
User Workflow 
사용자가 목표를 달성하기 위한 단계를 나타냅니다. 사용자행동 패턴을 이해합니다.

3주차 💡 서비스 구체화

AI 가 더 좋은 퀄리티의 코드를 완성하려면, 구체적인 지시가 필요합니다.
이를 위해 실제 서비스를 구현할 때 필요한 정보들을 구체화합니다.

과제

Service Process
서비스가 어떻게 제공되는지를 단계별로 설명합니다. 서비스 과정에서 발생할 수 있는 문제를 미리 파악합니다.
Menu
서비스 주요 기능을 나열하며 서비스 구조를 분석합니다. 사용자가 필요한 정보나 기능을 쉽게 찾도록 돕습니다.
Site Map
웹사이트 페이지 구조를 나타냅니다. 페이지 사이 관계를 이해하고, 사용자 웹사이트 탐색 방법을 설계합니다.

4주차 ✍️ 컴포넌트 설계(F.S.D)

AI 가 작성하는 코드에 우리 의도를 더욱 반영하려면, 자세한 구현 방법을 전달해야 합니다.
이를 위해, 구체화한 정보와 개념을 활용하여 리액트 컴포넌트와 상태를 설계합니다.(F.S.D 적용)
컴포넌트 설계
컴포넌트 계층 구조 설계: 서비스 플로우, 사이트 맵, 페이지 플로우를 토대로, 기능 중심으로 컴포넌트 계층 구조를 설계합니다. (UX framework 결과물이 F.S.D 와 어떻게 연관되는지 학습합니다.)

과제

컴포넌트 설계: 컴포넌트 구조에 대해 정규 세션을 통해 학습한 기준을 토대로 설계합니다. 레포지토리 생성 후, 결과물을 기반으로 폴더 구조를 완성 합니다.

5-6주차 🤖 AI 와 협업(Cursor)

앞서 완성한 과제를 바탕으로, AI 와 효율적으로 협업하는 방법을 배웁니다.
효율적인 AI 협업 방식: AI 를 어떻게 대해야 하는지에 대해 기준을 세웁니다. 이 기준을 바탕으로 AI 와 효율적으로 협업하기 위해 필요한 배경 지식을 학습합니다.
AI 에디터 고급 기능 활용: 반복되는 작업 명령을 rule 파일 등으로 작성하며 효과적인 프롬프트를 작성하는 방법을 학습합니다. 또한 이를 활용하여 효율적으로 AI 와 협업하기 위해 필요한, 근본적인 능력이 무엇인지 함께 정의합니다.

과제

AI 협업으로 내가 맡은 기능 구현: 설계를 바탕으로 프롬프팅 하여 AI 와 협업하는 연습을 합니다. 이를 통해 서비스 기능을 효율적으로 구현합니다.

7-8주차 🧑‍💻 상태 설계 및 전체 구현

상태(데이터) 설계의 기준을 배웁니다. AI 와 함께 전체를 구현합니다.
상태 설계
상태 변화 이해: Information Mind Map을 통해 어떤 정보가 사용자에게 필요한지, 어떤 정보가 상호작용에 의해 변화하는지 등을 파악할 수 있습니다. 이를 통해 어떤 상태를 관리해야 하는지를 이해할 수 있습니다.
상태 저장소 선택 기준: 다양한 상태 저장소 중에서 선택하는 기준을 배웁니다. 이를 바탕으로 현재 상황에 맞는 저장소를 선택한 후, 피드백을 받으며 개선합니다.

과제

전체(컴포넌트, 상태) 구현: 생성한 레포지토리에 코드를 구현합니다. 코드 리뷰를 주고 받으며 구현한 코드를 개선합니다. 동시에 설계를 보완해야 할 부분을 발견한다면, 피드백을 반영하여 보완합니다.

P.E.C 참가자 인터뷰

리팩토링은 나를 위한 선물?!
여러분은 개발자로서 가장 도전적이었던 순간을 떠올려 본 적 있으신가요? 때로는 익숙한 방식을 벗어나 새로운 구조를 도입하거나, 사용자의 진짜 문제를 해결하기 위해 기획과 개발의 균형을 맞추는 과정에서 우리는 더 깊이 성장하곤 합니다. 이번 인터뷰에서는 Product Engineer Camp(P.E.C)를 통해 성장한 동희님의 이야기를 소개합니다. 동희님은 현재 신사업 팀에서 프론트엔드 개발을 담당하며, 두 개의 제품을 성공적으로 출시했습니다. 특히 문서 기반 검색 시스템과 LLM을 활용한 문서 작성 지원 프로그램을 개발하며 FSD(Feature-Sliced Design)와 zustand를 도입해 프로젝트를 혁신적으로 리팩토링한 과정을 생생하게 들려주셨습니다. P.E.C를 통해 단순히 코드를 작성하는 개발자가 아닌, 사용자 경험을 주도적으로 개선하는 개발자로 변화한 동희님. FSD와 zustand를 결합해 복잡한 프로젝트를 체계적으로 관리하고, 사용자 중심의 철학을 실제 업무에 적용해 나가는 동희님의 경험은 많은 개발자들에게 실질적인 인사이트를 제공할 것입니다. 사용자를 위한 더 나은 제품을 만들기 위해 끊임없이 고민하고 도전한 동희님의 이야기, 지금 바로 만나보세요! Q. 요즘도 신사업 팀에서 계속 계신가요? 네, 올해 정말 바빴습니다. 제품 두 개를 출시했거든요. Q. 와, 두 개나요? 어떤 제품인지 간단히 설명해주실 수 있나요? 첫 번째는 문서를 업로드하면 색인을 하고 문서 기반으로 검색할 수 있는 시스템이에요. 프론트엔드는 다른 개발자 한 분과 함께 작업했죠. 두 번째는 ChatGPT나 SOLA 같은 LLM 모델을 활용해 문서를 작성할 수 있도록 도와주는 프로그램인데, 이건 프론트엔드 전체를 제가 혼자 담당했어요. Q. 혼자서 전체를 다 하신 거라니 대단합니다. 어려운 점은 없으셨나요? 두 번째 프로젝트는 UI는 간단했지만, 비즈니스 로직이 많아서 설계가 쉽지 않았어요. 특히 zustand를 사용해 전역 상태를 관리했는데, 이 프로젝트 특성상 props drilling만으로 해결이 안 되는 부분이 많았거든요. 그래서 zustand로 전역 상태를 관리했지만, 의존성 관리가 쉽지 않아 고생했죠. + (인터뷰어 의견) 맞아요. zustand를 그냥 사용하면 의존성이 꼬일 수밖에 없는 부분이 있을것 같아요. 클린 아키텍처에서 사용하는 usecase 개념을 zustand와 결합해서 설계하는 방향도 있더라고요. 이때 각 컴포넌트가 특정 스토어에만 의존하도록 스토어를 분리하는 작업이 정말 중요하더라고요. Q. FSD(Feature-Sliced Design)도 도입하셨다고 들었는데요. 어떤 과정으로 적용하셨나요? 이 프로젝트에서 FSD를 처음으로 적용했어요. 기존에는 모놀리식 구조로 개발을 시작했는데, 비즈니스 로직과 UI 코드가 한곳에 섞여 있어서 유지보수가 너무 힘들었어요. 그래서 FSD 구조로 리팩토링을 시작했죠. 처음에는 중요한 기능부터 차근차근 구조를 바꿨고, 시간이 생길 때마다 나머지 부분도 리팩토링을 진행했어요. Q. FSD 구조로 전환하면서 가장 큰 변화는 무엇이었나요? 가장 큰 장점은 비즈니스 로직과 공통 UI를 명확히 분리할 수 있었다는 거예요. 예를 들어, 공통 UI는 shared 폴더에, 특정 기능은 features 폴더에 배치하면서 코드의 위치가 명확해졌죠. 이전에는 모든 게 한 폴더에 몰려 있어서 찾기가 어려웠는데, 지금은 유지보수가 훨씬 쉬워졌어요. Q. 리팩토링 과정에서 어려움은 없으셨나요? 당연히 있었습니다. 특히 기존 구조가 의존성이 많아서 처음에 손대기가 쉽지 않았어요. 그래서 중요도가 높은 기능부터 FSD 구조로 리팩토링을 시작했고, 시간이 생길 때 점진적으로 나머지 코드를 수정했어요. 또 zustand와 FSD를 결합하는 과정에서 스토어 설계를 새로 해야 했는데, 스토어 간 의존성을 최소화하는 작업이 특히 어려웠어요. Q. 이런 리팩토링 작업은 당장 성과가 보이지 않을 텐데요. 힘들지 않으셨나요?
  • PEC
성장의 비결은? 사용자 중심 개발!
[P.E.C 졸업생 인터뷰 권효진] 사용자 중심의 개발과 끊임없는 성장 이야기 👉 영상: https://youtu.be/vSIb2sPdu9U?si=NSh1KT-JLPjox1Ie 여러분은 개발자로서 어떤 순간에 가장 큰 성장을 느끼시나요? 많은 개발자들이 실제 문제를 해결하고, 사용자와 직접 소통하며, 제품을 개선하는 과정에서 큰 성장을 경험한다고 합니다. 이번 인터뷰에서는 Product Engineer Camp(P.E.C)를 통해 성장한 권효진님의 이야기를 소개합니다. 권효진님은 현재 카프카 모니터링 툴을 만드는 스타트업 스피타에서 프론트엔드 개발을 담당하고 있습니다. 초기 멤버로서 다양한 역할을 수행하며, 팀을 이끌고 있는 권효진님은 P.E.C를 통해 어떤 변화를 경험했는지, 그리고 현재 진행 중인 프로젝트와 앞으로의 계획에 대해 진솔하게 이야기해주셨습니다. 개발자라면 누구나 한 번쯤 고민해봤을 사용자 중심의 개발 철학과 실제 업무에서의 적용 방법, 그리고 스타트업에서의 도전과 성장을 권효진님의 경험을 통해 생생하게 들어보세요.(최대한 어투를 살리기 위해 원본 그대로 담고자 했습니다.) Q: 현재 하고 계신 일에 대해 소개해 주세요. A: 저는 카프카 모니터링 툴을 만드는 회사인 스피타에서 프론트엔드 개발을 담당하고 있어요. 저희는 카프카 모니터링만 하는 것이 아니라 파이프라인 구성이나 다른 서비스들도 제공하고 있어요. 제 역할은 개발만 하는 건 사실 아니고, 서비스 기획이나 다른 일들도 하고 있습니다. 아무래도 인원이 적다 보니까 스타트업이니까 처음부터 끝까지 다 일을 하고 있어요. 현재는 프론트엔드 팀 3명을 이끌고 있습니다. Q: 회사의 규모와 현재 상황은 어떤가요? A: 저희 회사는 현재 15명 정도 있어요. 아직은 가야할 길이 먼 초기 스타트업이에요. 인당 매출이 2억 정도가 나와야 한다고 생각해서, 아직 충분히 회사 성장의 여지가 있다고 보고 있어요. Q: 포지션에는 어떤 변화가 있었나요? A: 처음에 개발팀이 세 분 계셨는데, 지금은 제가 리드 아닌 리드, 리드까지는 좀 웃기지만 그렇게 하고 있어요. 회사에 가면 의외로 일을 할 수 있는 시간이 그렇게 많지 않더라고요. 회의도 많고, 되게 작은 것들도 다 어쨌든 의사결정을 해야 되니까요. 또 저희는 인원이 적다 보니까 제가 직접 고객사에 가서 저희 대시보드 사용자 교육을 하는 경우도 있고, 카프카 관련해서 알려드리는 경우도 있어요. Q: 현재 진행 중인 주요 프로젝트는 무엇인가요? A: 현재 전체적인 리팩토링 작업을 진행 중입니다. 처음부터 제가 다 만든 거거든요. 완전 신입 개발자일 때 만들어서 코드를 볼 때마다 좀 스트레스 받더라고요. 그래서 전체 리팩토링을 해야겠다고 생각했어요. 기존에는 Next.js 페이지 라우터로 되어 있는데, 그걸 이제 앱 라우트 14 버전으로 완전히 처음부터 만들고 있어요. 그리고 PEC 에서 FSD(Feature Sliced Design)에 대해 배웠던 걸 기능 중심으로 적용하고 있습니다. UX 관점에서도 좀 더 기능을 다시 해가지고 완전히 FSD는 아니지만 부분적으로 적용을 하고 있어요. 또한, 저희가 처음에는 생각 못했던 부분들이 많이 있어서, 예를 들면 DOCS도 필요하고 이슈 관리하는 것들도 필요해요. 이런 것들을 모노레포로 할 것인가, 멀티레포로 할 것인가 고민 중이에요. 회사가 커질 것 같아서, 완전히 커지기 전에 이런 구조를 잡으려고 합니다. Q: Product Engineer Camp(P.E.C)를 통해 어떤 변화를 경험하셨나요? A: PEC를 통해 가장 크게 바뀐 부분이 두 가지가 있어요. 개발적으로 하나랑, 태도적으로 하나요. 그 중에 하나가 사용자의 이야기를 듣는 것이 문제 해결의 출발점이라는 거였어요. 이게 정말 저에게 충격적이었거든요. 개발자다 보니까 소통을 못한다는 틀에 갇혀 있었는데, 이제는 그렇지 않다는 걸 깨달았어요. 사실 PEC 첫 1주차 수업을 들었을 때 바로 깨달은 건 아니에요. 듣고 나서 시간이 지나면서 자꾸 생각이 나더라고요. 그러다보니 캠프가 끝나고 현업에 돌아와서 앞으로 계획을 잡는 데 엄청 도움이 많이 됐습니다. Q: "무엇을 개발할지"를 계획할 때 P.E.C 가 어떻게 도움이 되었나요? A: 저희 회사에서 고객사분들께서 제품에 대한 피드백이나 개발 요구사항을 주시는 경우가 많이 있어요. 이 요구사항들을 처리할 때 기존에는 이슈로 등록하고 수정하는 것을 프로젝트 버그 수정 정도로만 생각했었어요.
  • PEC
❤️💟
3

P.E.C 참가자 후기

P.E.C 코치 소개

안녕하세요.
Product Engineer Camp 코치 Boaz 입니다.
창업을 경험하면서, 개발이 궁금해져 Software engineer 가 되었습니다.
다양한 조직(스타트업, 대기업)을 경험했습니다.
인터넷에서 도움 받은 은혜를 갚기 위해, 유튜브블로그를 운영하고 있습니다.

모집 정보

지원 자격

✅
실제 운영중인 서비스를 개발해 본 Frontend Engineer
✅
포트폴리오를 넘어, 실제 문제를 해결하는 Product 를 완성하고 싶은 분
✅
아래 진행 방식에 맞추어 참여 가능한 분

진행 방식

🚀
방식 : 팀 진행(피드백, 코드리뷰)
🖥️
온라인 정규 세션(주차별 과제 피드백, 코드리뷰, 강의), 실시간 Q&A 채널(디스코드) 제공
✏️
커리큘럼(주차별 주제)에 따른 주차별 과제 수행
💳
비용 : 200만원

8기 모집 일정

⛺
Camp 신청

4/6-13일
📝
서류 합격자

4월 14일
🧑‍💻
인터뷰 진행

4/19-20일
🎉
최종 합격자

4월 21일
📅
캠프 기간 : 2025년 5월 8일 - 6월 26일(8주)

선발 기준

📈
Product Engineer Camp 를 통해 가장 많이 성장할 것 같은 분

자주 묻는 질문들

한 기수에 몇 명이 함께 하나요?

👉
3명 ~ 4명이 함께 합니다. UX 팀 과제 는 줌에서 함께 진행합니다. 이후 코드 구현도 하나의 GitHub repo 에서 진행합니다.(효율적인 협업 경험을 위해)

해결할 실제 문제를 어떻게 정하나요?

👉
참가자 분들이 각자 생각한 아이디어를 모아서, 1주차 세션에서 투표로 결정합니다.

원할한 캠프를 위해, 일주일에 얼마나 시간을 투자하면 좋을까요?

👉
개인차가 있지만, 약 10시간 정도면 커리큘럼을 따라가는데 큰 무리가 없습니다. 다만, 상시 피드백이 가능하므로 시간을 많이 투자 할수록 얻는게 많아집니다.(20시간 이상 투자도 가능)