brunch

You can make anything
by writing

C.S.Lewis

by 헤이보스 Jun 25. 2023

12.'다시' 웹디자이너가 되려는 준비를 시작했다.

당신은 늦었습니다. 여기서 이야기는 시작한다.

"샘"에게 피드백을 받았다.


메인 컬러로 나는 노랑을 선택했다. 왜 나는 노랑을 선택했을까?

안전모를 생각하다가 안전을 위해 쓴다는 행위에 생각을 하게 되었다. 그러면 왜 안전을 위해 쓰는가? 주의하기 위해서 아닐까? 여기까지 생각을 못했다. 안전을 위한다는 행위에 신경을 썼다.

안전모의 색상은 노랑이다. 왜? 노랑은 주의하라는 색상이라는 것이다.

나는 이 주의하라는 색상으로 메인을 잡은 것이다.

그리고 노랑은 키트,아기자기,활발함에 사용을 한다.

내가 만드는 앱에는 신뢰감이 느껴지는 색상을 하는게 좋으니.


"샘"은 블루색으로 변경하라고. 블루색은 신뢰를 나타내는 색으로 많이 사용한다고 한다.

그리고 나는 메인 컬러를 변경하게 되었다.


작업을 하면서 2D아이콘을 가져와서 작업 진행을 했다. 그리고 "샘"은 2D로 하지 말고 3D 아이콘을 찾아서 사용하기를 권했다.

찾는 방법은 구글에서 3D icon 또는 figma 3d icon라고 검색하면 여기저기 나오는데 참고해서 사용할 것.


현재 나는 컴퓨터 수리를 하는 앱에 대한 기획부터 디자인까지 진행하고 있다.

여기서 수리사례를 담는 부분이 있는데 

"샘"은 사진만 있으면 안되고 기사님 이름이나 설명도 넣는게 좋겠다고.


그리고 디자인을 하면서 / 를 쓰지 말라고 했다. 가벼워보인다고. ㅣ 이것을 쓰라고 하셨다. 그런가? 


오늘은 메인 컨포넌트와 인스턴스 컨포넌트에 대한 설명을 들었다.

XD에서 메인 컴포넌트를 어떻게 만들고 인스턴스 컴포넌트를 어떻게 만드는지 그리고 수정을 하면 어떻게 되는지 알게 되었다.


일반적으로 앱을 만들때 모바일 페이지가 500개 이상은 거뜬이 되는데 이때 이걸 사용하면 색상이나 글자를 손쉽게 바꿀 수 있다고 했다.


그러니 메인 컴포넌트를 한쪽에 모바일 디자인을 만들때 꼭 만들어 두어야 한다고 했다.



---

피드백에 따른 작업이 들어갔다.

1. 인물사진 합성을 해서 배치하고

2. 스토어 사진 변경. 사진 편집을 해보고.

3. 스토어 내용 추가. 벤치마킹.

4. 3D icon 찾기. 여기서 중요한건 내가 원하는 컬러로 된게 있어야 한다는것.

figma 사이트가 있기는 했는데.

구글을 검색해서 했다. 이게 좀더 편한 느낌이. 

원하는 이미지를 가지고 와서 포토샵에서 바탕화면과 분리해서 새롭게 저장을 해서 사용하는 걸로.


예전에 설치해둔 커리어리 앱에서 알람이 떳는데.

https://www.youtube.com/watch?v=dur8iaUuBaA

페이스북 디자이너가 일하는 법이라는 영상인데 어느순간 클릭하고 듣고 있었다.


https://www.youtube.com/watch?v=-Ve9HbKTWD4

이안 스폴터라는 디자이너인데 넥플(앱 스트랩트)에서 인스타그램 앱 아이콘 리뉴얼하신 분으로 본게 있는데. 여기서 이렇게 강의하다니 어느순간 클릭하고 보게 됬다.


작업하고 벌써 4시간째...

몸이... 집중도가 떨어진다.


메인 컴포넌트와 인스턴스 컴포넌트에 대해 스스로 이해했다고 생각했는데. 아니였나보다. "샘"에게 다시 물어봐야 할듯 하다.

---



---

얼추 작업을 하고는 피드백을 받으러 갔다.

일단 먼저 메인 컴포넌트에 대한 것을 다시 물었다.


색상을 한꺼번에 바꾸기 위해서 하는 것이라고. 메인 컴포넌트에서 복사를 하면 인스턴스 컴포넌트가 된다.

