Project 1-0일 차: 진행에 앞서 ; MVP 이해와 업무협업 툴 이해 (Trello, Slack)

나는 일을 시작함에 앞서, 방향과 목적을 제대로 알고 접근하는 것을 중요시한다. 

그게 바로 time saving, energy saving, SMART하게 일하는 방법이다. 

 

목적

• Threads의 가장 핵심적인 기능만을 추려낸 MVP를 선정하고, 
• 기능 단위로 개발 범위를 나누고,
•  미리 정의된 기능정의서를 토대로 개발을 진행하는 프로세스를 경험

 Agile 방식 진행

• • Trello와 Notion등의 문서를 활용
  •  개발자는 코딩만 잘한다고 좋은 개발자라고 할 수 없습니다.
  •  협업 도구에 익숙해지고  도구를 활용한 의사소통 방법을 익히시길 바랍니다.

목표

• Threads의 회원가입 기능, 로그인 기능, 게시글 기능을 파악하고 개발합니다.
• 프론트엔드는 위 기능들을 구현하기 위해, 회원가입 페이지, 로그인 페이지, 게시글 페이지를 개발합니다.
• 백엔드는 위 기능들을 구현하기 위해 회원가입 API/ 로그인 AP/, 게시글 CRUD API를 개발합니다.
• 프론트엔드에서 개발한 페이지와 백엔드 API를 통신하여 프로젝트를 완성합니다.
• 프로젝트 회고 미팅을 진행하여 프로젝트 기간 동안 잘했던 점과 더 발전시켜야 할 점을 기록합니

---

프로젝트 전 지식 --- 스타트업에 관심이 많았어서, 아는 단어가 많았다. 

MVP란?

1. Minimum Viable Product(MVP)

• 최소한의, 가능한 기능만을 가진 제품
• 제품 핵심 가치를 테스트, 고객의 피드백을 얻어서 그 후 제품을 개선하고 확장하는 데에 초점 두는 제품 개발 전략
• 제품의 핵심 가치 확인, 빠르게 시장에 도입하여 고객들의 빠른 피드백을 받기 위해 스타트업에서 많이 사용하는 전략 (즉, 일단 내보낸다는것, 그리고 수정할 게 있으면 수정하고) 
• 특히 소프트웨어 개발 업계에서는 개발자들이 핵심 기능을 먼저 개발하고, 이를 통해 사용자의 반응과 피드백을측정 --> 제품 개선, 추가 기능 구현
• 대표적: 인스타그램이 이 방식을 사용하여 시작했으며, 초기에는 사진 공유와 필터 적용만을 제공했지만, 사용자의 피드백에 따라 여러 기능을 추가하면서 성장

2. MVP의 장점

1. 시장 테스트: 새로운 아이디어나 제품이 시장에서 어떻게 반응을 얻을지 신속하게 테스트
2. 비용 절감: 기능이 제한되어 있으므로, 처음부터 모든 기능을 갖춘 제품을 만드는 것보다 비용 절약
3. 피드백을 통한 개선: 초기 사용자로부터의 피드백을 통해 제품의 어떤 부분이 개선되어야 하는지를 식별, 이를 바탕으로 제품을 개선하고 확장
4. 경쟁력 강화: MVP를 통해 제품을 빠르게 출시함으로써 경쟁에서 앞서갈 수

3. MVP의 단점

1. 기능 제한: MVP는 핵심 기능에만 집중하기 때문에, 초기 사용자들은 제품이 제한된 기능만 가지고 있다는 인식을 가질 수 있습니다. 이로 인해 일부 고객들을 잃을 수도 있습니다.
2. 피드백 해석의 어려움: 사용자들의 피드백을 정확히 이해하고 적용하는 것은 항상 쉬운 일이 아닙니다. 잘못된 해석은 제품의 향후 발전에 악영향을 미칠 수 있습니다.
3. 완성도 떨어지는 제품: MVP는 최소한의 기능만을 가지고 있기 때문에, 일부 사용자들은 제품이 완성도가 떨어진다고 느낄 수 있습니다.

4. MVP 전략을 사용하는 이유

