11.'다시' 웹디자이너가 되려는 준비를 시작했다.
당신은 늦었습니다. 여기서 이야기는 시작한다.
저번까지 메뉴트리, 로그인/회원가입에 대한 피드백을 받았다.
이번에는 하단 gnb를 눌렀을 때 나오는 메인에 어떻게 배치를 할 것인지에 대한 것을 작업해서 피드백을 받으면 된다.
이 작업을 하면서 메뉴트리가 변경이 되었다. 좀 더 심플하게 가다 보니. 거의 없어짐.
전체적으로 무척 간소해졌는데. 일단 gnb홈에 대한 피드백을 받아야 한다.
오늘은 일단 나름 현재를 점검해 보았다. 사이트 리뉴얼 2개가 되어 있고. 현재 UI디자인 1개를 진행하고 있다. 다음 달 중순이면 UI디자인은 마무리되지 않을까? 싶었다. 그리고 BI, 포스터, 타이포레터링, 인포그래픽까지 되어 있다. 그리고 앞으로 사이트 리뉴얼 1개가 남아있다는 걸 알고 있다. 일단 여기까지가 내가 알고 있던 건데.
그래서. 이런 생각이 들었다. 사이트 리뉴얼 1개를 안 하고 지금까지 한 것들 좀 정리하는 게 좋지 않을까? 싶었다.
그래서 일단 원장님께 말을 하다가. 샘도 같이 와서 이야기를 하게 되었다. 원장님은 한번 생각해 보자는 거였는데. 샘은 포폴만 만든다고 해서 다가 아니라고. 포폴 pt를 만들어야 한다는 것이다.
포폴 pt를 만드는 시간도 생각을 해야 한다고. 그리고 여기서 마무리하면 연봉이 낮아진다고.
내가 쇼핑몰에 다녔다고 했더니. 거기밖에 못 들어간다고. 더 높은 데는 못 들어간다고. 그렇게 만족하냐는 거였다.
그런가?
일단 어떻게 생각하시는지 묻고 싶었다. 샘은 좀 반대를 하시는 것 같았다. 일단 생각해 본다고 하고.
일단 UI디자인 와이드프레임을 현재 진행하고 있다. 무드보드를 켜주었다. GNB 메인을 만들어 가는 거였고.
샘은 보면서 수정할 것들을 알려주셨다. 현재 나는 컴퓨터 수리에 관련한 앱을 만들고 있다.
메인에 수리기사 실시간 현황 같은 것을 넣는 게 좋겠다고. 스토어를 GNB에 넣고 수리내역을 마이수리 쪽으로 넣는 걸로 수정하기.
서비스지역에 대한 생각을 해야 한다고.
본사에서 하는 서비스지역인지.
아님 중개사이트 같은 서비스지역인지.
ex) 배달의 민족인지.
ex) 세탁특공대, 오늘수거인지.
내가 만들려는 앱이 어느 쪽인지. 이것도 생각해서 반영하기.
저번에 로그인과 회원가입 와이드프레임을 만들었다. 이번에 추가를 하라고. 주소 넣는 거랑. 전화번호 넣는 부분을.
그러면서 xd에서 프로토타입을 눌러서 사진처럼.
여기를 눌렀을 때 이렇게 된다는 것을 표시하라고 하셨다.
현재 메인에 눌렀을 때 나오는 페이지를 전부 만들라고. 작업이 많아질 것 같다. 흠.
피드백을 하고 이제 중요한 이야기를 하셨다.
내가 앞으로 어떻게 진행돼야 하는지 물었다. 내 생각은 4~5개월 정도로 생각했는데. 샘의 이야기를 들으면서 7~8개월은 생각해야겠다는 게 결론이었다.
현재 UI디자인을 하고 있는데. 이걸 마무리해도. pt까지 하면 2달은 더 걸린다는 것. 사이트 리뉴얼을 2개만 하면 적다고. 하나 더 하는 게 좋다고.
그냥 이렇게 마무리하면 스스로의 연봉이 작아진다고. 선택할 수 있는 회사도 작아질 것이고.
그러면서 기존에 했던 분들의 작품을 보여주면서 이분은 얼마에 갔고. 이분은 얼마에 갔고. 이분은 얼마에 갔고. 한번 참고해 보라고. (흠. 이분들은 실력이 이미 좋으신데.)
그리고 자기소개서는 어떻게 써야 하는지. 면접은 어떤 답변이 나오는지. 그리고 어떤 문제를 출제하고 이것을 어떻게 풀어야 하는지. 그리고 실제로 면접에서 어떤 내용이 오가는지. 등을 보여주셨다.
분명 처음에도 보여주기는 했지만. 다시 생각해 보는 현시점에서
이거 내가 할 수 있을까? 가능할까? 자신감이 없어졌다.
샘한테 이거 제가 할 수 있을까요? 하니깐.
할 수 있다고. 하신다. 자신은 없다.
이제 3개월 차. 샘의 말을 따르면 기간이 더 걸릴 것 같은데. 괜찮을까 싶기도 하다.
그래도 끝까지 하면 그래도 전보다는 다르게 디벨로프 해서 더 좋게 다닐 수 있을까? 좀 고민이 됐다. 처음에 어떻게 된다고 이야기했지만. 이렇게 오래 걸리는 게.
전체적으로 7~8개월 흠. 나 괜찮을까? 내가 살면서 이렇게 준비해 본 게 언제였더라? 20대 초 중반 때?
그때까지 생활비는 괜찮을까? 아님. 이렇게 준비하는 게 맞을까?
샘은 이렇게 말했다.
피라미드 그림을 그리고는 위쪽엔 유학파, 메이저대학생들 그 밑으로 전공자들과 학원파. 그리고 그 밑으로 국비지원을 하는 이들.
디자이너가 엄청 많고 경쟁률도 높다고. 나 살아남을 수 있을까? 무진장 자신이 없어진다.
무드보드를 열자. 작업이다.
일단 해야 할 것은
주소입력하는 것. 핸드폰 입력하는 것. 만들어 보자.
일단 잘 모르겠으니 벤치마킹을 하자.
조사한 것을 참고하기.
gnb홈에서 하나씩 눌렀을 때 나오는 부분을 만드는데 생각보다 쉽지 않다.
일어나자마자 어제 했던 이후를 생각했다.
금액을 어떻게 해야 하는지에 대한 고민이었는데.
다른 곳 경쟁사는 어떻게 하는지 찾아본다.
살짝 모호한 면이 있어서 이걸 선택할 것인지 아님 다른 앱을 더 참고해야 하는지 생각해 본다.
홈에서 눌렀을 때 들어가는 것들을 피드백 전 최대한 작업을 해본다.
오전 초안을 잡았다. 이제 피드백받고 수정하기로.
머리가 띵하다. 아침에 일어나자마자. 3시간 동안 달렸다.
피드백 후
오늘은 모바일에서 형태->이미지->글자 순으로 작업이 돼야 한다고.
모바일을 보는 시선은 왼쪽에서 오른쪽이다.
웹에서는 글자가 나오고 그림이 나오기도 한다.
왼쪽에서 오른쪽으로 형태나 이미지로 갔다가.
다시 왼쪽으로 글자순으로 가기도 한다고.
그러나 모바일에서는 형태, 이미지, 글자 있으면 맨 왼쪽이 형태->이미지->글자 순으로 본다고.
기초니깐 꼭 기억할 것.
그리고 모바일에서는 예,아니오를 넣을 때 아니오가 왼쪽이고 예를 좀 더 크게 좀 더 넓게 해줘야 한다고.
그리고 오늘 한 것 중에 필요 없는 거는 지우고.
추가적인 작업을 진행했다.
예약까지 되었으면 예약확정과 수리기사님에 대한 정보도 넣고 요금 확인서도 넣고 영수증 내역이나 리뷰 쓰는 거나 쭈욱 의식의 흐름처럼 되는 것을 샘이 알려주어서 작업이 들어갔다.
학원에서 웬만하면 작업을 좋아하지 않는데. 컴이 좋지 않아서이다.
간단히 수정할 것들을 하고 샘의 피드백을 다시 받았다.
내가 사진 저 모양만 넣는다니깐.
블로그 댓글에서 안 봤냐고 누가 이렇게 하냐고.
블로그 댓글 좀 보고라고.
(나 블로그 댓글 잘 보는데. 많이 봤는데. 저렇게 넣었다가 너 인터넷 좀 하라는 식으로 한소리 들었음.)
네네.
(나 인터넷 많이 하는데.)
그리고 app bar에 대한 지적을 받았다.
명확하게 써야 한다고.
저번에 보내는 링크 확인 했냐고.
응? 있었나?
아. 있었구나.
링크 보면서 알려주심 이게 app bar다.
쫌 읽어주면 안 되겠니?
(나 읽었다. 기억이 안 날 뿐이다. )
이제 gnb홈을 했으니.
이제는 gnb 스토어를 하라고.
카테고리 - 상품 리스트 - 상품 정보 탭 -> 상품 상세 ->상품 옵션 선택(바텀시트) -> 장바구니 OR 바로 구매 -> 장바구니 -> 결제 (카드 결제 페이지) -> 주문완료
까지. 다음시간까지.
아. 필터 작업도.
오늘은 스토어 부분을 건드릴 생각이다.
일단 먼저 어제 생각했던 사진 부분을 수정해야 한다.
그리고 일단 작업해야 할 것들에 대한 벤치마킹 리서치를 시작한다.
앱들을 들어가서 캡처를 하고 이미지를 가지고 온다.
그리고 초안을 잡아보자.
흠. 근데. 다시 스토어 부분을 수정을 하면서 들어가야 할 듯.
스토어에 들어가는 카테고리를 다시 생각해봐야 할 듯하다.
이게 명확하지 않으면 다음으로 넘어가는 게 쉽지 않을 듯.
일단 내 스토어 필요한 건 무엇일까? 수리에 필요한 용품이 필요하지 않을까? 아님 관리를 위한 용품이나.
흠. 일단 생각하면서 상품을 클릭했을 때 상품결제 부분으로 넘어가는 부분을 어느 정도 초안을 잡아야 할 듯하다.
이리저리 리서치를 하다 보니. 작업한 것을 보고 있으면 별로 해놓은 게 없는 것 같다. 아직 많이 남았네. 휴.
아직도 멀었다.
이렇게 하겠다는 초안은 잡아가는데. 부족하다.
아침에 일어나자마자 정신을 차리고 다시 작업에 들어갔다.
피드백 전에 좀 더 디테일하게 잡아야 하니.
스토어를 좀 더 디테일하게
상세페이지도.
스토어, 상세페이지, 카테고리, 필터, 결제창까지 하고.
이제 피드백받으러.
---
나는 무능한 사람인가? 이런 생각이 들 때가 있다.
내가 원해서 일을 했고 내가 원해서 퇴사를 했다. 내가 원해서 했는데. 정말 원해서 했을까?
무언가 일을 해서 돈을 벌어나가야 내 한 몸 살아갈 수 있다는 생각에 하는 게 아닐까?
살아보니 정말 원하는 것이 있는데 얻지 못한 경험은 많았다. 정말로 정말로 원하는 것을 얻지 못했을 때 나이 들어 나도 펑펑 울었던 적도 있다. 나는 무능한 사람일까?
나에게 처음 일이란 내 남는 시간을 쓰러 간다였다. 집에 있으면 책이나 보고 영상을 보면서 살아가는 삶. 이렇게 허송세월을 지낸다? 그럼 일이라도 하면서.
그런데 어떤 일? 내가 조금이라도 관심을 가지는 곳에서 일을 하자였다.
지금 나는 어떻지? 지금은 하나의 분야를 잡고 살아가고 싶었다.
돈을 버는 건 맞아. 관심 있는 것도 맞아. 그리고 내가 평생 가지고 가야 할 분야를 설정해서 살아야겠다는 생각이 들었다.
나는 내 나이 때에 비해 항상 돈을 많이 못 버는 사람이었다. 하지만 나는 내가 그래도 관심이 가는 일을 했다고 생각한다. 하지만 무언가 부족하다는 것을 느꼈다.
그게 분야라는 것이었다.
일을 하면서 그 분야에 오랫동안 일을 해오는 사람들을 보아왔다. 그 분야를 더 공부하고 그 분야를 생각하는 사람들을.
나에게 이런 분야가 있을까?
나에게도 나를 표현할 수 있는 분야가 정해져야 내 길을 갈 수 있겠다는 생각이었다.
나이가 들어도 돈을 벌지 못해도.
나는 이 분야로 죽을 때까지 갈 거야 이런 거 말이다.
---
피드백받은 것은?
스토어 부분이었는데. 부품을 넣는 게 좋겠다고. 손님이 수리를 받을 때 만약 부품에 문제가 있다. 그래서 수리를 들어갔고. 영수증을 받았다. 그런데 이 금액이 맞는 걸까? 이때 앱스토어에서 판매되는 부품을 검색해서 납득이 간다면? 좀 더 신뢰가 가지 않을까?라는 것.
처음에 나는 수리를 하니깐 수리용품이나 관리할 수 있는 스토어를 넣을까? 싶었다. 그런데. 듣고 보니 부품에 대한 것도 넣어야겠다는 생각.
일단 이 부분을 추가해서 수정하기로 하고.
그리고 스토어에서 부품이 추가되면서 카테고리를 다시 수정하고. 필터를 수정하라고.
그리고 자신의 컴퓨터의 사양을 적어주세요.라고 해두었는데. 샘은 이걸 보면서 정해놓은 폼이 없다면 손님은 자기식대로 적어놓기에 파악하기 힘들다고. 컴퓨터사양에 대한 선택지를 폼을 만들어서 선택할 수 있게 수정하라고.
gnb홈 부분에 옆으로 넘겨서 보는 것을 하나정도만 하고. 밑으로 내리는 방식으로 전부 변경하라고.
일반적으로 옆으로 넘기는걸 잘 안 하게 된다고.
밑으로 내리는 걸 많이 하게 되니깐.
그러니. gnb 홈 부분에 있는 것들을 수정하기.
일단 수정에 들어갔다. 빠르게 수정이 들어갔는데. 좀 고칠 곳이 많아서 다음 시간까지 살짝 빠듯했다.
샘은 수정할 것을 보시고는 일단 필터에 대한 부분에서.
'정렬'과 '제외'에 대한 설명을 하셨다.
어떤 리스트가 있으면 인기순, 신상품, 낮은 가격순, 높은 가격순, 상품명순 클릭하면 쭉 나오는 이거는 정렬이라고.
필터는 '제외'를 넣는 건데.
ex) 우드로 되어 있는 상품을 찾는다. 그러면 우드라는 검색 목록을 누르면 우드가 아닌 상품을 제외하고 우드가 나온 상품들이 나오는 것.
인텔이라는 제조사 상품을 찾는다. 그러면 인텔이라는 검색 목록을 누르면 이에 관련 상품이 나온다고 다른 건 제외된다.
그래서 이 필터에 대한 부분을 다시 수정하기로 했다.
그리고 스토어에서 카테고리를 눌렀을 때 넘어가는 리스트 부분을 새로 만들라고 하셨다. 일단 이 두 개는 수정 및 추가하기로.
이로써 와이어프레임을 얼추 완성할 수 있었다.
이제 디자인을 해야 하는 단계에 들어갔다.
일단 샘은 와이어프레임에서 몇 개 복사를 해서 이걸 먼저 디자인을 해오라고.
여기서 처음 디자인은 어떻게 해야 하는지 말해주셨다.
일단 컬러와 폰트에 대해서 말하셨다.
먼저 폰트는 프리텐다드 폰트를 사용하라고.
일반적으로 이걸 많이 사용한다고 하셨다.
검색을 해보니 일반적으로 UI/UX하시는 분들은 이걸 사용한다고 되어 있다.
프리텐다드 폰트를 다운받고.
이번엔 컬러
이것을 설명할 때 샘은 G마켓 디자인에 들어가서 설명을 하셨다.
Colors - Gmarket Design System
컬러
G마켓을 보게 되면 메인컬러 그린이 되어 있다.
첫 번째
메인컬러 하나랑.
비슷한 컬러 3가지.
두 번째
서브컬러와 CTA(call to action) 컬러를 정하기.
여기서 쪼금 헷갈린다면 G마켓 앱을 깔아서 확인해 보기. 일단 깔자.
세 번째
state color을 알고 있을 것.
state color는 무엇인가?
ex) 신호등에서 빨간불은 건너지 마라. 파란불은 건너라.
이것처럼 모두가 알고 있고 일반적인 규칙이 있는 컬러라고 생각하면 쉽다.
빨강은 무언가 문제가 생겼다. 취소, 탈퇴 등 주의 및 에러 색상
파랑은 별점, 공식 태그 등 신뢰 색상.
그린은 쿠폰, 사은품 혜택 안내 및 활성화 텍스트 색상
주황은 배송지연 관련 색상.
이런 식으로 정해둔 규칙이라는 것.
네 번째
모바일에서 가장 많이 쓰는 컬러는 무엇일까?
블랙&화이트이다.
그리고 그레이 컬러도 많이 쓴다.
그런데 한 화면에 그레이 컬러를 쓸 때 채도로 더 다양하게 해서
화면을 볼 때 위계를 따져가면서 컬러를 넣어야 한다는 것이다.
가격은 검정으로 타이틀은 검정보다 좀 더 연한 #222222 정도 서브본문은 #616161 정도이고 기본배경은 화이트이고 모달배경은 F5 F5 F5 디바이더 라인은 #EEEEEE 이렇게?
즉 위계를 잘 따져서 할 것.
여기까지 내가 만든 와이어프레임 중에서 몇 개 샘이 선택한 것을 디자인을 하기로 했다.
아이폰에서 보는 모바일디자인을 만드는 것으로.
일단 샘은 아이폰 psd파일을 주셨다. 가이드라인으로 해서 디자인을 만들라고 하셨다.
암튼 디자인 과제가 있으니. 하기로.
그리고 노션페이지를 하나 공유해 주셨다. 이건 꼭 읽어보라고. UI/UX참고자료라고 하셨는데.
이중에
브런치에 잘 정리된 것이 있어서 흥미롭게 보았던 것.
모바일 UI·UX 디자인 시 고려해야 할 가이드라인 1 (brunch.co.kr)
정말 정리를 너무 잘해 놓으심.
이분것 가이드라인 1~ 끝까지 보면 좋음.
아무튼. 와이어 프레임에 몇 개 추가 수정할 것들 하고.
선택해 놓은 것들을 디자인해오라고. 가이드라인에 맞춰서!
---
처음 본격적으로 걷기 운동을 할 때 아침저녁 1시간씩 하는 2시간이 아쉬웠었다.
그 시간에 다른 걸 하면 좋을 것 같다고 생각했다.
하지만 지금은 꾸준하게 정해진 시간에 걷는다는 게 나를 조금은 체계적으로 만든다는 걸 느꼈다.
분명 그 시간에 다른 걸 해도 되지만
정해진 시간에 운동을 하면서 생각을 정리하고 계획적으로 살아갈 수 있게 스스로를 컨트롤하게 되는 걸 느꼈다.
---
일단. 와이어프레임이 거의 완성인데. 몇 개 추가할 것들을 해준다.
ios가이드라인에 맞춰서 디자인작업을 시작한다.
폰트는 프리텐타드 폰트를 사용하고.
가이드라인에 맞춰서 와이드프레임으로 작업한 것을 맞춰나간다.
아. 컬러. G마켓 디자인으로 가서 컬러를.
일단 메인컬러와 서브컬러로 어떤 것을 할지 생각해 보자.
내 앱에 어울리는 건 뭘까?
그레이 컬러 4가지를 선정하는 것.
이걸로 할까? 저걸로 할까?
계속 시간이 흐른다.
안 되겠다. 일단 초안을 잡자. 그리고 수정이 들어가는 게 좋겠다.
이러다간 아무것도 못한다.
일단 컬러별로 정하고. 이미지 넣을 것도 찾아보고.
일단 초안을 잡았다. 제대로 했는지 모르겠다.
나중에 다시 수정하기로하고
[초안작업 중. 변경예정]
