컴포넌트 단위 웹개발 : 포트폴리오 완성하기

2차 앵콜

현직자와 함께하는 웹개발직무 5주 인턴

직접 경험하는 것보다 잘 이해할 수 있는 방법은 없습니다.

'직무부트캠프: 5주 인턴’에 참여하면 어려운 인턴 지원 프로세스 없이 5주간 현직자와 제대로 웹개발 직무 경험을 만들 수 있습니다.

멘티님도 할 수 있어요.

현직자의 진짜 실무를 멘토의 도움을 받아 수행합니다.
업무에 대한 1:1 피드백과 코칭이 매주 제공됩니다.
5주간 3회의 세션을 가지게 되며, 학업/현업과 병행 가능합니다.

웹개발 3~5년차 현직자 웹외길 멘토입니다.

저와 함께 5주 동안 웹개발 실무를 체험하시겠어요?

안녕하세요 스타트업 근무 경험이 풍부한 웹개발자 현직 멘토입니다. 반갑습니다.

저는 창업을 하며, 또 여러 스타트업에서 기획자, 디자이너와 소통하며 업무 경험을 쌓고, 현재 2000억원에 인수된 스타트업 팀에서 웹개발자로 근무하고 있습니다.

웹개발자로 실무를 진행할 때 소통, 즉 커뮤니케이션 능력은 가장 중요한 능력 중 하나 입니다.

현업에서는 개발자 혼자 개발하는 것이 아니라, 다양한 직군(기획자, 디자이너)과 끝없이 소통해야 하기 때문입니다.

특히 서비스를 완성하는 과정에서 수정은 계속 발생하며 이때 다양한 직군과 더 많이 소통해야 합니다.

만약 효율적으로 소통하지 못한다면?

소통에 시간을 더 쏟아야하고, 그만큼 개발 시간이 줄어들어 결국 불필요한 야근을 하게 됩니다

그럼 다양한 직군의 현직자들은 어떻게 소통할까요?

컴포넌트 단위의 웹 설계 문서를 통해서 소통합니다

(이를 위해 figma 혹은 zepplin 등의 툴을 활용하기도 합니다)

컴포넌트 단위 웹 설계에는 아토믹 디자인이라는 원칙이 있습니다. 우리는 5주 동안 아토믹 디자인 원칙에 따라서 컴포넌트 단위로 웹을 설계하고, 설계를 토대로 개발까지 완료할 것입니다.

현업에서 웹개발자는 위와 같은 일을 합니다. 이번 직무 캠프가 끝나고 나면 여러분은 좀 더 구체적으로 현업 웹개발자의 직무에 대해 알게 될 것입니다.

이러한 경험을 바탕으로 면접 때 해당 회사에 입사하게 되면 하고 싶은 일(하게 될 일)을 회사에 역으로 제안한다면, 합격에 방점을 찍을 수 있을 것입니다.

이런 고민을 가진 분들에게
직무부트캠프를 추천합니다.

인턴 경험을 쌓고 싶은데
직무경험이 없어요.

면접에서 대답할
직무경험이 없어요.

자소서에 작성할
직무경험이 없어요.

직무부트캠프는
실제 취업에 도움이 됩니다.

직무부트캠프에서 했던 경험과 배웠던 직무 전문 단어를 면접에서 활용하였더니 면접관들이 흥미를 보였고, 결국 최종 합격했어요.

직부캠 수료생

남00님

수료증을 토대로 이력서에 직무 관련 경험으로 작성했고 임원 면접시 경험에 대한 질문에 직무 관련한 관심이 많다는 것으로 어필 했고, 좋은 평가를 받을 수 있었어요.

직부캠 수료생

강00님

3~5년차 현직자

웹외길

인증멘토

현) 모빌리티 스타트업 개발팀 재직 중

- 웹뷰 컴포넌트 단위 설계 및 개발

- 기존 웹뷰 리팩토링 진행

- 개발 지식 공유 유튜브 채널 및 블로그 운영

전) AI 솔루션 스타트업 개발팀

- 요구사항 명세서를 통해 페이지 설계

- AI model training 웹서비스 개발

전) 인테리어 스타트업 창업

- 인테리어 웹 서비스 기획

- 유저 스토리보드 및 워크 플로우 차트 작성

컴포넌트 단위 웹개발 : 포트폴리오 완성하기

주제로 5주 동안 실무자가 될 수 있게 도와드리겠습니다.

웹개발 인턴이 되어 2~3년 차 실무자가 실제로 수행하는 업무를 부여받게 됩니다.

ㅁㅁ디자이너님

웹개발팀

담당자

홍길동

중요도

높음

마감일

2025.12.15

ㅇㅇ개발자님 디자인 완료된 화면 보시면서 개발 진행해주세요. 화면에 대해 질문 있으시면 설계 문서 확인해보신 후, 메신저로 남겨주세요.

