0️⃣ 레퍼런스 수집
우리 팀을 소개하는 페이지인데 진부하거나 딱딱한 페이지로 만들기는 싫었다.
그래서 여러가지 레퍼런스를 수집했다.
1. 인스타그램
가장 많이 사용하는 SNS인 인스타그램을 활용해 친숙함을 주고, 편한 UI를 제공하고자 했다.
2. 벨로그
현재 기록을 남기고있는 플랫폼이기도 하고 직관적인 UI를 가지고 있어 깔끔한 인상을 줄 수 있을 것 같았다.
3. 스파르타 코딩클럽 홈페이지
내배캠의 아버지 스파르타코딩클럽의 홈페이지를 변형해서 만드는 것도 재밌을 것 같았고, 강의를 통해 배운 요소들을 잘 녹여낼 수 있는 요소가 많았다. (헤더, 메인 배너 등)
💫 Instagram 형식으로 결정!
그 중에서 가장 사용자에게 친숙한 UI를 가지고, 지금까지 배운 강의를 활용해서 만들 수 있고, 게다가 DB까지 활용가능한 인스타그램 형식으로 만들기로 했다.
1️⃣ 와이어프레임 설계
피그마를 활용해서 와이어프레임을 설계했다.
그래도 내가 제시한 아이디어이니 인스타그램 와이어프레임도 제작해보자라는 생각으로 피그마로 직접 설계했다.
0. 디자인 가이드
각자 개발해서 github로 합쳐야하다보니 디자인의 통일성이 필요했다.
그래서 내배캠의 메인컬러와 회색, 그리고 검정색을 사용하기로 했다.
1. 메인페이지
메인페이지에는 우리 팀명, 팀 소개, 개발 기록을 볼 수 있는 게시물까지 볼 수 있도록 했다.
- 팔로우, 규칙, 새 글 작성하기 버튼
- 각자의 프로필을 누르면 소개페이지로 이동
2. 새 글 작성하기
메인에서 만들기 버튼을 클릭하면 새로운 게시글을 작성할 수 있다.
이건 db에 저장되었다가 자동으로 페이지에 반영될 수 있도록 했다.
3. 개인 소개 페이지
각자 소개하는 페이지를 만들었다.
본인을 소개할 수 있는 프로필 사진 1장, 그리고 자신을 표현할 수 있는 사진 1장 이상을 담아 만들 계획이다.
이 페이지에서 본인의 git이나 블로그에 접근할 수 있도록 버튼을 설계했다.
2️⃣ 역할 분배
개발자 역할
백가희 : 팀장, 게시글 추가 페이지 제작 (html, css)
강다연 : 개인페이지 제작 (html, css)
김태익 : 메인페이지 제작 (html, css)
임민지 : 와이어프레임, 멘션 및 게시글 DB, 버튼 및 상호작용 구성
-> (1. 게시글 추가 및 업데이트를 위한 DB 2. 개인 페이지의 댓글 작성&불러오기 위한 DB)
이렇게 각자의 역할을 나누고 github를 통해 협업하기로 했다
3️⃣ 개발 스택 선정
🛠️ 사용 stack
- html
- css
- firebase
- github
- javascript
4️⃣ 링크
🔗 Github 링크
팀원들과의 협업을 위해 레포지토리를 생성하고, issue 탭을 활용해서 서로 무엇을 하고 있는지 확인 가능하게 하기 위해 각자 할 일을 적었다.
https://github.com/minjee2758/TeamIntroduction
🔗 Figma 링크
🌟 오늘의 피드백
역할 분배한 것을 기록할 때는, 자세하게 처음보는 사람이 봐도 이해할 수 있도록 작성하기
