[Project_]TIH (개요, 와이어프레임, Github)

팀 소개 홈페이지 만들기(Team_Introduce _Homepage)

• 공부한 내용을 기반으로 팀 소개 홈페이지를 만들어보려고 한다

    1. 어떤 프로젝트를 만들고 어떤 기능을 넣을 지 적어보는 개요

    2. 기능을 간단하게 그림으로 구현해보는 와이어프레임

    3. 협업 도구

 

프로젝트 개요

한 줄 정리 :

  - 우리 팀과 팀원들을 소개하는 내용이 담긴 웹페이지 만들기

 

포함할 내용 :

  1. 프로필 사진, 이름, MBTI, 제일 좋아하는 게임, Github 링크,
       ‘GAME’ 각 알파벳으로 시작하는 단어로 자신을 소개

  2. 자신의 블로그 주소

  3. 팀원들의 코멘트

 

구성 :

  1. 홈 화면 구성 - 팀 소개(배너), 팀원 소개, 게임 소개, 메뉴추천, 응원의 한마디
  2. 팀 소개 - 팀 로고, 팀 설명, 팀 노션 링크
  3. 팀원 소개 - 각 팀원들 소개 (Toggle)
  4. 게임 소개 - 게임 추가, 글 삭제, 정렬방식
  5. 응원의 한마디 - 닉네임, 텍스트 박스, 버튼으로 구성된 댓글 입력창,
                              입력된 댓글 내용을 보는 메세지 박스
6. 메뉴 추천 - 음식 추천 버튼으로 글 입력 (팝업)

 

기능 :

  1. 팀 소개 페이지 - 하이퍼 링크로 팀 노션으로 연결
  2. 팀원 소개 페이지- 팀원 이름 클릭으로 설명 열기/닫기(Toggle)
  3. 게임 소개 페이지 - 게임 추가 (작성한 글을 저장하는 새로운 창 열기), 글 삭제, 정렬(Sort) 기능
  4. 응원의 한마디 - 닉네임 input, 댓글 input, 게시 button으로 구성된 댓글 입력,
                              InputBox 입력된 댓글 볼 수 있는 메세지 박스
  5. 메뉴 추천 - 음식 추천 Button 으로 글 추가, 글 추가 팝업창에는 음식 사진 업로드,
                      음식 이름 Text inputbox, 추천 이유 Text inputbox로 입력

---

와이어프레임

● 와이어프레임(Wireframe)?

 - 웹사이트의 골격이나 애플리케이션의 사용자 인터페이스(UI) 및 핵심 기능을
   나타내는 단순한 선과 도형으로 구성된 다이어그램.

 

● 팀 소개 홈페이지를 만들기 위한 와이어 프레임 ▼ ▼

 

- 다른 사람과 동시에 그리기 가능

  → 사용한 툴 : https://www.figma.com/ko-kr/wireframe-tool/

Figma: 협업을 위한 인터페이스 디자인 도구

 

- 즉, 코드를 작성하기 전에 어떤 것을 만들지, 어떤 기능을 구현할지 시각적으로 표현하는 것

- 와이어프레임을 사용함으로써 팀원과 협업함에 있어서 편리함을 제공

---

코드 공유 온라인 플랫폼 : GitHub

https://github.com/

GitHub · Build and ship software on a single, collaborative platform

 

● 작성한 코드를 효율적으로 공유하고 관리하기 위한 플랫폼

  - 팀원과 협업할 때에 코드의 내용을 텍스트로 주고 받는 것이 아닌 언어 자체로 
    쉽게 한 곳에 모으고 수정이 가능.

 

● GitHub를 사용한 방법

 - main, dev, 각자 코드를 작성할 공간(feature) 이렇게 3가지의 공간을 나눈다

 - main : 완성된 코드를 업로드

 - dev : 각자 완성한 코드를 합치는 공간

 - feature : 각자 이름을 정하고 맡은 역할에 대한 코드를 작성하는 공간

 

● GitHub 명령어 or 용어

 - pull : Github에 올려진 코드를 가져오기

 - push : 내 PC에서 코드 편집기로 작성한 코드를 Github에 업로드

 - fetch : 변경된 내용이 있는지 확인

 - merge : 선택한 경로에 합치는 것

 - pull request : 코멘트를 작성하고 합쳐도 되는 지 요청하는 것

 

 Github를 쓰면서 가장 중요한 것은 버전 관리

 팀원과 협업함에 있어서 가장 중요한 것은 소통이다