TIL_컬러 시스템(+미니프로젝트)

10.23(수)

오늘 카메라랑 마이크랑 와이파이 잘되는지 미리 확인하려고 정시보다 미리 출석해서 테스트해봤다 다행히 잘 작동한다...

근데 출석 버튼 눌렀는데 알고 보니 핸드폰 인증까지만 되었구 출석버튼 한번더 눌러야하는것이였는데 바로 ZEP들가서 캠 작동되는지 확인 할생각에 저걸 까먹을뻔했지만 다행히 매니저님이 말씀을 해주셔서 출석시간 오바하지않고 잘 출석 완료하였다~귯귯귯

후후후 넘 졸리다 ㅜㅜ

 

어제 미니플젝으로 2틀안에  UIUX디자인을 혼자 제작하려 하다보니 강의를 들으면서 디자인 시스템을 만들어 UIUX에 적용시킬 시간이 부족해서 넘넘 아쉬운 마음에 오늘 강의는 컬러시스템 만드는 방법 3주차를 수강했다.

 

프라이머리=포인트컬러 입니다 프라이머리프라이머리!! 라고 강의 안의 강사님이 강조하셨다. 그래서 안까먹고 잘 기억할것 같다.

 

컬러 스타일 만들기

1:3:6 법칙-전체적 균형을 만들어 주고 사용자가 집중해야하는 부분을 더 쉽게 보여줄 수 있다.

 

포인트컬러(엑센트 컬러) / 세컨더리 컬러 / 백그라운드 컬러~~!

여기서도 포인트컬러는 프라이머리!! 라고 바로 나와야한다고 하신다. 안잊어버릴것 같다.

강의에서 강사님이 말씀하시길

어떤식으로든 내가 디자인해서 성과가 나면 이득이다.

성과란 뭐냐면 커머스 같은 서비스에서는 사용자들이 구매를 많이 하면 이득이고

금융서비스는 사용자들이 우리 서비스를 통해서 어떤 금융 행동을 많이 하면 이득이다.

 

나도 넘 공감된다.

 

디자이너가 성과를 내는 방법은 사용자들이 내가 직접 제작한 의도가 들어간 디자인을 예를 들어 광고에 들어갈 디자인이면 클릭을 유도하는 눌러보고 싶은 디자인을 제작하는게 목표이고 그게 성과로 이어진다면 좋은 디자인이라고 생각한다.

 

커머스 같은 경우도 하나의 브랜드를 소비자들한테 우리 브랜드는 어떤 브랜드인지 슬로건과 가치를 디자인에 녹여서 의도하여 만들 줄 알아야한다고 생각한다.

그리하여 사용자들에게 이 브랜드는 이런 브랜드였지? 하고 인식하고  신뢰할 수 있는 디자인에 도출 되어야 잘한 디자인이다. 컬러 하나하나 선택할때도 끊임 없이 고민해야한다고 생각한다. 이 브랜드와 잘 맞는 컬러를 사용하고 있는지 또는 너무 컬러가 강해서 앱디자인 제작시 사용자들이 눈이 불편하지 않을지 등등 그런것도 기본적으로 다 고려하고 제작 되어야한다. 암튼 주저리 글이 좀 길어졌는데 다시 강의들어야겠다.

 

/한번더 디테일하게 기록하자면/

컬러스타일은 기본적으로 2-3가지 색상으로 만든다.

- 프라이머리(포인트 컬러) : 우리 제품에서 가장 중요하고 핵심적인 부분에만 써야하는 색상이다. 엑센트 컬러라고도 불린다.

