# AI시대, 대체불가한 프론트엔드 엔지니어가 되는 방법 ## 8주 동안 Camp 에서 AI와 함께 내 주변에 실제 문제를 해결하며 진짜 성장을 경험하세요 홈페이지를 이사했어요 🚀 (아래 버튼 눌러 방문 해주세요 🤗) [새로운 홈페이지 방문하기](https://www.productengineer.info/camp/landing) [Video](https://vz-127031db-d43.b-cdn.net/e3fc9253-db08-430a-8353-58d6e1619f11/playlist.m3u8) # 이런 분들에게 추천해요 > AI 와 효율적으로 협업하는 방법을 깊이 있게 배우고 싶은 분 > "좋은 프론트엔드 설계란 무엇인가?" 에 대해 고민하는 분 > 성장에 대한 나의 고민에 대해 피드백을 주고 받을 동료가 없는 분 # 어떤 것들을 경험할 수 있나요? > `정규 세션 & 개인과제`** ** UX 에 대한 깊은 이해를 통해, 기획과 설계가 AI 협업에서 중요한 이유를 발견합니다. > `팀과제 & 피드백 세션`** ** 팀과제, 피드백 세션을 통해 팀원과 서로 도움을 주고 받으며 함께 발전합니다. > `AI 협업 & 리뷰`** ** 설계를 기반으로 AI 와 협업하며, 그 과정과 결과물(코드)에 대해 리뷰를 받습니다. ### 정규 세션 라이브 세션에 참여하여 주차별 주제를 학습하고, 수행한 과제에 대해 피드백을 받습니다. ![ZOOM 세션 강의](https://upload.cafenono.com/image/slashpageHome/20240610/231152_owe2IBrVZwRqqS4wzC?q=75&s=1280x180&t=outside&f=webp) ### 코드 리뷰 기획에 기반하여 설계한 후 구현합니다. 이 과정에서 AI와 협업하는 방법과 결과물(코드)에 대해 리뷰합니다. ![멘토 코드리뷰](https://upload.cafenono.com/image/slashpageHome/20250118/194128_noIJ7gwDwxMS48mrxX?q=80&s=1280x180&t=outside&f=webp) ### 개인 과제 주차별 주제에 대해 각자 개인 과제를 진행합니다. 개인 과제를 통해 주제를 실습하며 경험합니다. ![UX framework 를 통해 F.E 설계 기반을 학습](https://upload.cafenono.com/image/slashpageHome/20240610/231402_st5wTAupYurvWXBm4A?q=75&s=1280x180&t=outside&f=webp) ### 피드백 세션 완성한 과제에 대해, 심화 피드백 세션을 추가로 진행하며 과제 완성도를 높입니다. ![과제에 대한 심화 피드백을 제공](https://upload.cafenono.com/image/slashpageHome/20240610/231123_yaevTrK1AApTGZzBxC?q=75&s=1280x180&t=outside&f=webp) ### 팀 과제 앞서 진행한 개인 과제를 바탕으로, 팀원과 함께 ZOOM 을 통해 의견을 나누며 과제를 완성합니다. ![함께 완성하는 팀 과제](https://upload.cafenono.com/image/slashpageHome/20240611/105525_WEyFqwwIpxTyNcZ9KO?q=75&s=1280x180&t=outside&f=webp) ### 실시간 질문 Discord 로 세션과 과제에 대해 실시간으로 질문하며, 이를 토대로 깊이 있게 학습합니다. ![Dicord 로 피드백 및 실시간 Q&A](https://upload.cafenono.com/image/slashpageHome/20240611/105234_EaIGveaiPb203onS80?q=75&s=1280x180&t=outside&f=webp) ## 제공하는 것들 ### 세션 가이드 주차별 세션 주제 상세 설명, 과제 진행 방법 관한 세션 가이드 파일을 제공합니다. ![2주차 세션 가이드 파일(pdf)](https://upload.cafenono.com/image/slashpageHome/20240611/094947_iKM6wOsUggulITUoCF?q=75&s=1280x180&t=outside&f=webp) ### F.S.D 보일러플레이트 기획 기반 설계를 이해하기 쉽게, F.S.D 보일러플레이트를 제공합니다.([F.S.D 가 궁금하다면?](https://feature-sliced.design/)) ![F.S.D 보일러플레이트 github repository](https://upload.cafenono.com/image/slashpageHome/20250131/120424_3XSpzS0a7v2j3vbtzK?q=80&s=1280x180&t=outside&f=webp) ### UX framework 템플릿 좋은 설계란 무엇인지에 대해 이해를 돕기 위해 제작 framework 템플릿을 제공합니다. ![(개인과제와 동일)자체 제작한 UX framework 템플릿](https://upload.cafenono.com/image/slashpageHome/20240610/231402_st5wTAupYurvWXBm4A?q=75&s=1280x180&t=outside&f=webp) ### 세션 녹화 영상 정규 세션과 피드백 세션에 대한 녹화 영상을 제공하여, 복습을 통해 이해도를 높일 수 있도록 돕습니다. ![(피드백 세션과 동일)피드백 세션 녹화 영상](https://upload.cafenono.com/image/slashpageHome/20240610/231123_yaevTrK1AApTGZzBxC?q=75&s=1280x180&t=outside&f=webp) ## 함께 다룰 기술들 ![Nextjs](https://upload.cafenono.com/image/slashpageHome/20240520/102306_IKPWC78aX4maDk6HQf?q=75&s=1280x180&t=outside&f=webp) ![Cursor(AI editor)](https://upload.cafenono.com/image/slashpageHome/20250205/114802_aeHosCElgvgGIhLVhd?q=80&s=1280x180&t=outside&f=webp) ![Feature Sliced Design](https://upload.cafenono.com/image/slashpageHome/20240520/110738_JWK4H4MJmL4OXRVOhD?q=75&s=1280x180&t=outside&f=webp) ![Supabase](https://upload.cafenono.com/image/slashpageHome/20250131/121401_Ifm4XqcrsRBfL0tmQj?q=80&s=1280x180&t=outside&f=webp) # P.E.C 주간 일정 ![Image](https://upload.cafenono.com/image/slashpageHome/20240611/105041_AfAnGEFCvCmYqqvqC4?q=75&s=1280x180&t=outside&f=webp) ### 정규 세션 주 1회 100분 동안 진행하는 ZOOM 라이브 세션에 참여합니다. (팀 과제 피드백 + 주제 세션) ### 개인 과제 금요일부터 주말을 활용해 개인 과제를 진행합니다.(discord 에서 질문하실 수 있습니다.) ### 피드백 세션 개인 과제를 완성하면, 월요일에 피드백 세션을 통해 멘토와 함께 과제를 개선합니다. ### 팀 과제 개선한 개인 과제를 토대로, 팀원과 함께 ZOOM 에서 의견을 나누며 팀 과제를 완성합니다. # P.E.C 주차별 주제 # 💬 ****`1주차`** 문제 정의** 사용자의 관점을 이해하고 문제를 명확히 정의합니다. # 🗃️ `2주차`** Information flow** 서비스의 전반적인 흐름을 이해하고, 사용자의 패턴을 파악합니다. # 💡 `3주차`** 서비스 구체화** 실제 서비스를 개발하기 위해 필요한 정보들을 구체화합니다. # ✍️ `4주차`** 애플리케이션 설계(F.S.D)** 구체화한 개념들을 활용하여 변화에 대응이 쉽도록 설계합니다. # 🧑‍💻 `5-6주차`** Clean F.S.D** 개선된 F.S.D 를 토대로, AI 와 효율적으로 협업하는 방법을 배웁니다. # 🤖 `7-8주차`** AI 와 협업(Cursor)** 상태(데이터) 설계의 기준을 배웁니다. AI 와 함께 전체를 구현합니다. ## 주제 상세 ### `1주차`** **💬 **문제 정의**  AI 와 협업할 때 정확한 방향을 알려주려면, 문제를 명확히 정의해야 합니다. 이를 위해 직접 사용자와 대화하고 팀원들과 Persona 를 완성합니다. - `Empathize`**:** 사용자의 필요와 문제, 목표, 행동, 생각, 감정 등을 파악하려고 노력합니다. 이를 위해 사용자 인터뷰를 합니다. 사용자의 실제 경험과 문제를 사용자 인터뷰를 통해 깊이 이해하는, 나아가 사용자의 관점에서 문제를 바라보는 연습을 합니다. 사용자 인터뷰 질문지 작성 요령을 배웁니다. - `Define`**:** 사용자 인터뷰 결과를 바탕으로 페르소나를 작성합니다. 이 과정을 통해 문제를 명확히 정의합니다. ### 과제 `사용자 인터뷰` 사용자 인터뷰 질문지 작성법을 토대로, 질문지를 완성합니다. 3명의 사용자를 인터뷰 진행합니다. `Persona` 사용자 인터뷰 내용을 기반으로 framework 를 활용하여 Persona 를 구체화 합니다. ![Image](https://upload.cafenono.com/image/slashpageHome/20240520/120012_QgDKc5B8Rg21pknKd6?q=75&s=1280x180&t=outside&f=webp) ### `2주차`** **🗃️ **Information flow** AI 에게 일관된 방향을 알려주기 위해, 서비스의 흐름을 정리해야 합니다. 이를 위해 서비스 내 핵심적인 정보의 흐름과, 이에 따른 사용자의 패턴을 파악합니다. ### 과제 ![Image](https://upload.cafenono.com/image/slashpageHome/20240520/121130_UzPSAXkY6Ce25GkWw2?q=75&s=1280x180&t=outside&f=webp) `Service Flow `서비스의 전체적인 흐름을 이해하고 시각화합니다. 서비스가 어떻게 작동하는지를 나타냅니다. ![Image](https://upload.cafenono.com/image/slashpageHome/20240520/121235_BRcU3vR0tbFxzsumZz?q=75&s=1280x180&t=outside&f=webp) `Information Mind Map `서비스의 정보 구조를 시각화하는 도구입니다. 이를 통해 서비스의 다양한 정보와 관계를 파악합니다. ![Image](https://upload.cafenono.com/image/slashpageHome/20240520/121358_u4gC0Tw39aJP5oLBg4?q=75&s=1280x180&t=outside&f=webp) `User Workflow`  사용자가 목표를 달성하기 위한 단계를 나타냅니다. 사용자행동 패턴을 이해합니다. ### `3주차`** **💡 **서비스 구체화** AI 가 더 좋은 퀄리티의 코드를 완성하려면, 구체적인 지시가 필요합니다. 이를 위해 실제 서비스를 구현할 때 필요한 정보들을 구체화합니다. ### 과제 ![Image](https://upload.cafenono.com/image/slashpageHome/20250207/000952_uvIcE9pZuGePv1q3BI?q=80&s=1280x180&t=outside&f=webp) `Service Process` 서비스가 어떻게 제공되는지를 단계별로 설명합니다. 서비스 과정에서 발생할 수 있는 문제를 미리 파악합니다. ![Image](https://upload.cafenono.com/image/slashpageHome/20250207/000957_AQW1vA14ufiMrKq9LW?q=80&s=1280x180&t=outside&f=webp) `Information Architecture` 서비스 주요 기능을 나열하며 서비스 구조를 분석합니다. 사용자가 필요한 정보나 기능을 쉽게 찾도록 돕습니다. ![Image](https://upload.cafenono.com/image/slashpageHome/20250207/001015_sjw1OpLmGWI3tvR7fJ?q=80&s=1280x180&t=outside&f=webp) `Site Map` 웹사이트 페이지 구조를 나타냅니다. 페이지 사이 관계를 이해하고, 사용자 웹사이트 탐색 방법을 설계합니다. ### `4주차`** **✍️ **애플리케이션 설계(F.S.D)** AI 가 작성하는 코드에 우리 의도를 더욱 반영하려면, 자세한 구현 방법을 전달해야 합니다. 이를 위해, 구체화한 정보와 개념을 활용하여 리액트 컴포넌트와 상태를 설계합니다.(기존 F.S.D 활용) ![Image](https://upload.cafenono.com/image/slashpageHome/20250207/093956_iwAuVVaiuOP3OCN77O?q=80&s=1280x180&t=outside&f=webp) - 컴포넌트 설계 - `컴포넌트 계층 구조 설계`: 서비스 플로우, 사이트 맵, 페이지 플로우를 토대로, 기능 중심으로 컴포넌트 계층 구조를 설계합니다. (UX framework 결과물이 F.S.D 와 어떻게 연관되는지 학습합니다.) ### 과제 - `wireframe`: 화면 단위 설계도로, 대략적인 컴포넌트의 레이아웃을 표현합니다. - `컴포넌트 설계`: 컴포넌트 구조에 대해 정규 세션을 통해 학습한 기준을 토대로 설계합니다. 레포지토리 생성 후, 결과물을 기반으로 폴더 구조를 완성 합니다. ### `5주차` 🧑‍💻 Clean F.S.D 기존 F.S.D 가 갖고 있는 한계에 대해 알아봅니다. 이어서 이러한 한계를 극복한 새로운 F.S.D(Clean F.S.D)에 대해 배우고, 이를 적용하여 기존의 컴포넌트 설계를 개선합니다. - 개선된 F.S.D - `CQRS 원칙`: Command Query Responsibility Segrigation 으로 쓰기와 읽기의 책임을 분리하는 원칙에 대해 알아봅니다. 이를 활용하여 F.S.D 를 어떻게 개선하는지 경험합니다. ### 과제 - `수정된 폴더구조`: 기존 폴더구조를 Clean F.S.D 원칙을 적용해서 수정합니다. - `전체(컴포넌트, 상태) 구현`: 생성한 레포지토리에 코드를 구현합니다. 코드 리뷰를 주고 받으며 구현한 코드를 개선합니다. 동시에 설계를 보완해야 할 부분을 발견한다면, 피드백을 반영하여 보완합니다. ### `6-7주차`** **🤖 AI 와 협업(Cursor) ![Image](https://upload.cafenono.com/image/slashpageHome/20250209/204521_5slYEMYIqCHycJZMaB?q=80&s=1280x180&t=outside&f=webp) 앞서 완성한 과제를 바탕으로, AI 와 효율적으로 협업하는 방법을 배웁니다. - `효율적인 AI 협업 방식`: AI 를 어떻게 대해야 하는지에 대해 기준을 세웁니다. 이 기준을 바탕으로 AI 와 효율적으로 협업하기 위해 필요한 배경 지식을 학습합니다. - `AI 에디터 고급 기능 활용`: 반복되는 작업 명령을 rule 파일 등으로 작성하며 효과적인 프롬프트를 작성하는 방법을 학습합니다. 또한 이를 활용하여 효율적으로 AI 와 협업하기 위해 필요한, 근본적인 능력이 무엇인지 함께 정의합니다. ### 과제 - `AI 협업으로 내가 맡은 기능 구현`: 설계를 바탕으로 프롬프팅 하여 AI 와 협업하는 연습을 합니다. 이를 통해 서비스 기능을 효율적으로 구현합니다. ### `8주차`** **📱 Demo day ![Image](https://upload.cafenono.com/image/slashpageHome/20250209/204521_5slYEMYIqCHycJZMaB?q=80&s=1280x180&t=outside&f=webp) 완성된 Application 을 발표합니다. 이후 실 서비스를 위한 사업 방향성 및 마케팅에 대한 피드백을 받습니다. - `기수별 피드백`: Camp 를 통해 완성한 Application 을 - `Application 마케팅 노하우`: 실제 Application 을 사용자들에게 알리기 위해 효과적인 방법이 무엇인지 경험적으로 학습합니다. ### 과제 - `AI 협업으로 내가 맡은 기능 구현`: 설계를 바탕으로 프롬프팅 하여 AI 와 협업하는 연습을 합니다. 이를 통해 서비스 기능을 효율적으로 구현합니다. # P.E.C 참가자 인터뷰 [https://slashpage.com/pec/d367nxm34wv132j98pv1](https://slashpage.com/pec/d367nxm34wv132j98pv1) # P.E.C 참가자 후기 [프로덕트 엔지니어로 성장하기](https://yooveloper.dev/2025/%ED%94%84%EB%A1%9C%EB%8D%95%ED%8A%B8-%EC%97%94%EC%A7%80%EB%8B%88%EC%96%B4%EB%A1%9C-%EC%84%B1%EC%9E%A5%ED%95%98%EA%B8%B0) [회사일만 열심히했는데, 뒤돌아 보니 남은것들...(a.k.a PEC 신청계기)](https://velog.io/@gahui_dev/PEC-%EC%B0%B8%EC%97%AC-%EA%B3%84%EA%B8%B0#product-engineer-vs-project-engineer) [P.E.C 캠프 ) 데이터의 관점에서 FSD와 Next.js 결합해보기](https://happhee-dev.tistory.com/51) [Product Engineer가 되어보자 - PEC 6기 후기(1)](https://velog.io/@cham0287/Product-Engineer%EA%B0%80-%EB%90%98%EC%96%B4%EB%B3%B4%EC%9E%90-PEC-6%EA%B8%B0-%ED%9B%84%EA%B8%B01) [Product Engineer Camp - 누군가를 돕는 근본적인 방법을 알려주는 캠프](https://blog.naver.com/goawmfhfl1/223421519442) [[PEC] 1주차 세션 돌아보기](https://imnotadevleoper.tistory.com/entry/PEC-1%EC%A3%BC%EC%B0%A8-%EC%84%B8%EC%85%98-%EB%8F%8C%EC%95%84%EB%B3%B4%EA%B8%B0) [Product Engineer Camp 1주차 세션 회고](https://velog.io/@dngur9801/Product-Engineer-Camp-1%EC%A3%BC%EC%B0%A8-%EC%84%B8%EC%85%98-%ED%9A%8C%EA%B3%A0) [https://medium.com/@bytrustu/%EC%82%AC%EC%9A%A9%EC%9E%90-%EC%9D%B8%ED%84%B0%EB%B7%B0%EB%A1%9C-%EA%B7%B8%EB%A0%A4%EB%82%B8-%EB%AC%B8%EC%A0%9C%EC%A0%95%EC%9D%98-7880d4e96fb0](https://medium.com/@bytrustu/%EC%82%AC%EC%9A%A9%EC%9E%90-%EC%9D%B8%ED%84%B0%EB%B7%B0%EB%A1%9C-%EA%B7%B8%EB%A0%A4%EB%82%B8-%EB%AC%B8%EC%A0%9C%EC%A0%95%EC%9D%98-7880d4e96fb0) [인터뷰 진행](https://turtle601.tistory.com/8) [[Product Engineer Camp] 1주차 문제 정의](https://velog.io/@choidh/Product-Engineer-Camp-1%EC%A3%BC%EC%B0%A8) # P.E.C 코치 소개 ![Image](https://upload.cafenono.com/image/slashpageHome/20240611/110219_ze09CjsV1BHwuh3OIM?q=75&s=1280x180&t=outside&f=webp) 안녕하세요. `Product Engineer Camp`** ** 코치 **Boaz** 입니다. **창업을 경험**하면서, 개발이 궁금해져 Software engineer 가 되었습니다. 다양한 조직(스타트업, 대기업)을 경험했습니다. 인터넷에서 도움 받은 은혜를 갚기 위해, **유튜브**와 **블로그**를 운영하고 있습니다. [👉 자세한 코치 소개](https://slashpage.com/pec/mentor) [https://www.youtube.com/@withBoaz](https://www.youtube.com/@withBoaz) [https://www.linkedin.com/in/boaz-hwang/](https://www.linkedin.com/in/boaz-hwang/) [https://boaz-hwang.ghost.io/](https://boaz-hwang.ghost.io/) # 모집 정보 ## 지원 자격 > 실제 운영중인 서비스를 개발해 본 Frontend Engineer > 포트폴리오를 넘어, 실제 문제를 해결하는 Product 를 완성하고 싶은 분 > 아래 진행 방식에 맞추어 참여 가능한 분 ## 진행 방식 > 방식 : 팀 진행(피드백, 코드리뷰) > 온라인 정규 세션(주차별 과제 피드백, 코드리뷰, 강의), 실시간 Q&A 채널(디스코드) 제공 > 커리큘럼(주차별 주제)에 따른 주차별 과제 수행 > 비용 : 200만원 ## 모집 일정 > Camp 신청 10/11-19일 > 서류 합격자 10월 20일 > 인터뷰 진행 10/11-20일 > 최종 합격자 10월 25일 > 캠프 기간 : 2025년 11월 6일 - 12월 26일(8주) ## 선발 기준 > Product Engineer Camp 를 통해 가장 많이 성장할 것 같은 분 # 자주 묻는 질문들 ### 한 기수에 몇 명이 함께 하나요? > 총 6명이 2팀(3명씩)으로 함께 합니다. `UX 팀 과제` 는 줌에서 함께 진행합니다. 이후 `코드 구현`도 하나의 GitHub repo 에서 진행합니다.(효율적인 협업 경험을 위해) ### 해결할 실제 문제를 어떻게 정하나요? > 참가자 분들이 `각자 생각한 아이디어`를 모아서, 1주차 세션에서 투표로 결정합니다. ### 원할한 캠프를 위해, 일주일에 얼마나 시간을 투자하면 좋을까요? > 개인차가 있지만, 약 10시간 정도면 커리큘럼을 따라가는데 큰 무리가 없습니다. 다만, 상시 피드백이 가능하므로 `시간을 많이 투자 할수록 얻는게 많아집니다.`(20시간 이상 투자도 가능) [https://slashpage.com/pec/93nzyxmd97gd62wk6r45](https://slashpage.com/pec/93nzyxmd97gd62wk6r45) [https://slashpage.com/pec/qrx6zk25ygr642v314y5](https://slashpage.com/pec/qrx6zk25ygr642v314y5) [https://slashpage.com/pec/y9e1xp2x4kyg327k35vz](https://slashpage.com/pec/y9e1xp2x4kyg327k35vz) [https://slashpage.com/pec/3p4kj92ygvyr8257q1x8](https://slashpage.com/pec/3p4kj92ygvyr8257q1x8) [https://slashpage.com/pec/dk58wg2ejjep6mnqevxz](https://slashpage.com/pec/dk58wg2ejjep6mnqevxz) --- 상호명: 마중물 | 대표: 황경찬 사업자등록번호: 264-01-01901 정보통신업 주소: 경기도 광주시 회안대로 350-23 문의: hkc7180@gmail.com Copyright© PEC []() [https://slashpage.com/pec/91kwev26rj8wp2y46jpg](https://slashpage.com/pec/91kwev26rj8wp2y46jpg) [https://slashpage.com/pec/qrx6zk25y68832v314y5](https://slashpage.com/pec/qrx6zk25y68832v314y5) 새로운 홈페이지 방문하기 ## Pages - [AI시대, 대체불가한 프론트엔드 엔지니어가 되는 방법](https://slashpage.com/pec) - [P.E.C 참가자 인터뷰](https://slashpage.com/pec/d367nxm34wv132j98pv1) - [Product Engineer 가 미래다?!](https://slashpage.com/pec/product-engineer) - [Product Engineer Camp 멘토 소개](https://slashpage.com/pec/mentor) - [Product Engineer Camp 커리큘럼](https://slashpage.com/pec/curriculum) - [FE 성장 고민 해결](https://slashpage.com/pec/contents) - [실시간 문의 ](https://slashpage.com/pec/dk58wg2ejjep6mnqevxz) - [개인정보 처리방침](https://slashpage.com/pec/privacy-policy) - [이용약관](https://slashpage.com/pec/terms-of-use) - [🧑‍💻 Product Engineer Careers](https://slashpage.com/pec/jobs) - [💡 Product Engineer Insights](https://slashpage.com/pec/insights)