01.'다시' 웹디자이너가 되려는 준비를 시작했다.
당신은 늦었습니다. 여기서 이야기는 시작한다.
- 생각들
나는 내 삶에서 가지는 내 시간을 무척 좋아한다.
운동을 해도 되고 여행을 해도 되고 책을 읽어도 되고 게임을 해도 되고 영상을 봐도 되고 재미난 일들을 해나가도 되고.
일을 하게 되면 하루 중 많은 시간 일을 하면서 보낸다. 24시간 중 많은 시간을.
나의 삶에서 일이란 돈보다 내가 관심을 가지는 일들이었다. 그래서 내 통장은 항상 가난했다.
앞으로도 내 통장은 가난할 것이다.
- 포트폴리오
전에 만들어 놓은 포트폴리오랑 작업물을 "샘"에게 확인을 받았다. 회사에서 가지고 나온 작업물은 따로 없어서 전에 가구회사에 다니는 웹디자이너에게 과외를 받은 적이 잠깐 있는데. 그때 사이트 리뉴얼 한 거랑 프로모션 한 것들이 있었다. 이것을 "샘"에게 보여주었다. "샘"은 쓱 보시고는 흐흠. 별로 맘에 들어하지는 않으신 듯했지만 아무튼 이것들은 다음에 마지막 개인작업물 쪽으로 넣자고 하셨다.
'다시' 웹디자이너가 되려고 하는 현시점에서 나는 웹디자이너 포트폴리오를 만들어야 했다.
웹디자이너 포트폴리오란 무엇일까?
UI/UX디자인이라면 링크에 있는 것인데. 앱을 론칭하는 건지 앱을 개선하는 것인지부터 기획서를 작성하고 주제는, 리서치는, 와이드프레임, 색상, 컬러 등등을 설명하는 것을 해야 한다.
사이트 리뉴얼은 링크에 있는 것처럼 어떤 콘셉트인지, 색상은, 폰트는 어떤 걸 썼는지. 등을 설명하는 ppt기획디자인을 만들어주어야 한다. 처음 나는 사이트 리뉴얼만 하면 다 되는 줄 알았다. 나의 착각.
상담을 들으면서 나에게 맞는 포트폴리오를 만들려면 3개의 사이트 리뉴얼, 1개 UI디자인, 1개는 BX, 프로모션, 개인작업물 이렇게 준비해야 한다고 말하셨다.
요즘 웹디자이너로 지원을 하려면 UI디자인 포폴이 필요하다고 한다. 그래서 1개를 꼭 만들어야 한다고.
"샘"은 일단 가볍게 사이트 리뉴얼하면서 실력을 보자고 하셨다.
-사이트 리뉴얼
사이트 리뉴얼은 트렌드가 지난 사이트를 찾아 새롭게 리뉴얼하는 작업이다.
처음 주제를 정해야 한다. "샘"은 사이트를 선정하는 기준을 말해주셨다.
1. 최대한 촌스럽고, 옛날 사이트를 찾아라.
2. 글로벌한 브랜드가 좋다고. 그 이유는 이미지가 많고 모두가 아는 브랜드이기 때문이라고.
ex) 스타벅스, 맥도널드
3. 미래지향적 주제도 나쁘지 않다고(AI인공지능, 테크놀로지)
일단 리뉴얼할 사이트 10가지 이상을 선정해 오라고 하셨다.
유명한 브랜드가 뭐가 있었지? 세계적으로 유명한 브랜드는? 검색을 하면서 사이트를 찾아보고. 그러면서 이미지를 찾기 쉬운 브랜드인지 찾아보고. 커피용품도 좋고 패션의류도 좋고 뭐든 생각나는 것들을 마구 검색해 보았다.
과제를 하면서 여러 조건을 생각하면서 찾는 게 또 쉽지 않았다.
"샘"은 평소에 '비핸스', '지디웹'에 들어가서 디자인 보는 눈을 키워야 한다고 시간 될 때마다 들어가서 보라고 하셨다. 특히 '비핸스'에 자주 들어가라고. 이곳에 최신 트렌드에 맞는 디자인을 많이 볼 수 있다고 하셨다.
https://www.behance.net/search/projects?sort=featured_date&field=web+design
- 주제선정
수업은 월, 수, 금으로 2시간 진행된다. 사실 수업이라기보다는 작업한 것에 대한 피드백을 받는 건데. 2시간 내내 피드백을 받는 게 아니라. 작업한 것을 보면서 잠깐 피드백받고 이렇게 해라. 저렇게 해라. 방향을 알려주는 시간을 가진다. 나에겐 이런 피드백이 필요하다고 생각했다.
나는 얼추 20개 중에서 이리저리 보면서 이미지가 얼마 없다든가. 사이트 만들기 힘들 것 같은 것들을 없애고. 10가지를 선정했다.
https://www.jollibeefoods.com/
https://www.jejuair.net/ko/main/base/index.do
http://www.sta.or.kr/new_home/
https://www.benq.com/ko-kr/index.html
"샘"에게 10개 정도 선정한 것을 보여주었다.
그리고 결과적으로 까였다. 이건 사이트가 잘되어있다든가. 이건 주제로는 별로라고. 혹은 브랜드가 좀 더 큰 곳을 선택하라고. 전자제품은 이미지를 찾기 힘들어서 웬만하면 정하지 않는 게 좋다고. 그리고 그중에 그나마 내가 선정한 것 중에 제주항공사 사이트가 있는데 이건 만들기 괜찮을 것 같기도 하다고. 아무튼 다시 찾아보기로 했다.
찾는 게 쉽지 않다는 느낌이 든다. 다시 어느 곳을 다시 찾아야 할까? 고민하다가. 외국계 항공을 찾아보았다. 핀에어 항공을 샘에게 보여주었더니. 좀 더 큰 곳으로 에어 프랑스 혹은 루프트한자를 추천해 주었다.
https://www.lufthansa.com/kr/ko/homepage
그리고 나는 에어프랑스 사이트를 리뉴얼하기로 했다.
"샘"은 오늘 선정한 사이트를 분석하기를 원하셨다.
일단 이 웹 사이트는 왜 존재하는가?를 생각해 볼 것.
1. 예약을 하려고.
2. 이미 예약을 한 사람들이 확인차...
3. 나 이거 탈까? 이 항공 뭐지?
4. 직원이 확인하기 위해.
먼저 이런 생각을 해보라고 하셨다.
-무드보드
이제 XD를 사용해서 무드보드를 해오라고 하셨다. 어떻게 무드보드를 해야 하는가? 여기에 대한 설명을 해주셨다.
먼저 무드보드에 내가 선정한 사이트이미지를 그대로 복사해서 가지고 와서 분석을 시작하는 게 첫 번째라고. 이때 경쟁사이트 몇 개 선정을 해서 사이트이미지 그대로 복사해서 가지고 온다.
그리고는 분석을 시작하는 것이다.
상단메뉴는 어떻게 되어 있는지. contents 구성은 어떻게 되어 있는지. 메인컬러는? 보조컬러는? 폰트는 어떤 걸 사용했는지. 아이콘은 어떤 걸 사용했는지.
일단 하나하나 쪼개서 분석을 해보는 것이다.
이렇게 분해를 해서 분석을 하고 정리한 것을 무드보드에 담아 둔다.
그다음에는 내가 리뉴얼을 하기로 한 사이트를 보면서 특징은 무엇인지. 장점은 무엇일까? 단점은 뭐지? 불편한 부분은 무엇이지? 개선방향은 어떻게 하는 게 좋을까? 모르겠으면 다른 곳들은 어떻게 개선을 했는지 찾아보는 리서치도 해보고.
이런 식의 흐름으로 진행을 하면서 무드보드에 쭈욱 글을 써보는 것이다.
이렇게 하고 나서 내가 사이트 리뉴얼할 건데 어떤 concept으로 해야 할지를 정해 보는 것이다. 여기서 많이 참고하는 게 이미지스케일이다.
사이트 리뉴얼을 할 때 어떤 형용사를 쓸 것인지를 먼저 정해야 한다.
ex) 귀여운, 사랑스러운, 재미있는
이렇게 형용사를 정하고 여기에 해당되는 귀여운 이라는 라운드에 있는 컬러를 선정해서 작업이 진행될 것이라고 정해두는 것이다.
여기서 살짝 모호할 수 있으니. 검색을 통해 형용사에 어울리는 이미지를 찾고. 컬러에 맞는 이미지를 찾아 무드보드에 담아둔다.
그리고 스타일을 이렇게 할 거라는 것도 담아둔다. 깨짐이나 클리치, 양면/이면, 왜곡 등의 스타일에 맞는 이미지를 찾아 무드보드에 담아두면 된다.
https://kr.freepik.com/free-vector/glitch-background_3978477.htm
이런 작업들이 선행되어야지 나중에 사이트를 리뉴얼할 때 작업물이 이상한 곳으로 가지 않는다.
트렌드 한 좋은 사이트를 검색해서 전부 무드보드에 가져온다. 이 작업이 생각보다 오래 걸린다. 최대한 많을수록 좋다.
그리고 마음에 드는 레이아웃을 잘라 붙여서 사이트를 만들어보는 것이다. 2~3개를 만들면 된다. 이때 전부 다른 느낌의 사이트로 만들어보는 게 중요하다.
-와이어프레임
이 정도까지 되면 이제 와이어프레임을 만들기 시작한다.
여기서 중요한 부분은 이미지의 배치와 내용들을 디테일하게 적어야 한다는 것이다. 메인에 들어가는 중요문장부터 상세내용까지 디테일하게.
처음에 좀 막막해서 비교사이트를 가지고 와서 여기에는 이렇게 저기에는 이걸로 생각하면서 정해갔다. 와이어프레임을 다 하고 피드백을 받았다.
그다음으로 디자인 초안 작업이 들어갔다. 다음 시간까지 작업해 오기로.