- 백그라운드 컬러 : 우리 제품의 전체적인 분위기를 만들어줄 배경색. 일반적으론 흰색(#ffffff)이라고 한다.

- 세컨더리 컬러: 배경색에서 도드라지는 부분을 만들어 포인트 컬러 뒷밤침하는 색상. 서브 컬러라고도 불린다.

 

색상 을 정했다면 가장 밝은 단계 부터 가장 어두운 단계까지 총 10단계로 만든다.

색상의 확장성에 관하여.

색상 정할땐 확장성이 있어햐한다. 다양한 상황에 대응할 수 있도록 유연하게 만들어야한다.

 

왜 색상을 10단계로 만드는가?

* 색상의 밝고 어두움(명도), 연하고 진함(채도)를 기준으로 10단계를 만들기 때문에, 0%에서 100%를 10단위로 나눠 쓸 수 있다.

* 10단위로 딱 떨어지기 때문에 중간에 50단위의 색상을 더 추가하기 쉽고 색상 간 차이도 10단위다 보니 알아보기 쉽다.

 

 

실무에서는 컬러 스타일을 정하는 과정은 매우 복잡함.

브랜드에 어울리는 색상을 고르기 위해 여러 달 동안 수십가지의 색상을 놓고 테스트하며 분석하기도 하고, 수학적인 계산을 통해 색상을 정하는게 일반적이다.

 

플러그인 Coolors 를 사용하여 내가 원하는 컬러 톤매칭을 해줌

https://www.figma.com/community/plugin/1068919813159975006/coolors

 

 

 

저기 보이는 이미지보면 59써있는 숫자를 99,89~9 이런식으로 첫번째부터 마지막까지 바꿔준다. 아 HSL클릭하면 이미지 처럼 나옴

난 이왕할꺼 예쁜 컬러 톤 매칭 하고 싶어서 이렇게 진행되었는데 3가지만할껄 살짝 후회중이나 저거 수기로 다 변경하니 손목이 아푸당

 

 

제목까지 프라이머리랑 세컨더리랑 떠릐머리랑 바꿔줬는데 갑자기 강사님이 사실 더 쉬운 방법이 있습니다!

라고 하셨다 호호 넘 궁금했다 봤는데 피그마가 이런 기능도 있었구나 하며 신기해했다.

이런 테크닉 기술을 알려줘서 넘 좋았다

 

 

그렇게 다시 미니프로젝트인 팀 소재 페이지 제작 프로젝트 할 시간이 왔다.

앱디자인을 나혼자 하게 되어 정말.... 머리가... 넘 ... 아팠지만(어떻게 책임지고 잘 해야할지 고민 했다 못하면 내탓이니꽈 ㅜ^ㅜ) ㅎㅎㅎㅎ 할수 있다 좋은 경험이지~~

암튼 재밌게 작업을 하였고 웹페이지 안하고 앱제작하는걸로 하길 잘한것 같다. 

나름 많이 성장한 느낌? 다만 아직 프로토타입을 능숙하게 내가 생각하는 전문가들처럼 잘하고 싶다.

이건 가볍게 팀과 자기소개를 할겸 만드는 연습용(?) 프로젝트라고 하셨으니 너무 욕심 내지 말자... 

라고 마음을 다독여 봤지만 내눈엔 이렇게 하면 더 좋을텐데 라는 점들이 계속 보여서 내가 그냥 알아서 잘 제작 했다

아주 좋다...

그리고 다행인건 캐릭터 담당 해준 팀원분이 현재 저녁인 지금 움직이는 모션이 들간 캐릭터로 팀원들의 의견을 조합해서 나온 캐릭터를 마무리 잘 지어주셔서 좋았다. 왜냐면 캐릭터가 메인인지라 중요하기에.... ㅎ ㅅㅎ 빠른시간안에 모션까지 넣어주심.. 귯

 

 

암튼 나름 잘 되고 있는것 같다 나는 오늘 좀더 정리하고 화면 넘기는거 프로토타입 해서 발표담당이신 팀원분이 피그마로 피피티 제작하시면 내가 정리해서 시간이 된다면 목업도..... ... 넘 욕심인가..ㅋㅋㅋ 암튼 그거랑 컬러톤 이랑 타이포 좀 정리해서 내가 넣을 예정이다.

일단 내일 오전까지 모두 완성 하는게 목표이다.

 

암튼 화이팅..ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 불태워 따 ㅋ 하,,ㅎ,,

 

아맞다 그 스크롤 내리는거 프로토타입 하는 방법을 몰라서 찾아보긴했는데 UIUX혼자 디자인 제작하는거라 시간 좀 걸릴까봐 프로토타입 혹시 스크롤 내리는거 아시는 분 있는지 여쭈어 보았다. 감사하게도 적극적으로 도와주셔서 넘 좋았다. ㅜㅜ

 

그래서 나름 잘 해결되서 넘넘 다행이다!! 낼도 화이틩.. 나 근데 체력이 소진되고 있는것 같아... 오늘 끝나고 헬스장 가려했는데 괜찮을란지 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 암튼 뭐 운동 빨리하고 더 작업하고 자야지.... 하하핳 좋다!!! 힘든건 성장하는거라고 했다 굿귯