ㅇㅇ개발자님, 이번에 새롭게 화면이 디자인 되면서 현재 화면에서 각 부분의 소제목 글자 크기와 레이아웃이 전부 수정되어야 합니다. 또한 새로운 소제목과 컨텐츠가 추가될 예정입니다. 이를 반영해서 개발도 수정해 주세요.

과제 소개

웹개발자가 실제 웹페이지를 개발하는 과정으로 5주 간의 과제가 구성되어 있습니다. 직무 캠프를 시작하기에 앞서 협업을 위한 툴인 git 에 대해 학습합니다. 기본적인 git 사용법을 배우고, 앞으로의 실습에 활용할 repository 를 직접 만들어 봅니다.

과제를 진행하기 위한 개발 환경이 준비 되었다면, 개발을 진행할 디자인 목업에 대해서, 아토믹 디자인을 따라 컴포넌트 단위로 설계합니다. 이 설계를 바탕으로 설계 문서를 작성합니다. 설계 문서 작성을 완료 했다면, 개발할 디자인 목업과 작성한 설계 문서를 토대로 실제 개발을 진행합니다.

개발을 완료한 후, 수정 사항이 발생하게 되면 이에 잘 대처하도록 개발 완료한 코드를 리팩토링 합니다.

마지막으로 실제 수정 사항이 발생한 상황에서, 추가로 개발을 진행하여 이 수정 사항을 웹페이지에 반영합니다.

본 캠프는 전공과 상관 없이 수강 가능하며, 아래의 선수 지식을 먼저 학습하시길 추천드립니다.

- React todo list 만들기 (typescript)https://withseungryu.tistory.com/42 해당 포스팅 1,2,3 따라해보기

- Nextjs getting started ~ Basic features 따라해보기: https://nextjs.org/docs/getting-started

과제를 통해 얻어갈 수 있는 것

현업에서 개발자가 일할 때는 대부분 여러 개발자들과 협업하게 됩니다. 이를 위한 도구인 git 의 활용법을 배워야 개발을 시작할 수 있는 준비가 된 것입니다.

실제 웹개발 업무를 진행하다 보면 개발자가 기획자, 디자이너와 소통해야 하는 상황이 자주 발생합니다. 이 때, 효율적으로 소통하기 위해서는 공통된 문서(설계 문서)를 활용해야 합니다. 이 설계 문서를 이해하고, 나아가 작성하기 위해서는 설계 문서 작성 원칙에 대한 이해가 필요합니다. 개발하기 위한 디자인 목업을 보면서 설계 문서를 작성하는 과정을 통해 컴포넌트 단위의 설계가 무엇인지 이해하실 수 있을 것입니다.

이번 캠프가 끝나고 나면, 여러분들은 웹개발자가 현업에서 어떻게 개발을 진행하는지 경험을 통해 이해하실 수 있을 것 입니다. 더욱이 단순히 지시를 받아 그 사항을 개발하는 수동적인 개발자를 넘어서, 능동적으로 개발할 방향에 대해 제안할 수 있는 개발자의 태도를 갖출 수 있게 될 것입니다. 또한 그러한 태도에 필요한 지식인 웹 설계 원칙에 대해 이해하게 될 것입니다.

마지막으로 개발한 페이지를 배포하여 포트폴리오로 활용할 수 있도록 제공합니다.

이 업무를 선정한 이유를
알려드릴게요!

구직자들의 오해

많은 취업준비생 분들이 웹 개발자가 소통하는 방법에 대해 추상적으로 이해하고 계신다고 생각합니다. 또한 소통의 중요성에 대해서는 알지만, 현직자들은 실제로 어떻게 소통하는지 잘 모르는 분들이 있었습니다. 제가 웹개발자 면접을 보면 본인이 얼마나 소통을 잘하는 개발자인지 강조하지만 소통하는 방법에 대해서 구체적으로 물어보면 대답하지 못하는 분들이 많았습니다.

직무가 실제로 하는 일과 가장 중요한 역량

그러나 웹개발 업무는 다양한 직군과 소통해야 하는 업무입니다. 특히 요즘 서비스를 직접 제공하는 회사의 경우, 해당 서비스에는 지속적인 수정 사항이 발생하고, 이를 개발하기 위해 기획자, 디자이너와 소통하는 상황이 더욱 자주 발생하고 있습니다. 이에 따라 웹개발자들에게는 단순히 지시 받은 사항을 개발하는 것을 넘어서 개발의 방향성을 제안하는 능력, 또한 수정 사항을 개발에 제대로 반영하기 위해 다양한 직군과 소통하는 능력이 중요해졌습니다.

해당 과제가 웹개발 직무의 실제 일과 가장 중요한 역량을 체험하기에 좋은 이유

