Devin.KR
통합 검색 Ctrl K

소프트웨어

프런트엔드 개발자

사람이 직접 사용하는 웹 화면과 상호작용을 만듭니다.

기초 → 첫 프로젝트단계별 자기 점검회원가입 없이 읽기

0 / 31개 완료 · 0%

이 로드맵으로 학습 시작

어떤 일을 하나요?

디자인을 웹으로 구현하고, API 데이터를 연결하며 접근성과 성능을 개선합니다.

이런 관심이 있다면 살펴보세요

화면을 만들고 사용자의 불편을 관찰하는 일이 흥미로운 사람

회사와 팀에 따라 같은 직무 이름의 담당 업무가 다를 수 있습니다.

학교 공부와 연결하기

미술·디자인 감각과 정보 과목을 연결하고, 친구의 사용 모습을 관찰해 개선하세요.

처음 시작한다면 IT 공통 기초를 함께 보세요. 대학생은 관련 과목의 개념을 프로젝트로 확인하고, 주니어는 각 단계의 완료 기준에서 부족한 부분을 찾으세요.

YOUR LEARNING PATH

배우고, 만들어 보고, 확인하기

기간보다 직접 할 수 있는 일을 기준으로 이동하세요. 이미 할 수 있다면 다음 단계로 넘어가도 좋습니다.

  1. 01

    웹 문서 만들기

    시맨틱 HTML, CSS 박스 모델, 반응형, 폼과 접근성

    완료 기준

    키보드만으로 사용할 수 있는 소개 페이지를 만든다.

  2. 02

    상호작용 구현

    JavaScript 함수·배열·객체, DOM, 이벤트, 비동기

    완료 기준

    검색과 필터가 작동하는 목록을 만든다.

  3. 03

    서비스 연결

    HTTP, API 오류·로딩·빈 상태, 상태 관리

    완료 기준

    네트워크 실패와 데이터가 없는 경우도 설명하는 화면을 만든다.

  4. 04

    품질과 협업

    컴포넌트, 테스트, 성능 측정, Git 코드 리뷰

    완료 기준

    모바일 화면과 키보드 탐색을 검증하고 변경 이유를 남긴다.

MAKE IT YOURS

첫 프로젝트

학교 동아리 또는 지역 행사 탐색 웹사이트

검색·상세·빈 결과·오류·모바일 동작을 보여 주세요. 프레임워크 이름보다 사용자 흐름이 중요합니다.

결과물에 함께 남길 것

  • 무엇을 해결하려 했는지, 어떤 제약이 있었는지
  • 실행 방법과 정상·오류 상황의 검증 결과
  • 내가 결정한 부분, 참고한 자료, AI를 활용한 부분
  • 실패에서 배운 점과 다음에 개선할 한 가지

신입 기본 능력치

웹 문서

  • 시맨틱 HTML로 문서와 폼 구조를 작성합니다.
  • 입력 요소에 이름을 제공하고 키보드 탐색을 확인합니다.

화면 구성

  • CSS 박스 모델과 레이아웃을 설명합니다.
  • 작은 화면과 큰 화면에서 콘텐츠가 겹치지 않도록 구현합니다.

JavaScript

  • 함수·배열·객체로 검색과 필터를 구현합니다.
  • DOM 이벤트와 비동기 처리의 흐름을 설명합니다.

API 연결

  • HTTP 응답을 처리하고 로딩·오류·빈 상태를 표시합니다.
  • 오래된 요청 결과가 최신 검색 결과를 덮지 않도록 처리합니다.

상태와 컴포넌트

  • 상태의 소유 위치를 정하고 화면에 반영합니다.
  • 반복되는 화면 요소를 역할이 분명한 컴포넌트로 분리합니다.

품질과 협업

  • 사용자 흐름의 테스트와 모바일 검증을 수행합니다.
  • 성능을 측정하고 Git 리뷰에 변경 이유를 기록합니다.

면접 질문

정답을 암기하기보다 경험과 판단 근거를 설명하는 연습에 활용합니다.

신입 · 시맨틱 HTML을 선택한 이유를 설명합니다.

구조와 접근성을 사용자 동작에 연결하는 이해를 평가합니다.

신입 · 좁은 화면에서 레이아웃이 깨지는 문제의 확인 방법을 설명합니다.

박스 크기와 콘텐츠 특성을 분석하는 능력을 평가합니다.

신입 · 키보드만으로 폼을 사용하는 흐름을 설명합니다.