글자는 개별적으로 변경을 해야 한다는 것. 즉 메인 컴포넌트는 색상 스타일을 변경하기 위해 저장해두는 방식이고 글자는 개별적으로 변경을 해야한다는 것. 문자를 위한 컴포넌트가 아닌 색상을 위한 컴포넌트이다. 

이걸 이해하자. 


문자는 문자스타일이라고 따로 있다. 기본적으로 10개정도 미리 만들어서 앱을 만들때 손쉽게 하기 위해서 미리 만들어두면 좋다고 한다.


그리고 수정할 것은 컴퓨터 사양에 대한 부분에서 손님이 이 앱을 사용할때 카테고리별 드롭으로 되어 있어서 불편할 것이다. 그리고 어떻게 사양을 찾는지 알려줘야 하고 알게 되면 사진으로 인식할 수 있는 부분이나 이 부분이 맡는지 물어봐야 하는 프로세스를 제공해야 한다는 것. 이런부분들을 수정하기로 했다.


앱 디자인을 하면서 3D icon이 들어가는데 여기서 맘에 안드는게 있었나보다. "샘"은 바꾸기를 원하셨다. 그리고 한개의 사이트를 알려주셨다.

https://emojipedia.org/

여기서도 3d icon을 찾을 수 있다고.


다음시간까지 나머지 앱 디자인부분을 전부 해오라고 하셨다.

이걸 다 만들면 이제 UI/UX PT를 만들거니 비핸스 사이트가서 미리 괜찮은 것들 무드보드에 저장해두라고.


오늘은

처음에 내가 다시 물어본 메인 컴포넌트 때문에 샘의 목소리가 좀 높아졌다는 것 빼고는 평탄했다.

---



---

성시경의 노래를 듣는 걸 좋아한다. 콘서트가고 싶지만 같이 갈 사람도 없는지라. 아무튼 오늘도 성시경의 유튜브에 들어가 노래를 들으며 집으로 왔다.


매일 나름대로 차근히 차근히 하고는 있지만 기간이 길어지는 이 시간들이 맘이 편하지만은 않다. 물론 일을 해도 맘이 불편하다. 일을 안하는 지금은 조금 덜 불편한 정도인 듯 하다.


다시 작업을 시작했다.

힘내자.


휴. 아직 남았지만 여기까지.

내일 하는 걸로. 다 할 수 있을까?


아침에 일어나자마자 작업을 시작했다. 수정하고 만들고 계속. 운동하고 밥먹고 다시 시작하고.

제대로 하고 있는 거겠지?


생각보다 해야 할 양이 많아서 조급했다. 그리고 집중해서 하나씩 하느라. 스트레스를 받았다. 

그래도 어찌어찌 해서 피드백을 받았다.


피드백 후 포인트는?

오늘까지 어느정도 마무리가 되는 건데.

일단 전체적으로 보면서 수정할 것들을 알려주셨다.


1. 글이 양쪽으로 있는 것을 모바일에서는 밑으로 놓아서 보여주라고.

2. 디테일하게 간격이나 폰트가 일정하게 보면서 수정 마무리를 할것.

3. 카테고리 아이콘을 수정하기. 일자로 3줄을 넣은 걸로 했는데. 다른 것도 보여주셨다. 이런걸로. ㅁㅁㅅㅁ

4. 특정한 아이콘을 메인컬러로 만들기.

5. 아이콘을 이제는 일러스트로 만들라고. 그래서 가지고 오라고. 이미지는 깨지니깐.

6. 그리고 로고 드로잉을 10개 이상 해오라고. 직접 손으로 드로잉해오기.

7. 앱 네이밍 생각해오기


pt기획서를 psd로 만들어로 오라고. 저번에 쓴 기획서를 보고서 이번엔 키포인트를 잡고 다듬어서 해오라고 하셨다.


흠. 언제 다하지. 

---



---

일요일 아침 죽을 맛이다. 할게 많아서. 


그래도 차근히 작업을 한다. 

뭔가 하긴 하는 건가? 차근히 하자. 휴.

해야 할게 많음. 그렇다고 설렁설렁 할 수가 없다.!!!

젠장?!!


휴. 그디어 모바일정리 완료. 

하고 나서 보니 이거 별로 안되는데 왜이렇게 시간 걸리지?

뭔가 힘듬.
실무에서 한다면 더 많을텐데. 휴. 난 안할려나?

암튼 잘했어. 잘했어. 다음.

이렇게 얼추 완료?


이제 다음은 노션에 만든 PT기획서를 psd로 한페이지정도로 정리해야 한다.

끝이 없다.

작가의 이전글 11.'다시' 웹디자이너가 되려는 준비를 시작했다.
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari