[코딩온] 프론트엔드 입문 Day 11~13 (1차 프로젝트 5~7)
이번주 역시 팀 프로젝트 진행 중이어서 일주일의 기록을 한번에 작성하려고 한다.✍️
일단 지금까지의 상황을 정리하자면, 지난주에 웹 버전은 제작 마무리 단계였고 모바일은 이제 막 제작을 시작했었다.
프로젝트 진행이 반환점을 돌면서 많은 것들을 느낀 한 주여서, 느낀 점도 같이 작성해보려고 한다.
22일 월요일 - Day 11
원래 계획은 이 날 점심을 먹고 출석체크가 끝나면 회의를 통해 주말동안 발견한 수정사항들을 공유하려고 했지만, 팀원 두 분이 건강상의 이유로 오지 못해서 대면회의를 못 했다.😅 회의에서 다루려던 내용들은 슬랙에 공유했고, 팀원 C와 하루종일 개인 작업을 진행했다. 이 날부터는 웹 버전에서 깜빡 잊고 추가하지 않은 기능들을 구현했고, 모바일에도 똑같은 기능을 추가했다.
(쇼핑몰 페이지에서 사이즈 선택이나 배송메모 같은건 '드롭다운', 긴 글을 접어놓는건 '아코디언'이다. 잊지 말자!)
23일 화요일
월초부터 동기들에 리더님까지 감기로 고생하는걸 봤지만 나는 안 걸릴거라고 생각했는데 그건 나만의 착각이었나보다. 이날 아침에 눈을 떴는데 머리가 깨질 듯이 아팠다. 내가 감기가 오기 전에 머리부터 아픈 편이라 불안했다. 비염이 있어서 재채기와 가래는 평소에도 가끔 있지만 콧물 흐르는건 없는 편이었는데, 콧물도 자꾸 나온다. 감기라고 60% 확신하며 나머지 40%는 설마 하면서 남은 작업을 진행했다.
🛠️ 이 날은 전체적인 작업 마무리 단계에 접어들었다! 모바일에도 '필터' 버튼을 누르면 열리도록 팝업 기능을 구현했고, 웹과 모바일 모두 제품 컬러를 누르면 사진이 변하도록 프로토타입을 추가했다.
24일 수요일 - Day 12
전날은 아침에 눈을 떴을 때 머리가 아팠는데, 이 날은 온몸이 두들겨 맞은 느낌이었다. 감기라고 70% 확신하게 되어 하루종일 마스크를 쓰고 있었다. 월요일날 못 오신 팀원 A가 독감에 걸렸다고 하셔서 요즘 감기 한번 걸리면 정말 심하다고 생각했다.😷 그리고 오후에 리더님께 우리 팀 진행상황을 브리핑하며, 우리 팀이 '모바일까지 진행하는 유일한 팀'이라는 얘기를 듣고 매우 놀랐다.
🛠️ 이 날은 웹과 모바일 공통으로 '배송지 관리' 버튼을 누르면 팝업이 등장하는 기능을 추가했고, 다양한 상품이 진열되어 있는 페이지에서 클릭하면 상단으로 돌아가는 to top 버튼의 기능을 연구했다.
☞ 웹 버전의 to top 버튼은 어찌저찌 구현에 성공했는데, 모바일은 딜레마에 빠졌다. 보통 to top 버튼은 화면 아래쪽에 배치된 경우가 많아서, 나도 프레임 아래쪽에 갖다놓고 프로토타입 미리보기를 실행했는데 버튼이 사라져서 보이지 않았다. 버튼을 위쪽에 배치하고 미리보기를 실행하면 기능이 정상적으로 구현되는게 보이지만 위치가 맞지 않는다. 버튼을 프레임 우측 중앙에 배치하려고 하면, 상품에 걸어놓은 오토레이아웃 안으로 들어가려고 한다. 오토레이아웃 때문에 버튼에 absolute position을 해버리면 기능 자체를 제대로 구현할 수 없다. 고민에 빠져서 다음날 집에서 조금 더 연구하기로 했다.
25일 목요일
최근에 온몸이 뻐근하고 피곤한 적이 많아서, 단순히 프로젝트 때문에 컴퓨터 앞에 앉아있는 시간이 길어서 그렇다고 생각했는데, (물론 그런 영향도 없진 않겠지만) 감기 때문일 가능성이 크다는걸 이 날 아침에 느꼈다. 눈을 뜨자마자 온몸이 쥐가 나는 것처럼 저릿한 느낌이 있었고, 목구멍에 가래가 한 꺼풀 씌워진 느낌이라 조만간 목소리가 변할 것 같다. 건강관리도 실력인데, 29일 프로젝트 최종발표까지 버틸 수는 있을 것 같지만 감기에 걸렸다는 것 자체로 굉장히 걱정스럽다.
🛠️ 이 날은 제작한 모든 페이지들의 세부 디자인처럼 아주 디테일적인 부분들을 보완했고, 페이지 제작이 거의 끝났기 때문에 피그마 파일 내부에서 웹과 모바일 최종완성본과 컴포넌트를 구역별로 나눠 정리하기 시작했다. 물론 전날 나를 고민에 빠지게 했던 모바일의 to top 버튼도 연구했다. 앞서 언급했듯이, 프레임 위쪽이나 중앙은 위치적으로 맞지 않는 것 같아서 프레임 아래쪽에 두고 디자인 패널의 Constraints와 프로토타입의 Interaction, Scroll behavior를 설정하고 미리보기를 했더니 내가 원하는 위치에서 기능도 제대로 작동했다. 막상 해결하니까, 어렵지 않은 문제를 가지고 전날 왜 그렇게 고민했을까 싶었다.😂
💡 느낀 점
1. 오전에 슬랙으로 팀원들에게 공지를 올리면서, 아무리 내가 팀장이지만 너무 상세한 것까지 신경쓰고 잔소리 많은 것 아닌가 싶어서 약간 소심해졌다. 우리 네 명의 포트폴리오에 들어가는 거니까 신경을 쓰는게 맞는 것 같지만, 학창시절 나를 괴롭혔던 완벽주의 성향이 다시 나타날까봐 걱정되었다.🤔
2. 첫 팀플을 진행하면서 깨닫게 된게 하나 더 있는데, 바로 '소통의 중요성'이다. 팀원 모두 모여서 각자 어제는 어떤 작업을 했고 앞으로 어떤 작업을 할건지 공유하는 자리가 있었어야 공통으로 하는 작업의 공정률 파악이 가능한데, 우리는 개인 플레이로 담당하는 작업하다가 정말 필요할 때만 모여서 회의하는 방식으로 진행했다. 그래도 충분히 잘 해냈고, 피그마가 협업툴이라 같은 공간에서 여러 명이 작업을 하니까 말하지 않아도 보면 알 수 있고, 피그마 내부에서 댓글 기능으로 수정사항들을 공유하며 작업하긴 했지만.. 각자가 담당하는 파트의 작업이 어느 정도 진행됐는지 공유를 안 하면서 작업하니까, 리더님이 팀 전체의 작업 공정률 점검할 때마다 팀장인 나의 개인적인 판단으로 몇 퍼센트 정도라고 대답하기가 곤란했다. 사람마다 생각이 달라서, 내가 보기엔 완성된 것 같아도 다른 팀원이 보기엔 아닐 수도 있는데, 내 판단만으로 몇 퍼센트 완성됐다고 얘기하는게 맞는걸까 의문이었다. 솔직히 이런 생각을 하는 내가 꼰대인가 싶기도 한데, 팀 단위로 진행하는 작업에서는 각자의 진행상황을 공유하는 자리가 어떤 형태로든 반드시 필요하다고 생각한다.
26일 금요일 - Day 13
드디어 프로젝트 수업의 공식적인 마지막 날!👏
오랜만에 팀원 넷이 전부 모여서 오전에는 프로토타입 이용해서 웹과 모바일 모두 전체적인 연결 작업을 끝냈다. 프로토타입 미리보기로 보여지는 화면에서 어색한 부분이나 모바일 버전 하단바 디자인 변경처럼 세부적으로 보완할 부분들을 수정했고, 연결이 제대로 됐는지 체크했다. 오후까지도 보완할 부분이 조금 남아서 계속 수정을 진행했다.
모든 수정이 끝난 후에 회의를 통해 다음주 월요일에 있을 프레젠테이션 준비를 시작하여, ppt 파일의 페이지별로 누가 작성할거고 전체적인 구성을 어떻게 가져갈건지 결정했다. 가장 중요한 발표자는, 나를 포함해 팀원들 모두 부담스러워해서 사다리타기 게임을 했는데 결국 내가 선정됐다. 사실 게임이 아니었어도 팀장이기 때문에 내가 했어야 한다고 생각하고 있던터라 크게 놀랍지는 않았다.🤭
여하튼 이렇게 1차 프로젝트의 공식적인 일정은 끝났고, 이제 주말동안 프레젠테이션 준비 잘 해서 월요일날 발표하는 일만 남았다. 대학 시절에 프레젠테이션 정말 자주 했었는데 오랜만에 하려니 새롭네!
프로젝트 종료까지 마지막 한 발 남았으니 무탈하게 유종의 미를 거둬보자!
