웹 개발 배우기
웹 개발 배우기 — HTML부터 React까지, 라이브 미리보기로 배우는 프론트엔드 개발
웹 개발 배우기는 웹 개발자가 되고 싶은 초보자, 디자이너, 커리어 전환자를 위한 무료 iOS 및 Android 앱이에요. 라이브 편집기에서 HTML, CSS, JavaScript를 나란히 확인할 수 있고, 입력하는 대로 아래 페이지가 업데이트돼요. 41개 코스와 163개의 짧은 레슨을 통해 첫 태그부터 반응형 레이아웃, TypeScript, React, Vue까지 배울 수 있으며, 20개의 가이드 프로젝트와 디버깅 미션, 그리고 찾기 어려운 버그를 해결해 주는 AI 멘토도 제공해요.
- 가격
- 무료, Pro 업그레이드
- 플랫폼
- iOS 및 Android
- 언어
- 22
- 연령 등급
- 4+
- 필요 사항
- iOS 15.1 이상
한 줄을 바꾸고 페이지가 바뀌는 모습을 확인해 보세요.
편집기에는 HTML, CSS, JavaScript 패널이 나란히 표시되고 아래에 라이브 미리보기가 나타나요. 마크업, 스타일링, 동작을 서로 분리된 세 과목이 아니라 하나의 페이지를 만들며 함께 배울 수 있어요.
어떤 앱인가요
웹 개발 배우기는 휴대폰에서 라이브 HTML, CSS, JavaScript 편집기를 사용해 프론트엔드 개발, 즉 사람들이 웹사이트에서 보고 조작하는 부분을 가르치는 무료 iOS 및 Android 앱이에요. 초급부터 시니어 수준까지 단계별로 구성된 41개 코스와 163개 레슨을 제공하며, 웹 기초, 반응형 레이아웃, JavaScript와 DOM, TypeScript, React, Vue, 테스트, 접근성, 성능을 다뤄요. 또한 가이드 프로젝트, 디버깅 미션, 면접 질문, AI 멘토도 제공해요.
앱 내부 살펴보기
화면은 어떻게 보이나요
강좌
frontend course에서 배우는 내용
앱 자체의 강좌 목록에서 가져온 41 courses와 163 lessons로, 첫 HTML 태그부터 frontend architecture와 senior-level engineering까지 다뤄요.
웹과 세 가지 기본 요소
Frontend Development 입문, 웹 작동 원리, HTML Fundamentals, CSS Fundamentals, JavaScript Essentials를 배워요.
레이아웃과 반응형 디자인
Responsive Design Foundations, HTML Forms and Semantic Markup, CSS Layout Mastery, CSS Variables, Transitions and Animations를 배워요.
브라우저에서 실행되는 JavaScript
DOM과 Browser APIs, Arrays, Objects and ES6+, Async Programming, JavaScript Modules and Build Tools를 배워요.
워크플로와 도구
Developer Tools and Workflow, Git and Collaboration Workflow, Modern Frontend Tooling을 배워요.
TypeScript
TypeScript Introduction, Types and Interfaces Deep Dive, Advanced TypeScript for Frontend를 배워요.
React와 Vue
React Fundamentals, useEffect and Data Fetching, Advanced Hooks and Patterns를 배운 다음, Vue 3 Fundamentals, Composition API, Vue Advanced Patterns를 배워요.
데이터, 렌더링, 실시간 기능
State Management, API Integration and REST, Next.js와 Nuxt 3를 활용한 Server-Side Rendering, Progressive Web Apps, WebSockets and Real-time Frontend를 다뤄요.
품질과 아키텍처
Accessibility, Frontend Testing, Web Performance Optimization, Frontend Security, CSS Architecture, Design Systems, Frontend CI/CD, Senior Frontend Engineering을 다뤄요.
어떻게 작동하나요
이 앱으로 배우는 방법
앱의 순서는 개발 작업의 순서를 따라가요. 먼저 페이지를 만들고, 그다음 동작하게 만든 뒤, 규모를 확장할 수 있는 도구를 배워요.
무료 첫 코스로 시작하세요
Welcome to Frontend Development에서 학습을 시작할 수 있고, 라이브 편집기는 처음부터 무료로 사용할 수 있어요. 각 레슨은 몇 분간의 설명을 들은 다음 직접 변경하고 실행해 보는 방식으로 진행돼요.
패널을 편집하고 미리보기를 확인하세요
HTML, CSS 또는 JavaScript를 변경하면 아래 미리보기도 그에 맞춰 바뀌어요. 새 프로젝트는 HTML, React, Vue, Angular, Node 또는 TypeScript 템플릿으로 시작할 수 있어요.
프로젝트를 만들고 실제 버그를 해결하세요
20개의 가이드 프로젝트에서 레시피 페이지, 연락처 폼, 카드 그리드, 내비게이션 바, 데이터 테이블을 단계별로 만들 수 있어요. 15개의 디버깅 미션에서는 직접 고쳐야 하는 문제가 있는 페이지가 제공돼요.
무엇이 들어 있나요
앱에 포함된 내용
41
초급부터 시니어 수준까지의 코스
웹의 작동 방식과 HTML 기초부터 TypeScript, React, Vue 3, 상태 관리, Next.js와 Nuxt 3를 활용한 서버 사이드 렌더링, 프로그레시브 웹 앱까지 A1부터 C2로 단계별 구성된 163개의 레슨을 제공해요.
라이브
즉시 미리보기가 제공되는 편집기
HTML, CSS, JavaScript 패널과 그 아래에 표시되는 미리보기를 제공해 변경 사항을 즉시 확인할 수 있어요. 여러 프레임워크 템플릿으로 새 프로젝트를 시작할 수 있어요.
15
디버깅 미션
실제 프론트엔드 문제를 바탕으로 만든 미션이에요. 375 pixels에서 깨지는 레이아웃, 페이지를 느리게 만드는 이미지, 키보드로 접근할 수 없는 폼, 컴포넌트의 메모리 누수, 로컬에서는 통과하지만 CI에서는 실패하는 테스트 등을 다뤄요.
20
가이드 프로젝트
레시피 페이지, 연락처 폼, 카드 그리드, 내비게이션 바, 데이터 테이블 등을 한 단계씩 설명하며 작은 프로젝트를 완성해요.
AI
AI 멘토와 플레이그라운드
오류, 레슨, 직접 작성한 코드에 대해 질문하거나, AI 플레이그라운드에서 페이지를 설명하고 코드가 작성되는 모습을 확인할 수 있어요. 무료 사용자는 하루에 AI 질문을 세 번 할 수 있어요.
50
답변이 함께 제공되는 면접 질문
답변이 포함된 프론트엔드 및 웹 개발자 면접 질문 50개를 제공해요. 문법과 패턴을 정리한 83개 항목의 치트 시트와 열어 직접 편집할 수 있는 짧은 예제 모음도 함께 제공돼요.
배경
프론트엔드 개발자는 실제로 무엇을, 어떤 순서로 배울까요?
프론트엔드 개발자는 브라우저에서 실행되는 것을 만들어요. 페이지의 구조부터 모든 화면 크기에서의 모습, 사용자가 클릭하거나 입력하거나 스크롤할 때의 반응까지 다뤄요. 가장 합리적인 순서는 먼저 구조(HTML)를 배우고, 그다음 표현(CSS), 이후 동작(JavaScript)을 익힌 다음, 대규모 프로젝트를 체계적으로 관리하는 도구인 TypeScript, React나 Vue 같은 프레임워크, 테스트, 빌드 단계를 배우는 거예요. 세 가지 기초를 익히기 전에 프레임워크로 건너뛰면 초보자가 막히기 쉬워요. 프레임워크는 대부분 일반적인 JavaScript와 DOM을 자체 문법 뒤에 감추는 역할을 하기 때문이에요.
시맨틱 HTML겉모습보다 의미를 먼저
콘텐츠가 무엇인지에 맞춰 제목, 목록, 폼 레이블, 버튼을 선택하고 단순히 어떻게 보여야 하는지를 기준으로 고르지 않으면, 스크린 리더와 검색 엔진, 키보드가 활용할 수 있는 구조가 만들어져요. 또한 어떤 페이지에서든 가장 적은 비용으로 얻을 수 있는 접근성 개선 효과이기도 해요.
반응형 레이아웃하나의 페이지, 모든 화면
Flexbox, grid, 미디어 쿼리를 사용하면 하나의 레이아웃이 좁은 휴대폰 화면부터 넓은 모니터까지 스스로 재배치돼요. 375 pixels처럼 작은 너비에서 일찍 테스트하면 나중에 수정하기 고통스러운 레이아웃 버그를 발견할 수 있어요.
DOM살아 있는 객체로서의 페이지
브라우저는 HTML을 JavaScript가 읽고 변경할 수 있는 객체 트리로 변환해요. 모든 프레임워크는 결국 이 트리를 편리하게 업데이트하는 방법이므로, DOM을 이해하면 React와 Vue도 훨씬 쉽게 파악할 수 있어요.
Core Web Vitals와 성능사람이 체감하는 속도
최적화되지 않은 큰 이미지가 늦게 로드되거나 로딩 중 화면이 이동하면, 코드가 올바르더라도 페이지는 느리게 느껴져요. 실제 페이지와 실제 이미지가 사용될 때 비로소 드러나는 기술이 바로 성능 최적화예요.
나에게 잘 맞는지
누구에게 적합하고, 누구에게는 적합하지 않은지
다음과 같은 분께 잘 맞아요
- 웹 개발자가 되고 싶고 완전 초보로 시작하는 분
- 직접 디자인한 페이지를 만들고 싶은 디자이너
- HTML과 CSS를 조금 알고 JavaScript, TypeScript, React 또는 Vue를 더 배우고 싶은 분
- 첫 frontend 면접을 준비하며 질문과 답변을 원하는 분
- 긴 설명을 읽기보다 입력하는 즉시 페이지가 바뀌는 모습을 보고 싶은 분
다음과 같은 경우에는 적합하지 않아요
- 노트북과 전체 기능을 갖춘 편집기가 여전히 필요한, 여러 파일로 구성된 큰 사이트를 만들고 배포해야 하는 분
- 모든 것을 무료로 이용할 수 있기를 기대하는 분: 첫 번째 강좌, 첫 번째 프로젝트, 두 개의 디버깅 미션과 편집기는 무료이며 Pro로 나머지 콘텐츠를 이용할 수 있어요.
- 이 학습 경로는 브라우저에서 실행되는 내용을 다루므로 backend 또는 database 강좌를 원하는 분
- 이미 senior frontend engineer로 일하고 있으며 강의보다 참고 자료를 원하는 분
질문
자주 묻는 질문
frontend development란 무엇인가요?
frontend development는 브라우저에서 실행되는 웹사이트 또는 웹 앱의 부분을 만드는 일이에요. HTML로 구조를 만들고, CSS로 모양을 정하고, JavaScript로 동작을 구현하며, 여기에 기반한 프레임워크와 도구도 포함해요. 웹 개발 배우기는 이 기술 스택을 그 순서대로 가르치고, 실시간 미리보기를 제공해 변경 사항을 바로 확인할 수 있어요.
휴대폰으로 frontend development를 배울 수 있나요?
HTML, CSS, JavaScript는 짧은 시간에도 편집할 수 있을 만큼 작고, 미리보기에서 결과를 즉시 보여주기 때문에 개념과 첫 페이지는 휴대폰으로도 충분히 배울 수 있어요. 앱은 세 개의 창과 실시간 미리보기를 한 화면에 보여줘요. 파일이 많은 큰 프로젝트를 관리할 때는 노트북이 더 편하지만, 시작하는 데 노트북이 필요하지는 않아요.
누구에게 적합하며, 완전 초보자는 어디서 시작해야 하나요?
완전 초보자, 자신이 디자인한 것을 직접 만들고 싶은 디자이너, HTML과 CSS를 조금 아는 개발자, 첫 frontend 직무를 준비하는 커리어 전환자에게 적합해요. 웹 작동 원리와 기본 HTML부터 시작한 다음 CSS, JavaScript 순서로 배워요. 웹 개발 배우기는 무료 강좌 Welcome to Frontend Development부터 이 순서대로 진행해요.
앱에서 React와 Vue도 가르치나요?
네. HTML, CSS, JavaScript, TypeScript를 배운 후, 앱에서는 React Fundamentals, useEffect and Data Fetching, Advanced Hooks and Patterns 강좌와 Vue 3 Fundamentals, Composition API, advanced patterns 강좌를 제공해요. State Management와 Next.js 및 Nuxt 3를 활용한 Server-Side Rendering도 다뤄요.
TypeScript를 꼭 배워야 하나요?
첫 페이지를 만드는 데 필수는 아니지만, 대부분의 전문 React 및 Vue codebase에서 TypeScript를 사용하므로 JavaScript 기본기를 익힌 후 배워두는 것이 좋아요. 앱에서는 first-types 강좌, types와 interfaces를 더 깊이 다루는 강좌, frontend patterns를 위한 advanced 강좌로 TypeScript를 소개해요.
디버깅 미션은 어떻게 진행되나요?
15개의 디버깅 미션은 각각 실제 frontend 문제를 반영한, 문제가 있는 페이지나 component를 제공해요. 예를 들어 375 pixels에서 레이아웃이 깨지거나, 키보드로 사용할 수 없는 form, component의 memory leak, CI에서만 실패하는 test 등이 나오며 이를 직접 수정해요. 두 개의 미션은 무료예요.
frontend developer 면접을 준비하는 데 도움이 되나요?
지식 측면의 준비에 도움이 될 수 있어요. 웹 개발 배우기에는 답변이 포함된 50개의 면접 질문, syntax와 patterns를 정리한 83-entry cheat sheet, testing, performance, accessibility, architecture 강좌가 있어요. 이런 주제는 면접에서 기본기를 확인한 후 자주 이어서 다뤄요. 다만 직접 만든 프로젝트로 포트폴리오를 구성하는 일을 대신해주지는 않아요.
frontend development를 배우는 데 얼마나 걸리나요?
매일 조금씩 연습하는 초보자라면 보통 몇 주 안에 간단한 반응형 페이지를 만들 수 있고, JavaScript와 프레임워크를 능숙하게 다루려면 몇 달이 걸려요. 앱은 학습 경로를 몇 분 단위의 lesson으로 나누고 streak와 reminder를 제공하므로, 한 번에 긴 시간을 투자하기보다 짧고 꾸준한 학습으로 실력을 쌓을 수 있어요.
웹 개발 배우기는 무료인가요?
App Store와 Google Play에서 무료로 다운로드할 수 있어요. 첫 번째 강좌, 첫 번째 guided project, 두 개의 디버깅 미션과 code editor는 무료이며, 하루에 AI mentor 질문 3개를 이용할 수 있어요. 무료 버전에는 광고가 표시돼요. Pro를 이용하면 모든 강좌, 모든 프로젝트와 미션, 수료증 시험, 무제한 AI가 잠금 해제되고 광고가 제거돼요.
어떤 플랫폼과 언어를 지원하며, App Store 앱도 동일한가요?
웹 개발 배우기는 App Store를 통한 iOS와 Google Play를 통한 Android에서 실행되며, 22개 언어와 4+ 연령 등급을 지원해요. App Store 등록 제목은 Learn Frontend Development이고 Google Play 등록 제목은 웹 개발 배우기지만, 동일한 앱이에요. 최종 시험에 합격하면 수료증을 받을 수 있어요.
시작하기
오늘 첫 웹 페이지를 만들어 보세요
iOS와 Android에서 22개 언어로 무료로 시작할 수 있어요.
CoddyKit의 다른 앱
iOS에서 이용할 수 있어요.