처음으로 디자인 관련 프로젝트를 했다. 약 2주간 피그마를 배우고 시작했는데 생각보다 재밌는 부분도 있었고, 어려웠던 점도 있었다. 그래도 무던하고 협력하고자 하는 마음이 큰 팀원들을 만나서 무사히 마칠 수 있었던 것 같다 (팀 잘만나는게 최고👍)
프로젝트 기간 : 2024.1.12 ~ 2024.1.29
주제 : 쿠팡 리디자인
주제 선정
쿠팡 리디자인, 잘못하면 독..🤔
우리 조원들과 논의 끝에 '쿠팡'이 요소들이 너무 많고, 통일감 없다는 얘기가 나왔다. 우리가 자주 사용하는 사이트인데 디자인적으로 너무 아쉬움이 컸어서 쿠팡을 선택했다.
그러나, 리더님은 기존 사이트가 존재하고 그것을 리디자인 할 때 정말 잘~ 해야 한다고 강조하셨다.. 그래서 리디자인 말고 새로운 사이트 생성으로 방향을 바꿔야 할 지 고민을 많이 했다.
그래도 자주 사용하는 사이트여서 평소에 이용하면서 불편함도 많았고 한번 디자인적으로 건드리고 싶다는 욕구가 강했다보니..
'우리는 예쁘게 디자인 할 수 있다!'는 마음으로 그냥 킵고잉 해봤다.
프로젝트 진행
회의는 짧고 굵게!😉
프로젝트 기간이 그리 길지 않다고 느껴서 개인이 각자 할 파트 초반에 나누고, 후에는 구상/계획 등을 구체적으로 해와서 회의시간에 각자 구상부분을 논의하고 서로 맞춰가는 편이였다.
그 전 프로젝트에서는 대충 생각-> 회의하면서 틀 잡아감 순이여서 회의 시간이 너무 오래걸렸던 경험이 있다.
쓸때없이 하는 논의도 없고, 바로 이야기 끝나면 작업하는 우리의 팀 환경이 너무나도 효율적으로 느껴졌다!!
<초기 디자인>
-> 이렇게 피그잼을 이용해서 각자 만든 페이지 그림에 추가/제거할 부분 이야기를 나누어서 큰 틀을 잡아 나갔다.
본격적인 디자인 시작!
큰 틀을 빨리 잡고, 공통적인 부분(색상통일, 크기 등)을 정하고 나서 바로 디자인을 시작했다. 사실 계획/구상 부분이 길고 오래 고민한다고 꼭 퀄리티 있는 결과물이 나오지 않는다고 느껴서.. 내가 좀 빨리 디자인을 시작하자고 어필하긴 했다..😼 (디자인하면서 더 논의하면 되니까..)
색상 조합은 어려워!
우리는 핑크+파랑의 조합을 사용하기로 했다. (나름 심오하고 많은 의미가 담겨있는 조합^^ㅎ) 다만 나는 디자인적인 큰 지식이 없다보니 이 두 색상을 포인트 느낌으로 어떻게 조합하면 좋을지 조금 고민이 많았다.. 안쓰자니 너무 심심하고, 쓰자니 어떤건 파랑, 어떤건 핑크..
🩷💙
결국, 같은 팀원분이 너무 파랑/핑크가 페이지마다 없어도 된다는 피드백을 받았다. 생각해보니 너무 색깔을 넣으려고 했던 것 같아서 연회색/하얀색 비율을 좀 늘렸다.
그리고 조원들과 논의해서 가격->핑크, 버튼 포인트색 ->파랑 정도로 통일하기로 하고 핑크는 정말 극소의 강조 포인트로 사용하기로 했다.
프로토타입과 컴포넌트, 어떻게 하는거야?
프로토타입이 아무래도 직관적인 기능이다 보니까 우리팀 포함 다른 팀 분들도 프로퍼티에 신경을 많이 썼던 것 같다.
그러나.. 나는 좀 어려움을 느꼈다.. 사실 좀 불편했다. 컴포넌트화 하고.. 요소들 분리하고.. 그 분리한걸 또 붙여서(?) 기능하도록 하는게 좀 어려웠다..
무엇보다 프로토타입은 무료기능,유료기능 제한적이라서 과연 내가 원하는 방향으로 작동이 되는지도 미지수였다.
-> 날 가장 어렵게 했던 부분이다. 일단 기능은
- 메뉴바 화살표를 누르면 숨겨져있던, '교통'부분이 나오고 첫번째 있던 '카페' 사라짐, 또 클릭된 부분은 핑크색 배경으로 나타남.
- 학원 누르면 '에듀윌 혜택'나오고, 다시 '카페'누르면 '스타벅스 혜택'나옴.
🩷💙
결론적으로, 리더님에게 질문을 많이 해서 할 수 있었다. 그리고 차근차근 '1.2.3.'과 같이 번호 붙여가면서 가장 먼저 분리해야할 것을 정리하니까 좀 이해가 가기 시작했다.
- 기존 만들었던 메뉴바('카페'는 핑크표시) + '카페'제거되고, '교통'부분 추가된 것도 같이 컴포넌트화한다.
- 이 2개에서, 기존 메뉴바의 화살표 클릭 시 두번째 메뉴바로 바뀌도록 프로토타입으로 효과 걸어준다.
- 기존 메뉴바를 그대로 끌고와서 2개 만들고, 한 메뉴바에는 '학원'이 핑크배경이 되도록 한다.
- '스타벅스 혜택' 프레임을 그대로 끌고와서 '학원 혜택'프레임으로 수정한다.
- 1번 메뉴바('카페' 핑크) 밑에 '스타벅스 혜택' 붙이고, 2번메뉴바('학원' 핑크) 밑에 '학원 혜택' 붙여서 2개씩 컴포넌트화 하고, 또 2개씩 컴포넌트화 하여 메뉴바+혜택 묶음으로 컴포넌트가 되게 한다.
- 카페 컴포넌트에서 학원 컴포넌트에 프로토타입 효과 걸어준다.
프로젝트 마무리
컴포넌트 분리는 중요하다!
이건 우리조만의 문제는 아니긴 했다.. 공통 컴포넌트를 정해놓고 재사용하기 보다는 다 만들고나서 리더님께 지적을 받고 그때 공통 컴포넌트 분리하는 작업을 했다.. 사실 이런 부분이 정말 중요하고 프로와 초보가 나뉘는 것 같다.. 아무래도 기능 구현에 급급하다보니 미루고 미뤘는데 리더님이 계속 중요하다고 말씀하셔서 뒤늦게 정리했다..
🩷💙
최종적으로 위와같이 정리했는데, 프로젝트 중간에 공통적인 컴포넌트들을 분리해서 같이 재사용하면서 썼는데 확!실!히 너~무 편했다.. 프로토타입 개인적으로 안걸어도 되고.. 공통적으로 쓰이는 헤더/푸터만 사용해도 개-운한 기분.. 왜 강조하셨는지 너무나도 알 것 같았다 ㅎ
느낀점
역시 이론수업 100번보다 프로젝트 경험 한번이 훨씬 기능도 잘 익혀지고 이론적으로 이해안갔던 부분들도 이해가 가기 시작하는 것 같다. 백문이불여일견.. 백문이불여일타.. 매번 깨닫는 부분이다.
또한 이번 프로젝트는 전 프로젝트와는 달리 내가 조금 주도적인 부분이 있었는데 이끌림 당하는 쪽과, 이끄는 쪽 둘다 경험해보니 역시 두쪽 다 고충(?)은 존재한다는 것을 깨달았다..
이끄는 쪽에서는 다른 분들이 조금 더 적극적이면 좋겠다는 생각이 들고, 이끌림 당하는 쪽에서는 이끄는 분들이 조금 더 듣는 자세가 필요하다고 느끼는데,그래서 나는 이번에 "OO님 생각은 어떠세요?"라는 질문을 많이 한 것같다...
큰 탈 없이 무난하게 끝난 프로젝트였다❣️