1. 리스크 관리:  최소한의 투자로 제품의 적합성 검증. 만약 제품이 실패하더라도 손실을 최소화.
2. 반복적인 개선: 초기 사용자들로부터 피드백을 받아 제품을 개선에 초점 --> 제품이 사용자들의 필요에 가장 잘 맞도록 하며, 시장의 변화에 더 빠르게 반응할 수 있게 
3. 시장 진입 속도: MVP를 개발하고 출시하는 것은 시장에 빠르게 진입하는 데 필요한 시간을 줄여줍니다. 이로 인해 경쟁자들보다 앞서 제품을 출시하고 사용자들의 피드백을 얻는 데 유리한 위치를 가질 수 있습니다.
4. 학습과 개발: MVP를 통해 기업은 고객들의 요구사항과 시장의 동향을 더 잘 이해할 수 있습니다. 이러한 통찰력은 제품의 이후 개발에 있어서 중요한 지침을 제공할 수 있습니다.
5. 자원 최적화: 완전히 개발된 제품에 대한 고객의 반응을 예측하는 것은 매우 어렵습니다. MVP는 중요한 기능에 집중함으로써 시간, 비용, 그리고 다른 자원을 최적화하게 해줍니다.

 

직전 회사에서 개발자이신 임원분들과  project coordinator로 일하면서 사용했던 smartsheet - dashboard 툴과 유사했다. 

늘  not started - in progress  - done/complete 3단계로 구분하고

각각 단계를 또 3단계로 하고 

 

Assigned 도 관리하고/ 퍼센테이지로 관리하기도 하고 / timeline due 몇주 이렇게 관리도 화고 

 

risk / issue 칸에 각자 그 주의 이슈와 potential risk와 다른 팀에게 요청할 help needed을 올렸다

(그런데 정말로 큰 리스크 아닌데 팀 매니저분=임원분이 올리면 비즈니스레벨 = 전무님 사장님께 혼났음) 

Trello 활용법

01. Trello?

웹기반 프로젝트 관리 소프트웨어 

• status tracking 가능 (in progress/ done 등) 

• 문제 발견 시, 문제 리스트에 기록 (risk/issue 관리)
• Due date 있는 것: 라벨 (필터기능)
• 한 페이지에 볼 수 있음

팀 프로젝트에 유용한 프로젝트 관리 프로그램

• 모든 업무들을 세분화 --> 하나의 티켓
• 전체 프로세스 --> 앞으로 해야 할 모든 티켓들(Backlog), 이번 스프린트에 해야 할 티켓들(This Sprint), 현재 개발 중인 티켓들(In Progress), PR 작성 후 리뷰중인 티켓들(In Review), 완료된 티켓들(Done)  다섯 가지 카테고리로 나눔
• 각각의 티켓을 하나씩 이동
• 실제로 많은 회사에서, 그리고 개발팀에서 사용하는 트렐로를 사용
• 모든 프로젝트 과정, 업무를 관리

02. When 

• 프로젝트 첫 미팅 - 프로젝트 기획 및 업무 분담
• Daily Standup Meeting - 1) 어제 한 것, 2) 오늘 할 것, 3) Blocker
• for individual / 각자 개발을 진행할 때
• 팀원들과 기술적 소통 및 기획, 일정을 조율 할 때
• overall 전반적으로 사용

03. How to 

1. 팀원 중 한명이 트렐로에 프로젝트를 생성하여 팀원들과 멘토 모두 초대
   • 멘토 계정
   • 슬랙 공지로 안내드린 멘토 계정을 초대 
2. 카테고리 나누기 (5)
   • Backlog - To do 앞으로 해야 할 모든 티켓들
   • This Sprint - Due this week 이번 스프린트에 해야 할 티켓들
   • In Progress - 현재 개발중인 티켓들
   • In Review - PR 작성 후 리뷰중인 티켓들
   • Done - complete 완료된 티켓들
3. 기획에 맞게 해야 할 업무 전부 Backlog
   • 티켓 생성 시 유의 사항
     • 1) 티켓은 페이지/기능 단위로 생성합니다.
     • 2) 한 티켓에는,
       • 프론트/백엔드 구분이 있고
       • 한 사람만 할당되어 있어야 하며
       • 하나의 기능만 포함되어 있어야 합니다.
     • 3) 학습할 수 있는 기술 위주로 티켓을 생성합니다. (위코드에서는!)
       • 예를 들어, "개인정보취급방침"과 같은 퍼블리싱 업무는 필요 없습니다.
       • 예를 들어, 회원가입에 필요한 정보가 10개 이상이라고 할 경우, 프론트-백앤드가 협의하여 5개 정도로 줄여서 기획을 바꿔줍니다. 굳이 똑같은 원리로 동작하는 것들을 10개씩 만들어 볼 필요는 없습니다.
     • 4) 기능 구분을 명확히 합니다.
       • 예를 들어, 프론트는 로그인 페이지 구현도 "로그인 화면 구현" 과 "로그인 API 붙이기"가 나뉘어져야 합니다. >>> ex) 메인 페이지 레이아웃, 메인 페이지 검색 기능, 메인 페이지 Feeds API 붙이기
       • 예를 들어, 백앤드는 "아이템 수정/생성/삭제" 를 Endpoint(or Method) 기준으로 각각 3개로 나뉘어져야 합니다. >>> API (GET, POST) 각각 상세히 나누기, 데이터 모델링, 데이터 클래스 작성, 데이터 업로드 모두 상세히 나누기
