프론트엔드 멘토링 진행 노트
프론트엔드 입문자가 방향을 잃지 않도록 오리엔테이션, HTML·CSS, Git, 코드 리뷰와 작은 실습을 한 과정으로 묶은 멘토링 노트입니다.
- 작성일
- 업데이트일
프론트엔드를 처음 배우는 사람에게 모든 기술을 깊게 설명하려 하면 오히려 길을 잃기 쉽습니다. 이 멘토링 노트는 “무엇이 있는지 지도를 보여주고, 작은 화면을 직접 만들며 필요한 개념을 꺼내 쓰는 것”을 기준으로 정리했습니다.
첫 시간에 맞출 것
먼저 왜 프론트엔드를 배우려는지 묻습니다. 취업, 만들고 싶은 서비스, 현재 프로젝트의 필요처럼 목적이 다르면 같은 로드맵도 우선순위가 달라져요. Frontend Roadmap은 전체 지도를 보는 참고 자료로 사용하되, 모든 칸을 순서대로 끝내야 하는 체크리스트로 보지는 않습니다.
입문 단계에서는 HTML, CSS, JavaScript로 문서를 만들고 꾸미고 상호작용시키는 흐름을 먼저 경험합니다. npm은 다른 사람이 만든 패키지를 프로젝트에 가져오고 관리하는 도구라는 수준에서 시작하고, UI 라이브러리나 프레임워크는 기본 구조를 한 번 직접 만든 뒤 비교합니다.
네 번의 학습 흐름
| 회차 | 주제 | 만들 결과물 |
|---|---|---|
| 1 | 목표·로드맵·개발 환경 | 학습 우선순위와 작은 페이지 뼈대 |
| 2 | CSS display·Flex·Grid | 모바일에서 한 열로 바뀌는 카드 화면 |
| 3 | Git·GitHub·코드 리뷰 | 브랜치와 pull request가 있는 변경 |
| 4 | 시맨틱 HTML·SEO·마무리 | 접근 가능한 한 화면과 회고 |
각 회차는 설명보다 손을 움직이는 시간을 길게 둡니다. “화면을 구현해보자”라는 짧은 실습 메모를 실제 결과물로 바꾸려면, 완성 화면과 완료 조건을 시작 전에 보여주는 편이 좋습니다.
CSS에서 꼭 연결할 개념
block, inline, inline-block의 차이를 확인한 뒤 Flex와 Grid를 비교합니다. 한 축의 정렬은 Flex, 행과 열을 함께 설계하는 배치는 Grid가 출발점이 되기 쉽습니다. 다만 이름을 외우기보다 콘텐츠가 늘거나 화면이 320px까지 좁아졌을 때 무엇이 일어나는지 직접 확인해요.
이미지는 PNG와 SVG의 차이만 말하지 않고, 사진인지 아이콘인지와 확대가 필요한지를 보고 형식을 고르게 합니다. 텍스트는 px와 rem, 줄바꿈과 말줄임을 실험하되 중요한 문장을 단지 공간에 맞추려고 숨기지 않는 기준을 함께 설명합니다.
Git은 협업 흐름으로 익힌다
처음 다룰 명령은 status, add, commit, branch, push 정도면 충분합니다. 각 명령을 따로 암기하기보다 다음 흐름을 반복합니다.
- 작업 전 상태를 확인합니다.
- 목적에 맞는 브랜치를 만듭니다.
- 관련 파일만 골라 커밋합니다.
- 원격에 올리고 변경 이유를 설명합니다.
- 리뷰를 반영한 뒤 다시 검증합니다.
Learn Git Branching처럼 시각적으로 브랜치를 확인하는 자료를 함께 쓰고, GUI 도구는 명령의 결과를 눈으로 확인하는 보조 수단으로 소개합니다. .gitignore에는 생성물과 개인 설정, 비밀값을 저장소에 넣지 않는 이유를 연결합니다.
코드 리뷰에서 볼 순서
초기 리뷰는 사소한 스타일 지적을 늘어놓기보다 다음 순서로 봅니다.
- 문서의
lang과 제목 구조가 내용에 맞는가 - 버튼과 링크가 의미에 맞는 요소로 작성됐는가
- 이미지와 폰트가 안정적으로 로드되는가
- CSS 클래스가 역할별로 나뉘고 이름이 설명 가능한가
- 절대·상대 경로가 배포 위치에서도 올바른가
- 모바일과 키보드 조작에서 기능을 사용할 수 있는가
- title, description, Open Graph 같은 메타데이터가 실제 내용을 설명하는가
리뷰 코멘트에는 정답만 쓰지 않고 무엇이 문제인지, 사용자에게 어떤 영향이 있는지, 확인할 수 있는 작은 예시를 함께 남깁니다.
정보를 계속 갱신하는 방법
공식 문서를 가장 먼저 확인하고, 국내 기술 콘퍼런스와 기술 블로그, 주간 뉴스레터를 보조 자료로 활용합니다. 면접 준비는 질문 모음을 외우기보다 JavaScript, 브라우저, 네트워크와 자신이 만든 프로젝트를 설명할 수 있는지 점검하는 방식으로 진행합니다. 알고리즘 문제도 목표 회사의 환경에 맞는 사이트를 골라 입력과 출력, 경계값을 직접 테스트하는 습관을 먼저 만듭니다.
멘토링의 목표는 모든 답을 미리 주는 것이 아닙니다. 막혔을 때 공식 문서를 찾고, 작은 변경을 검증하고, 리뷰를 통해 다음 질문을 만드는 흐름을 혼자 반복할 수 있게 돕는 것입니다.
이어 읽기
- 코드를 잃고 시작한 Git 공부 — 멘토링에서 다룬 Git 명령을 버전 관리와 협업의 이유까지 확장해 설명합니다.
- 웹 개발 공부에서 남은 연결고리 — HTML 의미 구조부터 JavaScript, 렌더링과 플랫폼 경계까지 이어서 살펴봅니다.
- 개발자로 성장하며 남긴 질문들 — 학습과 피드백을 실제 커리어 준비에 적용한 회고입니다.