스파르타 코딩 캠프 본캠프 1주차를 돌아보며

돌아보며 기록하려니까 짧은 시간동안 한 게 은근 많아서 쓰기 벅차다. 하지만! 나중에 재밌게 읽기 위해서 써보도록 한다.

본캠프 1주차 미션은 팀원 소개 내용을 웹이나 앱으로 디자인하여 발표하는 것이다. 나는 빨리 진행하고 싶은 마음에 어떤 레퍼런스가 소개할 때 적합할 지, 어떤 기능이 있어야 수월할 지를 먼저 정했고 그에 따라 플로우가 자연스럽게 정해지므로 와이어프레임을 제작하고 남는 시간에 에셋을 제작하는 것으로 계획을 세웠다. 팀원 중에 한 분이 웹 보다는 앱으로 진행하여 작은 공간에서 퀄리티에 신경을 쓰자는 의견을 주었다. 우리는 적극 의견을 수렴하여 바로 앱 레퍼런스를 찾기 시작하였다.

그렇게 레퍼런스를 찾던 중에 당근마켓이 우리 소개를 할 때 적합해 보여 각자 당근마켓에서 미션에 적용하기 좋은 부분만 가져와 정리하였다.

그 와중에 내 생일날에 프로젝트 중이어서 팀원 분중에 이런 걸 가져오셨다. 한샘고급이 맘에 드는 부분

아무튼 그렇게 유저플로우를 화살표 붙여서 얼렁뚱땅 만들었다. 이때까지만 해도 너무 수월해서 금방 만들 것만 같았다.

와이어프레임은 윤주님과 내가 같이 만들었다. 그동안 소정님과 진희님은 디자인 시스템을 제작하였다.

디자인시스템

1,2,3안 컴포넌트 박스

1안 결과물

그렇게 1안 결과물이 나왔다. 월요일이었다. 수정하면서 홈화면은 지워졌다. 이때 아쉬운 점들이 많고 욕심이 많아서 무슨 일인지 4시간 동안 누워있어도 잠이 오지 않았다. 결국 새벽 5시에 일어나서 미쳐 생각하지 못 한 점과 부족한 부분을 미리 수정하였다.(팀원분들이 의견을 수용하지 않을 수도 있으니 복사본에 진행하였다)  

위에 글처럼 미리 작성하고 팀원들이 글을 읽고 다 같이 회의하는 시간을 가졌다. 데일리스크럼 대신에 말이다.

그렇게 나온 결과물 2안, 화요일이었다. 

이때 왼쪽으로 무한으로 넘어가는 인터렉션을 제작하였다.

그리고 왼쪽과 같이 브랜드 컬러와 너무 다른 점이 눈에 띄어서 오른쪽과 같이 컬러를 바꾸었다. 
이때 재밌는 일화가 있다. 왼쪽의 있는 결과물이 윤주님이 만드신 결과물이다. 이때 Auto layout이 제대로 안 잡혀 있길래 이 부분은 내가 알려줄 수 있겠다. 싶어서 다음날 알려주게 되었다. 위에 무한으로 넘어가는 인터렉션도 윤주님이랑 같이 제작했다. 중간 중간에 진희님도 구경하시면서 배워가셨다. 

틈새 팀원 자랑 (신기하게도 모두 MBTI가 다르다.)

개인 소개 페이지도 많이 업그레이드 되었다.

팀원의 다짐과 목표도 챗봇 형식으로 제작하였다. 재밌는 아이디어였다.

바텀바 위에 있는 사진이 내가 만든 것이다. 하지만 소정님이 아래 보이는 바텀바로 다시 제작하게 되었다. (나의 바텀바는 아직 미적으로 보기 좋지 못한가 보다 흑흑) 그래도 개선 후가 훨씬 보기 좋다.

그런데!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

 

우리 조의 크나큰 격변이 일어났다. 바로 플로우가 부자연스럽고 카드컴포넌트가 너무 뜬금 없다는 것이다. 그래서 우리는 전면 개편하기로 결정하였다. 쉽지 않은 결정이었지만 실천력 강한 팀원들의 적극성 덕분에 바로 수행하기로 하였다.

 

그렇게 나온 레퍼런스와 아이디어들이다... 기존 와이어프레임과 내용물을 토대로 새로운 뼈대를 잡기로 하였다.

홈화면의 변화과정이다. 정리과정에서 많은 부분이 제거되어 이것밖에 남지 않았다.

그렇게 나온 최종 결과물

이 발표 자료를 이용해서 발표를 진행하였다. 그렇게 받은 피드백 "모바일에는 호버링이 되지 않으니 신경쓰면 좋을 것 같다"  나는 피드백을 조금 더 받고 싶다는 마음에 결례를 무릎쓰고 튜터님 방으로 나중에 찾아갔다.

"튜터님 혹시 쉬고 계신가요...?"

"......."

"아 쉬고 계시군요 그럼 가보겠ㅅ..."

"안녕하세요 질문하실거 있으세요?"

"혹시.. 피드백 더 받을 수 있을까요?"

 

그렇게 성사된 기적의 추가 피드백 시간
그 피드백을 기록해보겠다.(기억하는 대로 쓰니 살짝 다를 수 있음)

"버튼은 컴포넌트로 만들면 좋아요"

"Corner Radius 값을 올리면 둥글한 컨셉의 앱 이미지와 잘 어울릴 것 같아요"

"본문폰트가 요즘엔 최소 14를 써요. 버튼은 조금 더 큰 폰트를 써야해요. 지금 이 버튼은 12폰트를 쓰고 있네요 너무 작습니다"

"오른쪽 사진처럼 택스트 간격을 줄여 Grouping을 시켜주세요. 글간격은 폰트크기의 1.2~1.5배가 평균적입니다. 120%가 피그마 내에서 기본적으로 사용하고 있는 간격일텐데 170%만큼 넓혔다면 그 근거가 필요합니다."

"컨셉츄얼한 앱과 잘어울리게 카드의 디테일도 신경써주시는게 좋습니다. 이름, MBTI같은 정보들이 너무 평범하게 나열되어 있어요. MBTI 정도는 뱃지로 빼서 사용해도 좋을 것 같습니다. 또한 카드에 그라데이션을 넣어 입체적으로 표현하셔도 좋을것 같아요"

"카드가 전체적으로 강강강 느낌이 있다. 약한 부분도 섞어주어 카드 레이어가 전체적으로 강약 조절이 잘 되어주면 좋겠다. 특히 이 MBTI 부분은 면으로 약하게 빼주어도 될 것 같다."
+"블러처리된 배경은 근거 있게 사용해야 해요."

빼기 전 후

기꺼이 피드백해주신 강진우 튜터님, 프로젝트 함께 잘 해준 이소정님, 박진희님, 김윤주님 감사하다. 😊

 

 

본캠 1주차 미션 끝