그래서 이번 직무부트캠프에서는 “컴포넌트 단위로 웹페이지 설계 및 개발하기” 과제를 수행할 예정입니다. 웹을 설계하는 데에는 원칙이 있습니다. 요즘 대부분의 웹서비스 회사들은 컴포넌트 단위로 해당 회사의 서비스(웹페이지)를 설계하고 개발하는 추세입니다. 그것이 효율적인 개발 방법이기 때문입니다. 따라서 위 과제가 웹개발자로 실무를 경험하기 위한 최적의 과제라고 생각했습니다.

실제 회사에서는 개발 전에 기획자, 디자이너, 개발자가 모두 모여 스프린트 회의를 합니다 이를 통해 개발의 방향성을 설계하고 각자의 업무를 맡아서 병렬적으로 진행합니다. 대부분 설계, 디자인, 개발, 수정의 프로세스를 거쳐서 진행됩니다. 이번 직무부트캠프 과제도 최대한 웹개발 실무에 가깝게 구성이 되었으니 여러분은 정말 웹개발자가 어떻게 개발을 진행하는지, 설계 원칙이 무엇인지 경험을 통해 배우실 수 있을 것입니다.

상세한 스케줄을 설명드리겠습니다.

3회의 강의와 4회의 업무를 통해
현업자 수준의 직무 이해도를 얻게됩니다.

캠프 시작일

1주차

온라인 세션

6월 29일(화) 07:00~09:00

현직자 직무 에센스 강의 및 Q&A

⋅ 직무 입문 방법
⋅ 직무담당자가 실제로 하는 일
⋅ 직무담당자로 일하는 장, 단점과 요구 역량
⋅ 주차 별 프로젝트 소개 및 선정 이유

7월 3일(토) 15:00까지

업무

git 의 활용과 개발 환경 세팅

[내용] 현업 개발팀은 git 을 활용하여 개발 협업을 진행합니다. 기본적인 git 활용법을 배우고, 앞으로의 실습에 활용할 repository 를 다운로드 합니다. 또한 나의 git repository 를 만들어 진행하는 개발을 업로드 합니다. 이를 통해 git 을 통한 협업 방법에 대해 학습합니다. 마지막으로 아토믹 디자인 원칙을 학습하고, 개발할 페이지에 대해 컴포넌트 단위로 설계합니다.

1) git을 통한 기존 repository 다운로드

2) 나의 git repository 만들기

3) 컴포넌트 단위의 설계 문서 작성

[제공 자료]

실습에 필요한 github repository
설계 문서 작성에 필요한 페이지 디자인
아토믹 디자인 관련 사이트(문서)

[기대 결과물]

github 계정
본인의 repository 주소
컴포넌트 단위의 설계 문서

2주차

서면 피드백

7월 6일(화) 15:00까지

리드멘토 개별 리뷰 및 1차 업무 피드백

7월 10일(토) 15:00까지

업무

컴포넌트 단위 설계 문서를 토대로 웹페이지 개발

[내용] 1주차에 작성한 설계 문서를 토대로 개발을 진행합니다. 리액트와 NEXT.js 를 활용하여 컴포넌트 단위로 개발합니다. styling(css) 은 자유롭게 기술을 활용해도 괜찮습니다. 다만 제시된 화면을 최대한 구현해내는 것을 목표로 개발합니다. 이러한 과정을 통해 현업에서와 동일한 개발 진행 과정을 경험합니다.

1) 페이지 디자인과 설계 문서를 참고하여 개발 진행

2) 개발을 진행하며 컴포넌트 설계 문서 수정

3) 수정된 설계 문서를 토대로 개발 완료

[기대 결과물]

완성된 웹페이지 코드 (github를 통해 제출)
수정된 설계 문서

3주차

온라인 세션

7월 13일(화) 07:00~09:00

업무 발표 및 리드멘토 2차 업무 피드백

*참여자가 2명 이하인 경우, 3/5주차 캠프 시간은 1시간으로 조정 운영됩니다.

7월 17일(토) 15:00까지

업무

웹페이지 개발의 리팩토링

[내용] 2주차에 완료한 개발 코드를 리팩토링 합니다. 자신의 코드가 수정에 효율적으로 대응할 수 있는 코드인지 멘토와 함께 체크하며 코드를 개선합니다. 그 결과, 수정 사항이 발생하는 경우 이를 효과적으로 반영할 수 있는 코드를 완성하여, 추후 발생할 수정 사항에 대해 대비합니다.

1) 설계 문서를 반영하여 컴포넌트 추상화

2) 추상화된 컴포넌트를 반영하여 기존에 완성한 개발 코드 리팩토링

[제공 자료] github 의 실습 진행을 위한 추가 repository 제공

[기대 결과물]