[UI/UX] UI 컬러 리뉴얼,

안녕하세요, 그님의 디자이너 박선희입니다.

사실 가장 먼저 제안한 것은 기술 블로그를 만들어 포트폴리오로 활용하고 자기소개서를 작성하자는 것이었습니다.
눈 앞의 디자인 작업을 빨리 치워야 해서 블로그에 첫 글을 올리게 되었고, 먼저 죄송하다는 말씀을 드립니다.
ㅠㅠ

우선 바쁜 일정 속에서도 스마트하게 작업해 주시는 개발팀에 항상 감사드립니다.

현재 매장에서 잠깐 경험한 후 다시 디자인 가이드를 찾느라 애를 먹었는데 완벽하게 구현해주셔서 너무 신기했어요.

하지만 문제는 계속 발생합니다

하지만 맨날 순항만 하면 인생이 재미없잖아요 ㅎㅎ 와이어프레임에 대한 피드백도 꽤 많이 받았고, 와이어프레임은 이미 로파이 수준으로 가져왔기 때문에 약간의 변명을 하는 동안 여유롭게 페이스를 유지하면서 색상만 추가하면서 변명하지 않습니다.


[UI/UX] UI 컬러 리뉴얼, 1
선임 디자이너의 날카로운 피드백!


[UI/UX] UI 컬러 리뉴얼, 2
그리고 시대의 디자인. 지금은 리뉴얼도 하고 예전 작품도 지웠는데 언뜻 보면 원색이 너무 많이 쓰인 걸 알 수 있다.

좋아요. 한 줄로 요약하자면 너무 파랗고 푸르다.
사실 조금만 찾아봐도 사용자 가시성/사용성을 위해 최대한 프라이머리(기본) 컬러를 강조하고 싶은 곳에만 주되 남용하지 마세요. 화면 그리느라 바빠서 기초를 까먹었네요…!
!
!

[UI/UX] UI 컬러 리뉴얼, 3

하지만 모두 울고 있을 때 해야 할 일을 시작해야 합니다.


[UI/UX] UI 컬러 리뉴얼, 4PNG" data-origin-width="440" data-origin-height="477">
수석 디자이너의 자세한 피드백에 감사드립니다…

먼저 피드백 덕분에 “UI 색상 조합”을 구글링하겠습니다.
아직까지는 한국에서 제대로 된 UI 가이드가 없는 것 같아서(요새는 점차 등장하는 것 같습니다), 오늘은 마스터 구글에 도움을 요청합니다.


[UI/UX] UI 컬러 리뉴얼, 5

사랑해요 구글 역시나 많은 글들이 저를 환영합니다.
아야… 너무 오래 기다리지 마세요. 하나씩 공부하겠습니다.

먼저 내가 놓친 것을 하나씩 살펴보자. 너무 기본적인 UIUX라서 언급하기 부끄럽지만 기본이 핵심입니다.

앞에서 언급한 기본 색상은 무엇입니까?

원색. 브랜드를 대표하는 메인 컬러입니다.
네이버의 경우 초록색, 토스의 경우 파란색입니다.

[UI/UX] UI 컬러 리뉴얼, 6[UI/UX] UI 컬러 리뉴얼, 7

그러나 서비스를 만들 때 색상은 이 원색으로만 구성되는 것은 아닙니다.
주색, 보조색, 회색조(흑백)의 적절한 조화가 요구된다.
권장 색상 일치 비율은 60:30:10이어야 합니다.


[UI/UX] UI 컬러 리뉴얼, 8
이와 같이.

하지만 제 디자인은 50:50… 회색을 전혀 사용하지 않은 가망 없는 디자인이었습니다.
너무 눈에 띄지 않습니다!


[UI/UX] UI 컬러 리뉴얼, 9


[UI/UX] UI 컬러 리뉴얼, 10


0
하나

그래서 배경색은 좀 더 흰색톤으로 설정하고 로고와 액션버튼을 제외한 나머지는 최대한 회색톤으로 설정했습니다.
60:30:10까지 완벽하진 않아도 전보다 뷰가 좋아지지 않나요? ^_^v

또한 메인 페이지도 리뉴얼되어 블루블루 서브페이지의 피드백을 받고 있습니다.


[UI/UX] UI 컬러 리뉴얼, 11


[UI/UX] UI 컬러 리뉴얼, 12


0
하나

보색을 적절히 활용하고 글자의 시인성을 높여 청청카드가 더욱 깔끔해졌다는 주변 분들의 피드백을 받았습니다.
^_^

컬러 매칭에 도움이 된 사이트

https://coolors.co/?홈

Coolors – 초고속 컬러 팔레트 생성기!

디자인을 위한 아름다운 색상 조합을 생성하거나 탐색합니다.

쿨러스.co

다행히 요즘은 UI색 조합 사이트가 많이 나와 있어서 시간적 제약으로 적극적으로 이용하고 있습니다.


[UI/UX] UI 컬러 리뉴얼, 13
컬러 조합 기능을 활용해 카드에 그대로 적용해보세요!
흰색 마킹이 기본 색상입니다.

좋은 제품은 앞으로 디자이너들의 고민을 조금이나마 덜어줄 다양한 플러그인과 웹사이트가 나올 텐데, 이를 잘 활용하면 효율적으로 작업을 완성할 수 있는 효율성을 높일 수 있을지 궁금합니다.

이 글은 짧게 하고 다음에 할 수 있을 때 작성하겠습니다.

또 만나길 바래… 안녕…

참조 페이지

https://brunch.co.kr/@chulhochoiucj0/17

모바일 사용자 인터페이스 디자인의 기본 요소 – 색상

UI 디자인의 색상 사용 | 색상 색상은 사용자 인터페이스에서 중요한 시각적 및 기능적 요소입니다.
브랜드 아이덴티티를 표현하고 앱의 스타일을 결정하는 중요한 요소이기도 합니다.

brunch.co.kr

https://brunch.co.kr/@blckschrl/41

Episode 06 UI를 위한 컬러

우리의 눈이 보는 색 원리와 UI 디자인 | 색상은 매우 자극적인 이미지입니다.
주로 사용자가 화면에서 행동하게 하거나 필요한 정보를 강조하기 위해 사용하는 요소입니다.

brunch.co.kr

https://yozm.wishket.com/magazine/detail/151/

컬러 조합은 이것으로 끝!
인기 있는 7가지 컬러 팔레트 페이지 | 요즘 IT

이번에 위시켓은 재능있는 디자이너들이 활동하고 있는 Dribble이 추천하는 UI 디자인에 특화된 7가지 컬러 팔레트 사이트를 소개하고자 합니다.
비즈니스 의도에 맞는 색상 팔레트 찾기

yozm.wishket.com

https://blog.rightbrain.co.kr/?p=12673

RightBrain 연구실 – The RightBrain Blog

RightBrain 연구소는 RightBrain만의 UX 인사이트와 귀중한 현장 경험을 공유하여 서로가 지속적으로 성장하고 학습할 수 있도록 돕는 열린 소통 공간입니다.

blog.rightbrain.co.kr

https://yozm.wishket.com/magazine/detail/1808/

다양한 색상을 만들고 사용하여 색상 조합을 돕는 ‘쿨러’ | 요즘 IT

나는 2017년에 Coolers에 대해 처음 들었고 내 개인 블로그에서 색상 일치 및 구성에 도움이 되는 7가지 서비스 중 하나로 소개했던 것을 기억합니다.
당시 서비스의 기능은 오색(五色)을 기본으로 했다.

yozm.wishket.com