🛤️ 트랙 안내
기획
Frontend
Backend
DevSecOps
Artificial intelligence
Frontend
상태
모집중
🚀 안내 사항
모집 기간 중 합류 과정을 거쳐 합류가 결정된 분들에 한해 OT가 진행됩니다.
OT는 대면으로 진행되며, 반드시 참여해 주셔야하고, 장소는 합격자에 한 해 메일을 통해 알려 드립니다.
선행 학습이 필요하다고 판단되는 분들은 OT 진행 이후 필요한 내용을 1:1로 학습하며, 스터디 과정 이수를 위한 준비를 합니다.
선행 학습 기간 동안 아래 내용을 학습하고, 준비합니다.
•
가상화와 반가상화 이해와 사용법
•
개발 언어 및 프레임워크 학습
◦
JavaScript / TypeSciprt 기본 학습
◦
frontend 프레임워크 기본 학습
•
협업 컨벤션 및 품질 관리 (Quality & Git)
◦
혼자가 아닌 팀 단위의 운영을 위해 일관된 규칙을 세우고 지키는 방법
▪
Git 컨벤션: 브랜치 전략(Git Flow 기초), 커밋 메시지 규격화 등 협업을 위한 Git 활용 능력 확보
▪
코딩 컨벤션의 목적: '읽기 좋은 코드'가 운영 단계에서 장애 복구 시간을 얼마나 단축시키는지 이해
•
인프라 중심의 시큐어 코딩 및 보안 기초
◦
보안이 통합된 배포 를 위해 공격자의 시선에서 인프라 설계
▪
시큐어 코딩 (Secure Coding): 설정 파일 내 비밀번호 노출 방지(Environment Variables 관리) 등 인프라 설정 시의 보안 준칙 학습
▪
OWASP Top 10 기반 방어 기법: Injection, 취약한 인증 등 주요 보안 위협의 개념을 파악하고, 이를 시스템 레벨(방화벽, WAF 등)에서 어떻게 방어할지 고민
•
생성형 인공지능의 특징과 사용법
우리는 주제가 주어지면 각 단계별 안내를 해 드리고, 문제를 해결할 수 있도록 도와 드리는 걸 위주로 학습합니다.
우리 모임은 실제 환경에서 문제 해결을 토대로 학습하는 것을 목표로 합니다.
우리 모임은 실제 환경에서 문제 해결을 토대로 학습하는 것을 목표로 합니다.
☕️ 모임 장소
매월 토요일 한 주를 정해 오프라인 모임이 진행됩니다. (한달에 한번)
오프라인 모임은 반드시 참여해 주셔야 하며, 수도권에서 진행되니 이 점 참고 바랍니다.
오프라인 모임이 가능하신 분들만 지원해 주시기 바랍니다.
오프라인 모임은 반드시 참여해 주셔야 하며, 수도권에서 진행되니 이 점 참고 바랍니다.
오프라인 모임이 가능하신 분들만 지원해 주시기 바랍니다.
📚 커리큘럼
프론트엔드 개발에 필요한 설계·구현·성능·품질 관리 역량을 직접 체득하고, 생성형 AI와 협업하여 실제 운영 가능한 수준의 서비스를 완성합니다.
프론트엔드 트랙 핵심 요약
화면은 감각이 아니라 설계다.
프론트엔드는 구현자가 아니라 제품 이해자다.
프론트엔드는 구현자가 아니라 제품 이해자다.
👉 서비스 구조를 이해
👉 상태와 데이터 흐름을 설계
👉 성능·유지보수·협업까지 고려
실무형 프론트엔드 엔지니어 로 성장하는 것이 목표
⏱️ 전체 소요 기간 안내
본 커리큘럼은 참여자의 기본 지식 수준, 주당 학습 가능 시간 등에 따라 차이가 있어 정확한 기간을 고정하지 않습니다.
충분한 시간을 갖고, 제대로 학습하여 원하는 지식과 전문성을 갖기 위함입니다.
다만, 전체 과정을 충분히 소화할 경우 대략 3 ~ 6개월 내외 소요 예상됩니다.
충분한 시간을 갖고, 제대로 학습하여 원하는 지식과 전문성을 갖기 위함입니다.
다만, 전체 과정을 충분히 소화할 경우 대략 3 ~ 6개월 내외 소요 예상됩니다.
1. 서버 환경 이해 및 개발 환경 구성
프론트엔드 개발자라도 서비스가 어디서, 어떻게 동작하는지를 이해해야 합니다.
이 단계에서는 단순 로컬 개발을 넘어, 실제 서비스 환경을 이해합니다.
주요 학습 및 작업 내용
•
인프라 기초 개념 이해
◦
Bare Metal, VM, 컨테이너 개념
◦
Hypervisor 구조 이해
•
Linux 기반 서버 환경 이해
◦
Linux 기초
•
프론트엔드 관점에서의 서버 구조 이해
◦
웹 서버와 애플리케이션 서버 개념
◦
배포 환경 흐름 이해
•
CI/CD 개념 이해
◦
프론트엔드 배포 파이프라인 이해
•
모니터링 환경 개념 이해
◦
로그, 성능, 장애 관점에서의 서비스 이해
•
핵심 포인트
◦
내가 만든 코드가 실제 서비스에서 어떻게 배포되고 실행되는지를 명확히 이해합니다.
2. 생성형 AI를 활용한 설계 · 백엔드 팀 구성
생성형 AI를 단순 브라우져에서 프롬프트를 이용하여 사용하는 것이 아닌 역할을 분리하여 실제 팀원처럼 활용하는 단계입니다.
주요 학습 및 작업 내용
•
생성형 AI의 역할 정의
◦
서비스 기획 / 백엔드 / 테스터 역할 구분
•
프롬프트 설계
◦
사용자가 원하는 결과를 얻기 위한 요청 방식
•
협업 방식 설계
◦
사람이 판단해야 할 영역 vs AI에 맡길 영역 구분
•
개발 흐름 이해
◦
AI 기반 프로세스 이해
•
활용 도구 예시
◦
Cursor
◦
Claude CLI
◦
Gemini CLI 등
3. 프로젝트 준비
인공지능 기획팀을 활용하여 문제 정의를 진행합니다.
주요 학습 및 작업 내용
•
프로젝트 배경 분석
◦
시장/도메인 이해
◦
현재 상황(As-Is)과 목표(To-Be) 정의
•
문제 정의 (Problem Statement)
◦
사용자 문제 도출
◦
해결해야 할 핵심 Pain Point 정리
•
프로젝트 목표 설정
◦
정성·정량 목표 정의
◦
기대 효과 및 성공 기준 정의
•
범위 설정
◦
무엇을 하고 / 하지 않을지 명확히 구분
◦
MVP 범위 정의
•
이해관계자 정리
◦
사용자, 운영자, 관리자 등 역할 구분
•
산출물 예시
◦
문제 정의서
◦
프로젝트 개요 문서
◦
목표 및 성공 지표 정리 문서
4. 제품 요구사항(PRD) 이해 및 제작
인공지능 기획팀을 활용하여 아이디어를 제품 관점의 요구사항으로 구체화하는 단계입니다.
좋아 보인다가 아니라, 만들 수 있는 형태로 바꾸는 과정입니다.
주요 학습 및 작업 내용
•
사용자 정의
◦
페르소나 설정
◦
사용자 시나리오 작성
•
핵심 기능 정의
◦
필수 기능 vs 부가 기능 구분
◦
MVP 기준 기능 정리
•
사용자 흐름(User Flow) 설계
◦
주요 시나리오 흐름 정의
•
KPI 설정
◦
기능별 측정 지표 정의
•
경쟁 서비스 분석
◦
기능 비교
◦
차별 포인트 도출
•
SWOT 분석 및 시장 분석
•
리스크 및 제약 조건 정리
•
WBS(작업 분해 구조) 초안 작성
•
산출물 예시
◦
사용자 시나리오 & 사용자 흐름도
◦
기능 목록 및 우선순위 문서
5. 요구사항 분석 & 서비스 구조 설계
인공지능 기획팀을 활용하여 개발을 고려한 기획 단계를 진행합니다.
이걸 개발할 수 있을까?를 기준으로 요구사항을 재정리합니다.
주요 학습 및 작업 내용
•
요구사항 분석/설계
◦
기능 요구사항 / 비기능 요구사항 분리
•
정책 정의
◦
서비스 운영 정책
◦
권한, 상태, 예외 케이스 정의
•
데이터 설계 기초
◦
주요 데이터 항목 정의
◦
데이터 흐름 이해
•
도메인 용어 정리
◦
기획·개발 공통 언어 정리
•
화면 구조 설계
◦
화면 목록 정의
◦
화면 간 관계 정리
•
IA(Information Architecture) 설계
•
스토리보드 작성
◦
화면 단위 기능 설명
•
백엔드 관점 이해
◦
API 개념 이해
◦
프론트/백엔드 역할 구분 이해
•
산출물 예시
◦
요구사항 정의서
◦
정책 정의 문서
◦
IA 구조도
◦
스토리보드
6. 시스템 & 애플리케이션 구조 설계
인공지능 기획/백엔드 팀을 활용하여 서비스 전체 구조를 한 눈에 이해할 수 있도록 시각화합니다.
주요 학습 및 작업 내용
•
UML 기초 이해
◦
Use Case Diagram
◦
Sequence Diagram
◦
Class Diagram
•
ERD 설계
•
API 구조 이해
•
시스템 아키텍처 설계
•
애플리케이션 구성도 작성
•
산출물 예시
◦
UML 다이어그램
◦
ERD
◦
시스템 구성도
◦
API 구조 문서
7. 개발 및 배포
프론트엔드 엔지니어로서 가장 중요한 구현 단계입니다. 모바일과 웹 UI/UX 를 함께 만들어 봅니다.
API 개발은 인공지능 백엔드 개발팀을 활용하여 개발하고, 그 과정에서 API 개발이 어떻게 진행되는지와 코드 분석을 통해 학습하여 백엔드 개발 방법도 학습합니다.
주요 학습 및 작업 내용
•
품질 관리 (Code Quality)
◦
ESLint, Prettier, Husky를 활용한 코드 컨벤션 자동화 및 품질 일관성 유지.
•
멀티 플랫폼 상태 관리 및 데이터 설계
◦
Server State(TanStack Query, SWR)와 Client State(Zustand, Pinia 등)의 명확한 분리.
◦
복잡한 폼(Form) 데이터 처리 및 유효성 검사 로직 설계.
•
컴포넌트 및 비즈니스 로직 고도화
◦
재사용 가능한 공통 UI 컴포넌트 설계 (Headless UI 패턴 등).
◦
도메인 로직과 UI 로직을 분리하는 디자인 패턴 적용 (Custom Hooks, Composition API).
•
보안 및 인증/인가 (Front-end Security)
◦
안전한 인증 체계: JWT Refresh Token 처리 및 RTR 대응 로직 구현.
◦
보안 취약점 방어: XSS 방지를 위한 데이터 렌더링 관리 및 환경 변수(env) 관리 체계 구축.
•
웹/앱 접근성(Accessibility) 고려
◦
WAI-ARIA 기준 준수(웹) 및 스크린 리더 대응(모바일)으로 차별 없는 사용자 경험 제공.
•
로깅 방법론과 로그 수집
◦
Structured Logging: 사용자 행동 패턴 및 에러 분석을 위한 구조화된 로그 전송.
◦
에러 모니터링 도구(Sentry 등) 연동을 통한 실시간 장애 감지.
•
API 연동
•
운영 환경 구축 및 CI/CD
◦
Web 배포: Dockerizing을 통한 컨테이너 기반 배포.
◦
Mobile 배포: Fastlane을 활용한 앱스토어/플레이스토어 배포 자동화 및 CodePush 전략.
◦
환경별 구성 분리: Local, Dev, Staging, Prod 환경에 따른 API Endpoint 및 설정값 관리 자동화.
•
실제 운영 환경을 고려한 개발
◦
시큐어 코딩
◦
Unit Test: 비즈니스 로직 및 유틸리티 함수의 독립적 검증 (Jest, Vitest, Storybook 등 사용).
•
기술 스택
◦
TypeScript
◦
Mobile: React Native (RN) 또는 Flutter (택 1)
◦
Web: ReactJs/NextJs 혹은 VueJs/NuxtJs (택 1) 중심의 프론트엔드 스택
8. 테스트 및 성능 검증
인공지능 기획/백엔드 개발팀을 활용하여 완성된 서비스의 품질을 책임지는 단계입니다.
주요 학습 및 작업 내용
•
테스트 전략 수립
•
통합 테스트
◦
Integration/E2E Test: 웹(Playwright) 또는 모바일(Detox, Maestro) 환경에서의 핵심 사용자 시나리오 검증.
◦
성능 테스트
•
병목 구간 분석
•
운영 환경 기준 검증
•
장애 대응 역량
◦
Tracing & Monitoring: API 응답 속도 분포 분석 및 에러 발생 시 알림(Web hook/Email) 자동화.
•
문제 수정 및 개선
◦
성능 최적화 및 렌더링 전략
▪
Web: Core Web Vitals 지표 개선, Image/Font 최적화, SSR/SSG 전략 선택.
▪
Mobile: 리스트 렌더링 최적화, 메모리 누수 방지, 브릿지 통신 최적화.
•
핵심 포인트
◦
사용자가 느끼는 실제 속도와 서비스의 신뢰도를 결정짓는 품질 관리 단계입니다.
9. 취업 준비
스터디 활동이 끝나고, 취업/이직 준비중인 분들 중 희망자에게 포트폴리오 만드는 방법과 첨삭, 모의 면접 진행합니다.
주요 내용
•
실무자가 보기 좋은 포트폴리오 만들기
◦
스토리텔링
◦
포트폴리오 기반 면접 준비
•
모의 면접
◦
기술 면접
◦
인성 면접
✍🏻 지원 자격
공통 사항
•
규칙과 법규를 준수하고, 윤리 의식을 갖고 계신 분
•
도전적이고, 새로운 것에 대해 거부감 없는 분
•
포기하지 않고, 책임감을 갖고 공부에 임하실 분
•
모르는 걸 두려워하지 않고, 올바르게 질문하실 수 있는 분
•
공부한 내용을 정리하고, 공유하고, 발표하는 것에 거리낌이 없는 분
•
인공지능에 의존하지 않고, 도구로써 이용하려는 마음가짐을 갖으신 분
•
여러 활동에 제약이 없는 분
◦
학업 활동 중이지 않으신 분 (대학, 대학원, 국비지원, 부트캠프 등 졸업했거나 수료하신 분)
◦
공부 외 네트워킹 활동에 제약사항 없으신 분
•
현재 다른 모임이나, 국비 지원 등에서 공부하고 있지 않는 분
◦
사이드 프로젝트를 진행하고, 있거나 다른 스터디 혹은 모임에 활동 중이지 않는 분
•
공부를 위해 꾸준히 시간 투자가 가능하신 분
•
꾸준함의 중요성을 알고, 쉬지 않고 달려갈 수 있는 분
추가 사항
•
IT 개발자로서의 비전을 갖고 있는 분
•
창의적이고, 만들고 싶은 욕심이 많으신 분
•
문제 발생 시 혼자 해결해 보려고 노력하여 해결해 본 경험이 있으신 분
•
원하는 목표를 이루기 위해 어떤 상황도 감수할 수 있는 의지와 열정이 있으신 분