포커스 순서와 오류 안내를 검증하는 태도를 평가합니다.

신입 · 검색 요청이 순서와 다르게 도착할 때의 처리 방식을 설명합니다.

비동기 경쟁 상태를 이해하는 능력을 평가합니다.

신입 · 로딩·오류·빈 결과 화면을 나눈 이유를 설명합니다.

사용자가 다음 행동을 결정하도록 안내하는 판단을 평가합니다.

신입 · 컴포넌트의 상태 위치를 정한 사례를 설명합니다.

데이터 흐름과 책임을 명확히 하는 능력을 평가합니다.

경력 · 느린 화면을 측정하고 개선한 과정을 설명합니다.

병목을 지표로 확인하고 개선 후 비교하는 능력을 평가합니다.

경력 · 공용 컴포넌트 변경으로 생긴 회귀를 다룬 과정을 설명합니다.

영향 범위와 호환성을 관리하는 능력을 평가합니다.

경력 · 실제 사용자 흐름에서 접근성을 개선한 사례를 설명합니다.

자동 검사와 수동 검증을 함께 적용하는 능력을 평가합니다.

경력 · 캐시된 데이터와 서버 데이터가 어긋난 문제를 설명합니다.

갱신 시점과 일관성 정책을 설계하는 판단을 평가합니다.

경력 · 브라우저별 오류를 재현한 방법을 설명합니다.

환경 차이를 분리하고 근거를 남기는 분석력을 평가합니다.

경력 · 화면 구조를 바꿀 때 배포 위험을 줄인 방법을 설명합니다.

변경 범위와 관측·복구 절차를 함께 설계하는 능력을 평가합니다.

연차별 기대 기술

회사와 역할에 따라 필요한 경험은 다릅니다. 자신의 경험을 점검하는 기준으로 활용합니다.

1년차

  • 시맨틱 HTML과 레이블을 갖춘 입력 폼을 구현합니다.
  • 모바일 목록과 상세 화면의 반응형 레이아웃을 검증합니다.
  • 배열과 이벤트로 검색·필터 기능을 구현합니다.
  • API의 로딩·오류·빈 결과 화면을 작성합니다.
  • 키보드로 메뉴와 폼을 이용하는 흐름을 확인합니다.
  • 기능 수정의 테스트와 코드 리뷰 설명을 작성합니다.

3년차

  • 검색 요청 취소 또는 결과 식별로 응답 순서 문제를 해결합니다.
  • 여러 화면에서 공유하는 상태와 지역 상태를 분리합니다.
  • 성능 측정으로 큰 이미지나 불필요한 렌더링을 개선합니다.
  • 사용자 흐름의 통합 테스트를 작성합니다.
  • 브라우저와 화면 크기에 따른 오류를 재현하고 수정합니다.
  • 공용 컴포넌트의 속성과 접근성 동작을 문서화합니다.

5년차

  • 디자인 시스템의 컴포넌트 계약과 변경 절차를 설계합니다.
  • 서버 데이터 캐시의 갱신과 실패 처리를 정리합니다.
  • 화면 분할과 자원 로딩 전략을 측정 결과로 선택합니다.
  • 복잡한 폼의 검증·포커스·오류 복구를 설계합니다.
  • 점진적 화면 교체와 되돌리기 절차를 운영합니다.
  • 여러 기능 팀의 테스트 범위와 리뷰 기준을 조율합니다.

7년차 이상

  • 여러 서비스의 화면 구조와 공용 요소 사용 기준을 정리합니다.
  • 사용자 경험과 성능의 목표 지표를 정하고 추적합니다.
  • 접근성 검증을 개발·리뷰·배포 과정에 반영합니다.
  • 프레임워크 변경의 비용을 시범 적용으로 검증합니다.
  • 공용 라이브러리의 호환성과 교체 계획을 운영합니다.
  • 사용자 오류와 장애 자료로 화면 품질 개선의 우선순위를 결정합니다.

부트캠프에서 익히기

직접 연습하고 더 읽기

컬러 스튜디오전자책 서재AI 학습 가이드

공식 기술 참고 문서

MDN 웹 개발 커리큘럼

학습 순서와 완료 기준은 Devin.KR의 편집 제안입니다. 공식 문서는 기술을 더 확인하기 위한 자료이며, 제품 버전과 실습 환경은 문서에서 확인하세요.

함께 비교할 경로

2026-09-20 검토 · 이 경로는 학습을 돕는 안내이며 취업이나 자격 취득을 보장하는 과정은 아닙니다.