4. 각자의 역할을 분담하여 티켓 별로 담당자를 지정합니다.
5. This Sprint:  이번 스프린트에 해야 할 업무
6.  In Progress로: 바로 시작할 티켓, 현재 진행하고 있는 티켓
7. PR 생성 후 In Review: 로컬에서 개발 후 리뷰를 받을 티켓
8. Done으로 옮기기 위해 피드백을 정확하게 본인의 티켓에 적용한다.
9. 완료 된 업무는 Done으로 옮긴다.

04. Example

"결국엔 모든 것이 태도와 소통의 문제입니다." 함께 기획하며 티켓을 만들고, 이번 스프린트에 해야 할 일과 현재 진행중인 일을 나누고 공유하는 모든 과정이 더 나은 소통을 통해 더 나은 결과물을 만들어내기 위한 것입니다. 티켓을 생성하고 완료하는 것도 중요하지만, 그 과정에서 내가 앞으로 해야 할 일들과 현재 하는 일들을 어떻게 공유할 지, 서로의 도움이 필요한 업무가 있을 때 어떻게 도움을 요청하고, 누군가 나에게 도움을 요청하는 순간에는 어떻게 반응하고 풀어나갈지 고민하는 여러분이 되었으면 좋겠습니다 :)

 

Slack 활용법

01. What to do

1. 빠른 소통을 위해 팀 단위로 슬랙 채널을 생성합니다.
2. 팀 슬랙 채널에 팀의 repository 주소를 연동시켜 알림을 받을 수 있도록 합니다.

02. How to do

:: Slack + Github

• 팀 슬랙방에서 Pull Request, Merge 여부, Review, Comments 를 실시간으로 알림 받을 수 있습니다.
• 리뷰가 달렸다는 알림을 받았을 때는 리뷰 반영을 최우선으로 진행해주세요!
• 다음 명령어를 슬랙 채널에 입력하여 해당 채널에 github 알림을 연동/해제 시킬 수 있습니다.

:: github 알림 연동

/github subscribe wecode-bootcamp-korea/프로젝트이름 reviews comments

Example)
/github subscribe wecode-bootcamp-korea/11-PrettyCloud-frontend reviews comments

:: github 알림 해제

/github unsubscribe wecode-bootcamp-korea/프로젝트이름

Example)
/github unsubscribe wecode-bootcamp-korea/11-PrettyCloud-frontend

---

피그마

현재 UX/UI 분야에서 가장 인기 있는 디자인 툴 중 하나 -> 협업 기능이 특히 강화

온라인에서 사용할 수 있는 디자인 툴로, UX/UI 디자인 및 프로토타입 제작을 위한 기능들을 제공합니다.

웹・앱・인터페이스 디자인 등 다양한 분야에서 사용되며, 디자인과 개발 과정에서 필요한 여러 협업 기능을 지원

 

개발자 핸드오프(Hand-off) 기능

피그마는 개발자 핸드오프 기능을 강화

디자인 단계에서 개발 단계로 전달하는 과정을 핸드오프

기존 디자인 툴은 핸드오프 과정에서 많은 파일과 내용, 정보 등을 별도로 준비하고 공유해야 했습니다.

하지만 피그마는 피그마 하나로 디자인, 이미지 파일, 폰트, 간격, 사용자 인터렉션 등 모든 것을 전달

 

. 디자이너도, 개발자도 디자인 외에 추가로 정보를 전달하고 수집할 필요가 없게 된 것이죠. 이런 장점 덕분에 디자이너와 개발자 간의 소통 시간이 단축되고, 오류도 줄어 더욱 빠르게 웹사이트 또는 앱을 출시할 수 있습니다.

실시간 공동 편집(Collaboration) 기능

