강의

멘토링

로드맵

[PROKIT] 바이브 코딩/프론트엔드 연습용 문제집: 필사앱 만들기

닙스(NYBS)

2026. 03. 24. 12:37

PROKIT_Pause.zip
ZIP

PROKIT_Pause.zip

19.3MB

프로킷(PROKIT)을 소개합니다 🔥

개발 프로젝트를 처음 하려고 해보면 어디서부터 시작해야 할지 막막합니다.

아이디어 준비, 기획 정리, 디자인 시안까지, 여러 요소를 고려해서 프로젝트를 진행하는 게 쉬운 일은 아니죠.

특별히, 상세한 기획에 근거해서 요구사항에 부합한 안정적인 개발을 연습하는 건 쉽지 않은 경험입니다.

그래서 프로킷(PROKIT) 💻 을 준비했습니다.

프로젝트 진행을 위한 비즈니스 배경, 기획 요구사항, Figma 시안, API 엔드포인트까지 제공해 드리니,

간접적으로 개발 프로젝트를 경험해보고 싶은 분들 주목해 주세요 👀




프로젝트 소개 ⏰

💡 로그인(인증/인가) 기능과 복잡한 권한 관리가 포함되지 않은 [초급] 프로젝트 미션입니다.

준비한 프로젝트 주제는 [PAUSE: 필사 앱 구현하기] 입니다.

마음 챙김을 위한 웹 필사 서비스, PAUSE를 구현해 보세요.

잘 정리된 기획, 디자인, (필요 시) API 엔드포인트까지 활용해 하나의 완성된 서비스를 구현할 수 있어요.

로, 이제 개발을 공부하고 있는 분들에게 적합한 과제입니다.

필사할 문장 세트 선택하기

다크모드 구현하기

필사 내용 작성하기

필사 환경 세팅 메뉴

모바일 뷰: 필사 선택

모바일 뷰: 필사 완료

모바일 뷰: 환경 설정

로컬 스토리지를 이용한 기록 관리, 클라이언트 타이핑 이벤트 정밀 제어,

브라우저 사이징에 따른 반응형 개발 등, 도전적인 요구 사항들이 표함되어 있어요.

Pause 애플리케이션을 직접 구현해보면서 다양한 개발 역량을 심화 학습해 보세요.

프로킷 구성 안내 🛠

프로젝트 기반의 학습을 할 수 있도록 필요한 자료를 제공합니다.


기획 요구사항 문서(PRD; Product Requirment Document)

Pause의 주요 기능에 대한 상세 요구사항을 정리해 뒀습니다.

자신의 생각대로, 또는 AI 에이전트가 만들어 준 대로 기능을 동작시키는 건 생각보다 어렵지 않을 수 있어요.

하지만, 실 서비스를 생각해서 유지보수와 확정성을 고려한 개발을 하려면,

잘 정리된 기획 요구사항에 부합한 안정적인 구현을 하는 게 중요해요.

제공해드린 기획 요구사항 문서의 내용을 따라 구현해보면서 한번 연습해 보세요 💪

(* 약 10페이지 분량의 기획 문서가 PDF 형태로 제공됩니다).

PRD: 기획 요구사항 예시 1

PRD: 기획 요구사항 예시 2


Figma 디자인 시안

직접 구현해야 할 UI 시안을 제공합니다.

구조화되고 사용성이 뛰어난 디자인 경험을 제공할 수 있도록 디자인 시스템이 적용돼 있어요.

시각적으로도 예쁜 프로젝트 결과물을 한번 만들어 보세요.

(* 디자인 시스템이 적용된 피그마 파일을 .fig 확장자 파일로 제공합니다. 각자의 개인 Figma 워크스페이스에 import해서 사용할 수 있습니다).

Figma: UI 디자인 확인하기

Figma: 디자인 시스템


API 엔드포인트

서비스 구현에 필요한 서버 구현 및 최소한의 실습용 Mock 데이터를 반영해 뒀어요.

서버를 자체 구현하지 않고 클라이언트 중심으로 개발을 진행하고 싶은 분들은 활용해 주세요.

(* API 엔드포인트 정보는 PRD 문서 뒷쪽에 함께 포함되어 있습니다).

API 엔드포인트 정보

이런 분들에게 추천해요 👍

프로킷은 완벽하진 않아도, 꽤 괜찮은 프로젝트 결과물과 문제 해결 경험을 만드는 데 도움을 드려요.

특별히, 잘 정돈된 기획 요구사항과 디자인 시안을 토대로

실 서비스를 고려한 프로젝트를 경험해보고 싶은 분들에게 도움을 드릴 수 있어요.

현재 아래와 같은 상황인 분들은 구매를 적극 고려해 보세요!

🙋‍♂️ 바이브 코딩 연습이 필요하신 분

  • AI로 코드는 만들지만, 구현 기준은 아직 막막한 분

  • 감으로 만들기보다, 잘 짜인 요구사항으로 연습하고 싶은 분

  • 기획서 + 디자인 + AI 협업 흐름을 경험해보고 싶은 분

  • AI가 만든 코드를 수정·보완하는 힘을 기르고 싶은 분

  • 즉흥 구현이 아닌, 서비스형 프로젝트 감각을 익히고 싶은 분

🙋🏼‍♀️ 프론트엔드 직접 구현 연습이 필요하신 분

  • 디자인 시안을 보고 직접 구현하는 연습이 필요한 분

  • 컴포넌트를 넘어 화면 전체 흐름까지 만들어보고 싶은 분

  • 기획을 읽고 화면으로 옮기는 구현 해석력을 키우고 싶은 분

  • 반응형·상태처리·인터랙션 등 실전 구현력을 점검하고 싶은 분

  • 포트폴리오 전에 잘 정리된 과제로 실전 연습을 해보고 싶은 분

PROKIT 자료집은 프로젝트 진행을 위한 별도의 교육 내용을 포함하고 있지 않아요.

아래 항목에 대해 사전 학습이 된 상태에서 프로젝트 과제에 도전해 주세요!

🙋‍♂️ 바이브 코딩으로 구현해보려는 분

  • Agent를 활용한 프로젝트 환경 설정에 대한 이해

  • AI에게 요청하고, 결과를 읽고, 다시 수정 요청하는 기본 프롬프팅 경험

  • 생성된 코드를 복붙하는 것을 넘어, 구조를 대략 해석할 수 있는 수준

  • VS Code, npm, 브라우저 개발자도구 등 기본 개발 환경 사용 경험

🙋🏼‍♀️ 프론트엔드 직접 구현을 해보려는 분

  • HTML / CSS / JavaScript로 기본 화면을 직접 만들어본 경험

  • React, Vue, Next.js 등과 같은 프론트엔드 프레임워크 기초 학습

  • 컴포넌트, props, state, 이벤트 처리 같은 기본 UI 개발 개념 이해

  • API 호출, 비동기 처리, JSON 데이터 구조에 대한 기초 이해

  • Git / GitHub, 패키지 설치, 로컬 실행 등 기본 프로젝트 실행 경험

잘 정리된 기획과 디자인이 있으면, 구현 연습도 훨씬 선명해집니다.
PROKIT으로 막연한 연습 말고, 실제 프로젝트에 가까운 구현을 직접 경험해보세요.
부담 없이 하나씩, 끝까지 구현하는 연습에 도전해보세요!


프로킷에 대한 기타 궁금한 사항이 있는 분들은 nybs.contact@gmail.com으로 문의 남겨주세요.

프로젝트의 세계에 오신 여러분들 다시 한 번 환영합니다 🐵