나눔웹 UI/UX 꿀팁
1%의 디테일이 브랜딩을 완성합니다! '텍스트 드래그 색상' 바꾸기
공들여 만든 우리 회사 홈페이지, 지금 마우스로 이 글씨를 쭉 드래그(블록 지정) 해보시겠어요?
아마 십중팔구 브라우저 기본값인 '투박한 파란색 배경에 흰색 글씨'로 변할 것입니다. 만약 우리 회사의 브랜드 고유 컬러가 따뜻한 오렌지색이나 강렬한 레드라면, 이 파란색 드래그 화면은 디자인의 통일성을 한순간에 깨뜨리게 됩니다.
💡 마이크로 인터랙션(Micro-interaction)의 힘
사용자가 글을 읽다가 무의식적으로 텍스트를 드래그하는 찰나의 순간, 그 형광펜 색상마저 우리 회사의 브랜드 컬러로 물들어 있다면? 고객은 말로 설명할 수 없는 깊은 통일감과 하이엔드 퀄리티를 무의식적으로 느끼게 됩니다.
1. 마법의 가상 요소: ::selection 사용하기
이 놀라운 효과를 적용하는 방법은 너무나도 쉽습니다. CSS에 ::selection 이라는 가상 요소를 호출하고, 드래그했을 때 보여질 배경색과 글자색 딱 2가지만 적어주시면 됩니다.
/* 웹사이트 전체의 텍스트 드래그 색상 변경 */
::selection {
/* 나눔웹 브랜드 컬러인 레드로 드래그 배경색 지정 */
background-color: #cc2b2b;
/* 드래그된 부분의 글자색은 흰색으로 깔끔하게 */
color: #ffffff;
}2. 파이어폭스(Firefox) 브라우저까지 완벽하게 챙기기
나눔웹의 코드는 언제나 단 한 명의 사용자도 놓치지 않습니다. 웹 표준을 철저히 준수하기 위해, 파이어폭스 구형 브라우저를 위한 전용 코드(moz)를 함께 적어주는 것이 프로 퍼블리셔의 기본 소양입니다.
/* 파이어폭스를 위한 호환성 방어 코드 세트 */
::-moz-selection {
background-color: #cc2b2b;
color: #ffffff;
}
::selection {
background-color: #cc2b2b;
color: #ffffff;
}"남들이 간과하는 1%의 영역까지 브랜딩합니다."
나눔웹은 눈에 띄는 화려함뿐만 아니라, 브라우저의 기본 동작 메커니즘까지 통제하여
고객사의 브랜드 가치를 스크린 구석구석에 완벽하게 녹여냅니다.