웹 개발자 포트폴리오 A to Z(기획부터 배포까지)👩🏻‍💻

카우치코딩·2021년 10월 27일
239

포트폴리오강의

목록 보기
14/20

1. IT 회사에 개발자 취업하는 방법

IT 회사에 개발자로 취업을 하려면 개발에 대한 지식 / 경력 / 실력이 필요합니다. 경력이 없는 신입(~3년 차)에게 회사가 지식과 경력과 실력을 확인하는 방법은 무엇일까요?

첫째는 학습한 기록(Git, 기술블로그)
둘째는 프로젝트 진행 경험(포트폴리오)
셋째는 코딩테스트(과제)

이렇게 3가지를 확인하여 지원자를 선발합니다. 그래서 학습한 기록은 Git과 기술 블로그로 프로젝트 진행 경험은 포트폴리오 프로젝트로 평가합니다. 우리는 이 3가지를 준비하고, 진행하고, 연습하면 됩니다..🔥

2. IT 회사 채용 프로세스 이해하기

  • 카뱅 : 서류전형 > 코딩테스트전형 > 1차 실무진 면접전형 > 2차 경영진 면접전형
  • 토스 : 서류 접수 > 직무 인터뷰 > 문화적합성 인터뷰
  • 우리 FIS : 서류 > 인적성, 코테, IT 상식 > 1차 면접 > 2차 면접
  • 줌 : 서류심사 > 온라인 실기시험(과제전형) > 실무진 인터뷰 > 최종 인터뷰

서류(포트폴리오) → 코딩테스트 또는 개발 과제 → 1차 면접(기술) → 2차 면접

IT 회사 채용 프로세스는 회사마다 상이하지만 대부분 서류(포트폴리오)로 1차 필터링을 하고 코딩 테스트와 개발 과제로 2차 필터링을 한 뒤 1차 기술 면접을 봅니다. 1차 기술 면접은 대부분 내가 지원한 팀(부서)의 개발자 2-4명이 내 포트폴리오와 코딩 과제(테스트)에 대한 실무단 면접입니다. 팀장 1명 + 개발 팀원 2-3명이 면접자로 들어오고 화이트보드를 사용해서 기술적인 대화를 하게 됩니다.

3. 포트폴리오를 6주만에 효율적으로 잘! 준비하는 방법

아래 내용은 카우치코딩의 6주 포트폴리오 멘토링 3기(8월 반) 산출물을 기준으로 작성되었습니다.

포트폴리오란?

개발을 잘 할 수 있다는 것을 어필하기 위해 그동안 진행했던 프로젝트를 보기 좋게 정리한 것
지원하는 포지션의 채용담당자의 입장에서 어떤 인재를 필요로 할까? 에 대해서 고민해보고, 나는 그에 맞는 경험이 있는가? 에 대해 어필할 수 있도록 작성해야합니다.

포트폴리오에 들어갈 내용

  1. 간단한 자기소개(개발자로써)
  2. 깃허브 / 기술블로그
  3. 기술 스택 - FE/BE/DevOps
  4. 주요 프로젝트
  5. 학력 / 이력
  6. (신입의 경우) 자기소개 - 비젼, 개발자로써 역량준비 과정

주요 프로젝트(위에서 4번)에 들어갈 내용

  1. 프로젝트 설명
  2. 깃허브 & 도메인
  3. 사용한 기술 스택
  • 언어, 프레임워크를 Frontend, Backend 나눠서 보기 좋게 정리합니다.
  1. 기능 설명
  • 프로젝트 주요 기능을 개발 용어를 최대한 사용하여 정리합니다.
  1. 담당역할 및 성과
  • 나의 포지션과 어떤 기능을 어떻게 구현했는지 간단히 작성합니다.
  1. 레퍼런스
  • 기능 정의, 페이지 기획서, DB&API 설계서, 데모영상(산출물) 등의 실제 산출물을 링크합니다.

포트폴리오 프로젝트 샘플

그룹 포트폴리오 수업 3기(7-8월 6주간 진행) 포트폴리오 프로젝트입니다.
팀 단위로 프로젝트를 개발하고, 6주 만에 기획부터 설계, 개발, 배포, 포트폴리오 완성을 목표로 합니다.

카페메이트 프로젝트 Git 주소 : https://github.com/sungeun101/cafemate

카페메이트 프로젝트 도메인 주소 : http://cafemate.shop

포트폴리오 프로젝트 준비 순서

아이템 선정 및 팀빌딩 → 기술 선정(언어 및 프레임워크) → 기능 정의 → 페이지 기획 및 디자인 → 설계(DB, API) → 개발 → 배포 → 도메인 설정 → 리드미 및 포트폴리오(자소서) 작성

기획 및 설계 기간은 1-2주, 개발 기간은 4주로 총 6주가 소요됩니다.

1. 팀빌딩, 아이템 선정 🚗

[팀 빌딩]
4명이 한 팀이 되어 1개의 웹 사이트를 기획하고 개발합니다. 프론트엔드 2명, 백엔드 2명으로 구성합니다.

[아이템 선정]
게시판과 같은 CRUD(데이터 조회, 입력, 수정, 삭제) 기능을 포함하고 로그인&회원가입, 검색&필터 등 아래의 기능이 포함된 4-6페이지의 웹 사이트를 개발하게 됩니다.

포트폴리오 용 웹 사이트의 개발 범위(추천)
기본 CRUD
로그인/회원가입(구글 oAuth)
리스트 페이지
상세 페이지
입력 페이지
검색/필터링
페이징(인피니트스크롤링)
지도 API 사용(위치기반)
크롤러(데이터수집) <옵션>