멀티 플랫폼을 지원

 동시에 여러 사용자가 협업하여 디자인 작업을 할 수 있죠. 디자이너와 클라이언트, 또는 디자이너와 개발자가 함께 작업할 때 유용하며, 실시간 채팅과 주석 기능을 통해 실시간 피드백을 주고받을 수 있습니다.

디자인 시스템(Design System) 구축 기능

피그마는 디자인 시스템을 쉽게 구축할 수 있게 도와줍니다. 디자인 시스템을 구축하면, 일관된 디자인 및 브랜드 이미지를 유지할 수 있으며, 재사용 가능한 디자인 요소와 UI 컴포넌트를 제작할 수 있습니다.

편리한 라이브러리(Library) 관리 기능

피그마는 라이브러리 관리 기능을 제공하기 때문에 자주 쓰는 디자인 요소를 쉽게 관리할 수 있습니다. 팀 라이브러리에 다른 멤버가 새로운 디자인 요소를 업데이트하면 자동으로 동기화하여 사용할 수 있기 때문에 팀 라이브러리 관리도 쉽고 빠르게 가능

 피그마는 누구나 무료로 사용할 수 있다는 특징- 기본적인 기능만으로도 대부분의 디자인 작업이 가능

 웹 브라우저에서 작동하기 때문에 별도의 프로그램 설치없이 공유 링크 URL 하나로 어디서든 파일을 열람하고 작업

피그마 단축키

• V 선택 도구 : 객체를 선택하거나 이동할 때 사용됩니다.

• A 직선 도구 : 선, 화살표, 사각형 등 직선을 그릴 때 사용됩니다.

• T 텍스트 도구 : 텍스트를 입력,수정

• Space + 드래그 화면 이동 : 마우스 커서에 따라 원하는 영역으로 이동

• Ctrl +R 레이어 이름 변경 : 선택한 객체의 레이어 이름을 변경

 

• Ctrl + G 그룹화 : 여러 객체를 그룹화하여 관리하기 쉽게 

• Ctrl + Shift + G 그룹 해제 : 그룹화된 객체를 해제

• Ctrl + D 객체 복제 : 선택한 객체를 복제

• Ctrl + [ 뒤로 보내기 : 선택한 객체를 뒤로 보냅니다.

• Ctrl + ] 앞으로 가져오기 : 선택한 객체를 앞으로 가져옵니다.

 

파일 생성

Figma에서 새로운 프로젝트 파일을 만들려면 ‘New design file’ 버튼을 클릭하면 됩니다.

 

파일 생성 후, ‘# 모양의 아이콘’을 누르면 디바이스 옵션(예: 모바일, 태블릿, 데스크탑)을 선택할 수 있습니다. 원하는 디바이스 해상도를 선택하면 작업할 수 있는 프레임이 자동 생성됩니다.

파일 내보내기

작업을 완료했다면 저장할 레이어를 선택하고 ‘Export’를 클릭해 주세요.

원하는 파일 형식(PNG, JPG, SVG, PDF)을 지정하고, ‘Export’ 버튼을 눌러 파일을 저장

 

코멘트 달기

Figma는 팀원들 간의 소통을 원활하게 할 수 있도록, 파일에 댓글을 추가할 수 있는 기능을 제공합니다. 이를 통해 팀원들과 의견을 공유하고, 작업에 대한 피드백을 주고받을 수 있습니다.

파일에 댓글을 추가하려면, ‘말풍선 모양의 아이콘’을 클릭한 후 원하는 위치에 댓글을 입력

 

유용한 기능

오토 레이아웃 (Auto Layout)

피그마는 디자인 요소의 크기와 위치를 자동으로 조절해 주는 오토 레이아웃 기능을 제공합니다. 이 기능으로 디자인의 일관성과 효율성을 높일 수 있습니다.

오토 레이아웃을 사용할 레이어를 선택하고 Shift+A 단축키를 눌러주세요. 그러면 우측에 Auto layout 패널이 생성되며 해당 기능을 사용할 수 있게 됩니다.

 

플러그인 (Plugin)

피그마는 다양한 플러그인을 지원하여 디자인 작업을 보다 효율적으로 수행할 수 있습니다. 예를 들어, 자동 레이아웃 플러그인을 사용하여 레이아웃 작업을 자동화하거나, 아이콘 라이브러리 플러그인을 사용하여 아이콘 작업을 쉽게 수행할 수 있습니다.

새로운 플러그인을 추가하고 싶다면 상단의 ‘리소스 툴’을 선택하세요. 원하는 플러그인을 검색하고 설치할 수 있습니다.