[나 혼자 시리즈]내가 만든 홈페이지 컬러 왠지 모르게 촌스럽다면?

블로그_컬러_대지_1_사본_9.jpg


안녕하세요 

웹/앱 개발 전문 업체 샐리입니다.


저번의 타이포그래피 꿀팁에 이어서 오늘은 웹 컬러에 대해 알려드릴게요!


컬러는 웹사이트의 분위기를 많이 좌우기 때문에 신중한 고민을 해야 하는데요.

보통 웹디자인은 브랜드의 메인 컬러를 그대로 사용해서 일관된 브랜드 이미지를 전달합니다.


예를 들면 네이버 하면 초록색, 카카오 하면 노란색의 브랜드 컬러와 이미지를 웹이나 앱 등등에서 일관되게 사용하는 것처럼요.


브랜드 컬러가 얼마나 중요한지!! 이런 기사 글도 있네요!


"브랜드나 제품의 컬러는 잠재 고객을 구매 단계로 유도하는데 도움이 된다. 고객의 관심을 끌기 위한 첫 단계이기 때문이다. 우리가 수행한 여러 소비자 연구결과 컬러는 브랜드 인지도를 87% 증가시키고 구매 결정에 50~85%의 영향을 비치는 것으로 조사됐다. 출처: 매일경제 “



브랜드 컬러가 만약 아직 없다면 먼저 고민해보고 나서 이 글을 보는 것을 추천드릴게요!




그렇다면 이제 본격적으로 웹 컬러에 대한 이야기를 해보겠습니다.

몇 가지만 기억한다면 촌스러웠던 내 웹사이트가 세련되게 다시 태어날 수 있어요.



브랜드 컬러 ]

브랜드 컬러는 메인 컬러, 서브 컬러로 구성하는 것이 활용성이 좋습니다.

메인 컬러를 주로 사용하되 서브 컬러를 포인트로 사용하기 좋기 때문입니다.

이때, 전체적인 비율은 당연히 메인 컬러가 주로 사용되어야 겠쥬?


블로그_컬러_대지_1.jpg

 

블로그_컬러_대지_1_사본.jpg






밝기의 차이를  인터랙션 컬러 ]


앱은 손가락 터치, 웹은 마우스를 커서 통해 인터랙션을 하는데요.

웹 버튼의 인터랙션은 크게 3가지 동작으로 나눌 수 있습니다.

default-hover-pressed

여기에 따라 버튼 컬러가 다른 반응을 보여줘야 사용자는 버튼인 것을 인지하고 눌렸다는 것을 인식할 수 있습니다.



default : 기본 상태, 터치 전

hover : 마우스를 올려두면 상태변화, 상호작용이 가능하다는 것을 알려줌

pressed  : 눌렀을 때, 눌린 느낌 어두운색으로 표현



블로그_컬러_대지_1_사본_2.jpg

 

블로그_컬러_대지_1_사본_3.jpg


작은 디테일이 전체적인 웹의 완성도를 보여주니깐 기억하세요!





텍스트 컬러 ]


혹시 타이포그래피 편에서 말한 시각 계층 기억하시나요?

텍스트 컬러로도 시각 계층을 만들 수 있습니다.


이때 시각 계층을 만들기 위해서는 텍스트도 최소 3가지 정도로 구분하는 것이 좋습니다.

보통 저는 작업에 앞서서 어두운 톤, 중간 톤, 밝은 톤의 텍스트 컬러를 미리 정한 후 웹에 적용합니다.




블로그_컬러_대지_1_사본_6.jpg

 

블로그_컬러_대지_1_사본_8.jpg


중요한 타이틀은 브랜드 컬러 혹은 진한 텍스트 색, 중간의 본문은 읽기 편한 중간 톤의 컬러, 날짜 등의 캡션은 밝은 톤으로 사용하면 세련되면서 가독성 높게 웹디자인을 할 수 있기 때문이죠!





[배경컬러]


배경컬러를 잘 활용하면 콘텐츠 단을 구분할 때 사용할 수도 있습니다.


블로그_컬러_대지_1_사본_5.jpg

자료: 아임웹 홈페이지



이때, 배경과 텍스트 간의 컬러 조합도 중요한데요.

블랙 배경에 블랙 텍스트를 쓰는 분은 없겠죠?;;;


텍스트와 배경의 밝기 차이가 분명하지 않으면 눈에 잘 보이지 않아요.

웹디자인에서는 텍스트 콘텐츠와 배경 간의 명도대비는 최소 4.5:1 이상으로 하는 것을 권장합니다.



블로그_컬러_대지_1_사본_4.jpg


감이 안 오거나 잘 모르겠다면 아래 사이트를 이용해보세요.

사용할 컬러 코드 값을 입력하면 명도 차를 쉽게 확인할 수 있어요.

https://colorable.jxnblk.com/5a6049/d2cfba




[라인 컬러]

라인이 필요한 곳에는 눈에 너무 들어오는 #000000 블랙보다는 배경과 비슷한 밝은 컬러를 사용해서 한번 눌러주세요. 물론 디자인적인 요소로 선을 사용하고 싶다면 #000000도 전혀 문제 될 건 없습니다!


제가 말한 모든 것들은 정해진 답이 아니라 웹디자인을 하면서 얻은 노하우 같은 거예요!





오늘 콘텐츠는 많은 도움이 되셨나요? 

왠지 모르게 내 웹사이트가 촌스러웠다면 컬러가 문제였을 가능성이 높아요

 

그럴 땐 위의 꿀팁들을 한번 적용시켜보세요~~~



여러분만의 홈페이지를 만들어보세요.

만약 홈페이지를 제작하는데 전문가의 도움이 필요하다면 웹/앱 개발 전문 회사 샐리가 도와드리겠습니다.

샐리 메일(stelar@sally.company) 혹은 홈페이지 문의를 통해 연락주세요!



블로그_컨텐츠0225_대지_1_사본_10.png

블로그_컨텐츠0225_대지_1_사본_11.png