[코딩온] 프론트엔드 입문 Day 8~10 (1차 프로젝트 2~4)
지난 월요일(15일)부터 1차 프로젝트가 본격적으로 시작되고, 팀원들의 추천으로 내가 팀장이 되어 팀원들과 함께 프로젝트를 진행하다보니 정신이 없어서 이번주는 일주일치 기록을 한번에 작성하려고 한다.✍️
일단 현재까지의 진행상황을 정리해보자면,
11~12일(목~금)
1. 팀원들 모두 참고할만한 사이트를 공유해보고, '가상의 의류 브랜드 쇼핑몰 만들기'로 최종 주제 선정.
2. (패션도 분야가 다양하기 때문에) 우리가 원하는 레퍼런스 페이지 선정하고, 브랜드 이미지와 타겟층 결정.
3. 컬러나 폰트 등 디자인적인 요소 결정하고, 페이지 제작 업무분담 완료.
회의를 통해 이런 사항들을 결정하면서, 틈틈이 기획안도 작성했다.
여기까지가 지난주에 진행된 내용들이고, 이번주는 진도가 아주 빠르게 나갔다. 솔직히 나를 포함해 팀원들 모두 우리 팀 진행 속도가 느린 편이라고 생각해서 조바심이 나기도 했는데, 다른 팀들이 리더님께 브리핑하는걸 얼핏 들어보고 오히려 우리가 빠른 편이어서 놀랐다.😲
15일 월요일 - Day 8
오전에는 프로젝트 기획과 관련해서 지난 금요일에 결정하지 못한 세부적인 내용들을 조율했다. 아이콘 디자인 통일, 상단 배너 메가메뉴 기능 제작 결정, 서브 페이지 필터 기능의 디자인, 상품 상세페이지 디자인 등 함께 의논해서 결정한 것들이 많아서 '하나의 작업은 회의의 연속'이라는걸 느꼈다.
오후에는 우리 팀의 기획안을 최종적으로 정리하여 리더님께 브리핑하고 피드백을 받았다. 기획이 괜찮다는 얘기를 듣고 각자 담당하는 웹 버전 페이지의 제작을 시작했다. 작업하고 있는데 리더님이 우리 팀 진행상황을 확인하고 "이 팀은 걱정할게 없어"라고 말해주셔서 뿌듯하면서도, 한편으로는 왠지 서운한 마음이 들어서 걱정해주셨으면 했다.😆
16일 화요일
수업 없는 날이라 집에서 열심히 내가 담당하는 페이지의 웹 버전을 제작했고, 웹 버전 제작이 끝나면 모바일로 넘어가야 하기 때문에 모바일 버전의 시안도 미리 만들어봤다. 이 날은 작업을 하면서 팀원들끼리 피그마의 코멘트 기능으로 수정사항을 공유하고, 깜빡 잊었던 요소를 추가하거나 수정하느라 바빴다. 기획이란 언제나 처음 결정한 내용으로 Fix되는게 아니라 그 때의 상황에 따라 수시로 변화할 수 있다는걸, 알고는 있었지만 이번 작업을 진행하면서 새삼 깨달았다.
이 날까지는 크게 어려운 점이 없었다.
17일 수요일 - Day 9
월요일까지 현업에 10년 이상 종사하고 있는 디자이너 리더님이 특강을 해주셔서, 이 날 오전에 우리를 담당하는 메인 리더님께 기획안 브리핑을 다시 했다. 우리가 제작하는 페이지의 개수는 많지만 따져보면 구성이 같은 것들이 많아서 그것들은 1개로 봐야한다며 추가적으로 제작할 페이지들을 알려주셨는데, 제작할 페이지가 순식간에 늘어나서 약간 멘붕이 왔다.😵
팀원들 모두 각자가 담당하는 웹 버전 페이지를 제작하느라 바쁜 것 같아서, 새롭게 추가된 페이지들의 웹 버전은 팀장인 내가 러프하게 구성을 짰다. 그리고 이 날 오후에 회의를 통해 새로운 페이지들의 구성을 확정했고, 그간 웹 버전을 만드느라 바빠서 신경도 쓰지 못한 모바일 버전에 대한 디자인적인 요소들을 결정했다.
18일 목요일
새로 추가된 페이지들의 구성을 전날 회의를 통해 확정했기 때문에, 디자인적인 부분을 수정/보완했다.
이 날의 원래 계획은 추가된 페이지들의 웹 버전 제작을 완료하고, 모바일 버전의 제작을 하나라도 시작하는 거였다.
하지만 아침 9~10시쯤부터 저녁 6~7시까지 웹 버전만 4개를 만드느라 모바일은 손도 못 댔다.
19일 금요일 - Day 10
오전에는 각자 담당하는 웹 버전 제작의 마무리 단계에 들어갔고, 리더님께 우리 팀 진행상황을 공유했다. 반복적으로 사용하는 요소들을 컴포넌트로 만들었는지, 오토 레이아웃은 되어있는지 질문하셨는데.. 컴포넌트는 이미 지난주에 기획안이 처음 나오고 메인 페이지를 제작할 때부터 만들어서 사용하고 있었고, 오토 레이아웃은 요소마다 적용 여부가 다른 상황이었다. 그렇게 말씀드리고 칭찬을 들었던 것 같은데, 지금 글을 쓰면서 아무리 돌이켜봐도 어떤 칭찬을 받았는지 기억이 나지 않는다.😂
오후에는 웹과 모바일의 디자인 회의를 진행했다. 이전까지는 웹과 모바일의 구성이 100% 같아야 한다고 생각했었는데, 회의를 진행하며 많은 쇼핑 플랫폼이 디자인적으로는 같지만 구성적인 부분은 다른 경우도 있다는게 떠올라서, 우리도 모바일 버전의 이벤트 페이지는 웹 버전과 구성을 다르게 만들기로 했다.
각자 주말에 어떤 작업을 할건지 계획을 공유하고, 이번주 일정 끝!
어제(금요일) 우리 팀 진행상황 브리핑 이후에, 리더님이 유저플로우(User Flow)를 작성해보면 우리가 제작한 페이지가 어떤 구성을 갖고 있는지 한눈에 파악할 수 있다고 피드백을 주셨다. 나는 단순하게 'A에서 B로 갈 수 있다' 같은걸 생각했는데, 유저플로우 작성에 앞서 검색을 해보니 생각보다 더 논리적인 작업 같아서 지금 열심히 고뇌하면서 작성하는 중이다.🤔
★ 유저플로우(User Flow): 사용자가 해당 화면에서 어디로 넘어갈 것인지 예측하며 설계하는 화면 기획. 크게 '유저 골(User Goal)'과 '태스크 플로우(Task Flow)'로 구성되어 있다.
1. 유저 골(User Goal)은 사용자가 최종적으로 어디로 가려고 하는지 '목표'를 의미한다.
2. 태스크 플로우(Task Flow)는 사용자가 목표를 달성하기 위해 거쳐야하는 과정.
/
★ 유저플로우는 항상 간결하고 구체적으로, 유저가 정확히 뭘 했고 어떤 결과가 나왔는지 작성해야 하기 때문에, 화살표가 3개 이상이거나 갑자기 이상한 방향으로 진행되지 않아야 한다. 화살표가 너무 많으면 아예 분리해서 작성하는 것이 좋다. (또한 유저플로우는 도형마다 의미가 달라서 확인하고 사용하는 것이 좋을 것 같다는 개인적인 생각!)
다음주는 드디어 프로젝트 진행 마지막 주간인데.. 일주일 안에 웹 버전은 프로토타입 적용해서 기능적인 부분들 완벽하게 구현하고, 모바일은 제작부터 디자인과 기능까지 전부 완료하고, 최종발표를 위한 PT준비까지 하는게 가능하..겠지?😅
프로젝트 마지막까지 힘을 내보자!!
