1.잘하는 FE개발자란?
스프린트의 업무 프로세스
- 1.(문제 정의) 고객 인터뷰 UT / UX Scoring / 가설
- 2.(데이터 분석) 퍼널, 기회 탐색
- 3.(제품 요구사항) Product Requirement, Design Requirement, Tech PoC,
- 4.(SW 설계) Interface, Design Pattern, Architecture ...
- 5.(FE 개발) Markup, State Management, Validator ...
- 6.(QA) Bug Finding
- 7.(Moitoring) Loki, Grafana, Alert, Sentry ...
잘하는 프론트엔드 개발자 정의
- 잘하는 프론트엔드 개발자는 '사용자 경험을 고려하면서 기술적으로 안정적이고 유지보수 가능한 코드를 작성하는 사람'
더 뛰어나야 하는 역량 및 체크리스트
1.커뮤니케이션 역량
1.1 Product Requirements 을 잘 이해하고 있는가?
- Process의 이해가 있는가? ( 업무 사고의 틀 )
- eg) 분기 계획 : 고객의 5대 문제 정의 > 고객의 큰 기회 탐색 > OKR 연결 > Task List > Backlog
1.2 UX Requirements 을 잘 이해하고 있는가?
- Process의 이해가 있는가? ( 업무 사고의 틀 )
1.3 Data Analysis 을 잘 이해하고 있는가?
- Process의 이해가 있는가? ( 업무 사고의 틀 )
- 어떤 목적으로 어떻게 기회를 찾아냈는가?
- eg) xx솔루션 혹은 yy비용으로 SEO 검색 엔진에서 Ranking 10위 안에 들면 z라는 기회가 발생할 것이다.
1.4 Backend 개발을 잘 이해하고 있는가?
- Process의 이해가 있는가? ( 업무 사고의 틀 )
- Backend 개발자와 커뮤니케이션 가능한 지식이 있는가?
- eg) 아키텍처 패턴이 왜 그렇게 되나요? 오케스트레이터보다는 이벤트 드리븐이 좋을것 같은데요?
- 업무의 입출력을 명확히 하는가?
- API Interface 먼저 선제안하기
- DB Entity에 대한 명확한 이해가 있는지 체크하기
UI/UX 감각이 뛰어나요
- 사용자가 어떻게 느낄지를 고려해서 인터랙션, 반응성, 접근성을 구현해요.
- Figma나 Zeplin 같은 디자인 도구와 협업 경험이 있어요.
기술 스택을 깊이 있게 이해해요
- React, Vue, Svelte 등의 프레임워크에 대한 깊은 이해가 있어요.
- Webpack, Vite, Babel 등의 번들링/트랜스파일링 도구에 익숙해요.
- HTML/CSS/JS 기본기를 잘 갖추고 있어요.
성능 최적화를 고려해요
- 코드 스플리팅, lazy loading, debounce/throttle 등의 최적화 기법을 실제로 사용해요.
- Lighthouse나 Web Vitals로 성능 지표를 분석하고 개선해요.
협업 능력이 뛰어나요
- Git을 잘 활용하고 PR 리뷰도 꼼꼼하게 해요.
- 백엔드, 디자이너와의 커뮤니케이션 능력이 좋아요.
컴포넌트 재사용성과 유지보수를 고려해요
- 일관된 디자인 시스템을 적용하고, 상태 관리와 폴더 구조를 잘 정리해요.
- 테스트 코드도 함께 작성해요 (Jest, Testing Library 등).
문제를 파악하고 해결하는 능력이 있어요
- 버그나 이상 상황을 디버깅하고, Stack Overflow보다 먼저 직접 원인을 파악하려고 해요.
결론부터 말하면, 프론트엔드 개발자의 '퀄리티'와 '생산속도'를 평가하기 위한 체크리스트는 아래와 같아요. 이 체크리스트는 코드 품질과 협업 효율, 구현 속도를 동시에 고려해요.
✅ 퀄리티 체크리스트 (품질 중심)
| 항목 | 설명 |
|---|---|
| 컴포넌트 재사용성 | 동일 기능을 반복하지 않고 재사용 가능한 컴포넌트로 구성했나요? |
| 코드 일관성 | 코드 스타일이 팀 규칙(Prettier, ESLint 등)에 맞게 통일되어 있나요? |
| 상태 관리 설계 | 적절한 범위에서 상태 관리 도구(Redux, Zustand 등)를 사용했나요? |
| 디자인 시스템 준수 | 디자인 가이드(색상, 폰트, 여백 등)를 지켰나요? |
| 접근성 고려 (a11y) | aria 속성, 키보드 접근성 등을 반영했나요? |
| 반응형 대응 | 모바일, 태블릿, PC에서 문제없이 작동하나요? |
| 성능 최적화 | 이미지, lazy loading, 코드 분할 등을 적용했나요? |
| 테스트 코드 작성 | 핵심 로직이나 컴포넌트에 단위 테스트가 포함되어 있나요? |
| 에러 핸들링 | API 실패, 사용자 입력 오류 등을 안정적으로 처리했나요? |
| 코드 리팩토링 | 기능 완료 후 중복 제거와 정리를 했나요? |
⚡ 생산속도 체크리스트 (속도 중심)
| 항목 | 설명 |
|---|---|
| 요구사항 파악 속도 | 요구사항을 빠르게 이해하고 명확히 정리했나요? |
| 기능 단위 커밋 | 한 기능 단위로 빠르게 커밋하며 진행했나요? |
| 컴포넌트 설계 속도 | 구조 설계를 빠르게 정하고 개발에 착수했나요? |
| 디자인 연동 속도 | Figma, Zeplin 등에서 디자인을 빠르게 파악하고 연동했나요? |
| API 연동 속도 | 백엔드 API 연동을 빠르게 구현하고 테스트했나요? |
| 기초 뼈대 세팅 속도 | 라우팅, 상태관리, 스타일 세팅을 빠르게 끝냈나요? |
| 협업 대응 속도 | 디자이너, 백엔드 요청에 신속하게 대응했나요? |
| 피드백 반영 속도 | 코드 리뷰 피드백을 빠르게 반영했나요? |
| 문제 해결 속도 | 버그나 이슈 발생 시 빠르게 파악하고 해결했나요? |
| 배포 속도 | QA, 빌드, 배포에 지연 없이 대응했나요? |
원한다면 이 체크리스트를 Notion이나 Excel로 정리해드릴 수도 있어요. 특정 프로젝트에 맞게 커스터마이징 원하시나요?
좋아요. 아래는 Notion이나 Excel에서 바로 사용할 수 있는 형식으로 정리한 프론트엔드 퀄리티 & 생산속도 체크리스트예요. 필요에 따라 ✔ 체크하거나 점수(1~5)로 평가할 수 있도록 구성했어요.
✅ 프론트엔드 퀄리티 체크리스트 (코드 품질)
| 항목 | 설명 | 체크(✔) 또는 점수(1~5) |
|---|---|---|
| 컴포넌트 재사용성 | 반복되는 UI 요소를 컴포넌트로 잘 분리했나요? | |
| 코드 일관성 | ESLint, Prettier 등으로 코드 스타일을 통일했나요? | |
| 상태 관리 설계 | 상태 범위가 적절하며 무분별한 전역 상태 사용을 피했나요? | |
| 디자인 시스템 준수 | 폰트, 색상, 여백 등 디자인 가이드를 따랐나요? | |
| 접근성 고려 (a11y) | aria 속성, 키보드 탐색 등 접근성을 고려했나요? | |
| 반응형 대응 | 다양한 해상도에서 UI가 자연스럽게 동작하나요? | |
| 성능 최적화 | 이미지 최적화, lazy loading, 코드 스플리팅 등을 했나요? | |
| 테스트 코드 작성 | 주요 기능에 대해 단위 테스트 혹은 e2e 테스트를 작성했나요? | |
| 에러 핸들링 | API 오류, 유효성 실패 등 예외 상황을 적절히 처리했나요? | |
| 코드 리팩토링 | 기능 구현 후 불필요한 중복, 불명확한 코드 등을 정리했나요? |
⚡ 프론트엔드 생산속도 체크리스트 (개발 효율)
| 항목 | 설명 | 체크(✔) 또는 점수(1~5) |
|---|---|---|
| 요구사항 파악 속도 | 기능 정의나 요구사항을 빠르게 파악했나요? | |
| 기능 단위 커밋 | 의미 있는 단위로 커밋을 잘 나눴나요? | |
| 컴포넌트 설계 속도 | UI를 빠르게 분해하고 구조를 설계했나요? | |
| 디자인 연동 속도 | Figma, Zeplin 등에서 디자인을 빠르게 적용했나요? | |
| API 연동 속도 | 백엔드 API를 빠르게 연동하고 디버깅했나요? | |
| 기초 뼈대 세팅 속도 | 라우팅, 상태관리 등의 기본 구조를 신속히 구성했나요? | |
| 협업 대응 속도 | 디자이너/백엔드 요청에 빠르게 피드백했나요? | |
| 피드백 반영 속도 | 코드 리뷰나 QA 피드백을 빠르게 반영했나요? | |
| 문제 해결 속도 | 버그나 오류를 빠르게 파악하고 해결했나요? | |
| 배포 속도 | QA 후 배포까지 지체 없이 처리했나요? |
📦 추가 옵션
- 엑셀/구글시트 템플릿으로 변환 가능
- 프로젝트 기준 목표값(예: 평균 4점 이상, 90% 이상 체크) 설정 가능
- 팀 전체 평가 or 개인 자기평가용으로 분리 가능
필요하시면 Excel/Notion 형식으로 파일(.xlsx/.csv) 혹은 마크다운 템플릿 만들어드릴게요. 어떤 형식이 필요하세요?