[💻 코드스테이츠 FE 44기]pre-project - 4일차

✔️ 시작

오버플로우 클론 코딩이지만 화면 개선을 하면 좋다 생각해
피그마를 이용해 화면 구성을 진행하기로 했다.

---

📍 피그마로 화면 구성하기

와이어프레임 작업 중 나는 메인페이지를 맡았다.
(물론 마지막엔 다 같이 협업하면서 화면을 구성했다.)

헤더, 푸터, 검색창, 질문 카드 등이 들어 갔다.

기존 스택 오버 플로우를 보면 알겠지만...
UI 부분이 좋은 편은 아니라고 생각했다.

또한 회의를 통해 양쪽 사이드에 배치한 내용은 삭제하기로 해서
메인 화면이 좀 더 심플해 질 것 같다.

와이어 프레임으로 작업을 진행했다.
(메인 구성 화면이 있었는데... 팀원들과 같이 진행하다 보니 사라졌다...ㅠ 그나마 남겨둔 것..)

질문자, 질문 제목, 질문 내용, 좋아요 수, 질문 수, 조회수, 채택 여부가 필수로 들어갔다.

핀터 레스트를 보면서 UI/UX 벤치마킹을 수집하고
수집한 내용을 바탕으로 4가지 버전의 질문 카드를 만들었다.

마지막 4번째로 진행하게 되었다.

• header : 불필요한 요소는 제외 시키고 필요한 내용만 배치했다.
  - 로그인 전/후를 나눠 보이는게 다르다.
• main : 양 사이드 내용이 사라졌고 질문에 집중했다.
  - 질문 검색란을 강조했다.
  • 전체, 최신순, 인기순인 필터링 탭메뉴를 만들었다.
• answerCard : 유저의 정보가 보이도록 배치했고, 아이콘을 이용해 직관적으로 표시했다.
  - 채택된 경우에는 상단 우측에 "selection"이라고 표시했다.
• footer : 세세한 기획을 한게 아니라... 카피라이트만 넣어두었다.

팀원들과 협업 하면서 다이렉트로 의견 제시하고 배치하니 금방 끝낼 수 있었던거 같다.

전체적으로 심플해 졌고 직관적으로 변경되었다.
아직 확정은 아니라 언제든지 기능에 따라 수정 될 듯 싶다.

---

✔️ Keep

• 스택 오버플로우 메인 페이지 UI/UX를 분석해 개선 할 점을 체크 했다.
• 다른 벤치마킹을 하면서 UI를 어떻게 배치했는지 확인할 수 있었다.
• 화면 구성을 통해 빠진 기능이나 불필요한 기능, 머릿속으로만 생각하던 내용이 구체화되었다.
• 한명이 아닌 여러명의 시각으로 보니 다양한 의견을 들을 수 있었다.

---

✍️ Problem

• 팀장의 부재로 인해 오늘 중요한 내용을 결정짓지 못해 마무리하지 못했다.
• 내 피그마 파일을 공유해 진행해서 내가 맡은 메인페이지 와이어 프레임이 구성이 날라가 아쉬웠다...ㅠ
• 모바일 버전을 생각하지 못 한게 아쉬웠다.
  - 그래도 전체적인 구성이 심플해서 금방 진행하지 않을까 싶다.
• 아무래도 디자인은 주관적으로 의견 제시하는게 조심스러웠다.
• 하루종일 피그마 작업만해서 브랜치 만들기, 칸반 만들기 등의 다음 진행을 하지 못했다.
• 피그마 작업 마무리 후 각자 할 일 하기로 했지만 혼자 프로토 타입 몇개 하려고 했다.
  - 이 때 다른 분도 하시려고 했는지 진행 중이였고 또 다른 한 분은 이사실을 알지 못 한체 전체 회의 때 인지하셨던 문제가 있었다.

---

🚀 Try

• 팀원들과 회의, 협업이 진행 될 경우 기록으로 남겨 두어야겠다.
• 팀원들과 무언가 진행할 경우 소통하고 같이 진행 해야겠다.
• 지금도 잘 하고 있지만 팀원들, 백엔드와 같이 협업할 때는 소통이 중요하다 생각한다.
  - 물론 지금도 잘하고 있다. 항상 말하는 걸 조심하고 말 했을 때 이 의견의 타당한지, 상대방이 기분나쁘지 않을지 등을 고려하면서 진행해야 겠다.

---

✏️ 마치며

이번 시간에는 프론트 팀장님의 부재로
남은 팀원 끼리 진행하게 되었다.

결정할 부분도 있었지만 같이 피그마를 작업하면서
좀 더 돈독해진 기분이다.

또한 작업할 스택 오버플로우 메인 페이지 UI/UX를 분석하면서
유저 입장으로 생각하고 이랬을 경우의 불편한 점 등을 고려하게 되었다.

이부분은 프론트로서 중요하다 생각하고 추후 디자이너와 같이 협업 할 때
의견을 제시할 수 있는 프론트가 되어도 좋다 생각한다.