[기술 스택 정하기]
Backend 와 Frontend 에 필요한 프레임워크와 DB, 배포 환경을 결정합니다.

2. 페이지 기획 및 디자인 🚗

[페이지 기획(디자인)에 필요한 툴 사용법 배우기]
Figma 라는 현업 디자이너 툴을 사용하여 UI 페이지 기획 및 디자인을 함께 해나갑니다.

[기능 및 페이지 기획]
샘플 프로젝트를 통해 페이지와 기능 기획하는 방법을 배우고 개발 범위를 명확히하여 팀 개발을 빠르게 진행할 수 있도록 합니다.

  • UI 페이지 디자인 (3기 샘플)

3. DB 및 API 설계 🚗

[DB 종류 설명 및 설계하기]
DB의 종류에 대해서 이해하고 어떤 DB를 선택할지 결정합니다. 이전 수업에서 작성한 기능 기획에 맞는 DB 설계를 완성합니다.

[Restful API 설명 및 설계하기]
Restful API 를 이해하고 API 서버를 설계하고 문서를 작성합니다. 백엔드 서버를 개발하기 전에 기능에 알맞는 서버 설계를 멘토와 함께 진행하게 됩니다.

  • DB 명세서 (3기 샘플)

  • API 명세서 (3기 샘플)

4. 프로젝트 스케줄링 🚗

[프로젝트 스케줄링하기]

  • Git Projects 를 사용하여 팀 별 개발 스케줄링을 합니다.
  • Git 을 사용하여 프로젝트를 셋팅합니다.

[프로젝트 협업을 위한 Git 배포 룰 결정하기]

  • 협업을 하기 위해 브랜치 관리 룰과 브랜치와 커밋 메세지 작성 룰을 결정합니다.

  • Git Projects(프로젝트 스케줄 보드)

5. 개발 🚗

[서비스 구조 이해하고 협업하기]

  • 팀 내 개발자 모두가 서비스 구조(아키텍처)를 이해하고 협업합니다. 프론트엔드와 백엔드에서 각각 어던 작업을 해야하는지 이해하고 개발합니다.
  • 이때 코드리뷰를 서로 진행하며 Git Flow 에 맞춰 협업하는 방법을 배웁니다.
  • oAuth를 활용한 로그인 및 회원가입 개발을 위해서 개념을 이해합니다.
  • Google oAuth 개념

  • 서비스 구조(3기 샘플)

6. 도메인 설정 및 AWS 배포 🚗

AWS EC2 에 프로젝트를 배포하고 무료 도메인을 설정합니다.

7. 데모 및 회고💕

[회고를 통해 배운 것을 공유하기]

  • 6주 동안 배운 것을 공유하고 만든 프로젝트를 자랑합니다.
  • 잘한 점, 아쉬운 점을 나누면서 서로를 통해 배웁니다.

[프로젝트 설명서 리드미 완성하기]

  • Git Readme 에 프로젝트 설명을 기술용어로 작성합니다.

포트폴리오 샘플(일부)

글을 마치며

2021년 상반기 개발자 멘토링 플랫폼인 카우치코딩을 런칭하고, 100명 가까이 멘티들을 만나면서 포트폴리오 프로젝트를 준비하는데 많은 어려움을 겪는 것을 알게되었습니다. 취업을 하기 위해서는 경력이나 포트폴리오 프로젝트 경험이 필요한데, 신입(주니어) 레벨에서는 혼자서 어디서부터 준비하는지 너무 막막해보였고 그 문제를 해결하기위해 6주의 포트폴리오 멘토링 수업을 런칭하게 되었습니다.

3기 수업은 8명의 취업준비를 하는 3년차 이하의 개발자가 참여하였고 그중 1명은 수업이 끝나고 바로 취업을 하는 기쁜 소식도 들을 수 있었습니다. 🙌

3기부터는 PM(project manager)인 저 뿐만 아니라 TA(teaching assistant)를 각각 프론트엔드, 백엔드 1명씩 코드리뷰를 긴밀하게 진행하였고 그 결과 프로젝트 개발 속도 향상 뿐 만아니라 코드 퀄리티가 50%이상 개선되었습니다.

이 글을 통해 취업 준비를 하는 주니어 개발자에게 도움이되고 또, 혼자 준비하기 막막하여 멘토의 도움이 필요한 주니어에게 수업을 알리고자 작성하였습니다. 모두 화이팅!! 입니다. 👍🏻💕 (댓글 통해서 수업 또는 포트폴리오 준비 방법, 취업 등에 대해 질문주시면 소통해요!)

6주 포트폴리오 수업(온라인으로 진행) 구경하기
3기 수업 결과물 구경하기

profile
포트폴리오 수업 & 코딩 멘토링 서비스 카우치코딩입니다.

6개의 댓글

comment-user-thumbnail
2021년 11월 4일

저같은 취준생에게 너무나도 도움이 되는 글입니다 감사합니다 :)

1개의 답글
comment-user-thumbnail
2021년 11월 5일

해당 깃헙 코드를 보면 깔끔하게 떨어지네요. 기수별로 코드의 편차가 있던데, 학생별로 편차가 있을거 같긴 한데요. 코드리뷰를 주니어 레벨 수준까지 봐주시나요? 그리고, 예전에 카우치코딩에 포트폴리오 코스 외에 다른 코스들도 많았던 거 같은데... 포트폴리오 과정 외에 리액트 과정 같은 것들은 없어졌나요?

2개의 답글