내가 의도한 색은 이게 아닌데
- 문과생의 스마트 빌딩 만들기 (7) -
만들 툴? 준비됐어. 만들 것? 준비됐지. 그럼 이제 만들어보자!
드.디.어. 프로토파이에서 Splash Screen부터 만들기 시작했다. Splash Screen은 아래 캡처 사진들과 같은 모습인데, 대기화면인 동시에 앱의 특징을 잘 보여주기 때문에 꼭 필요한 화면은 아니지만 있으면 좋은! 그런 개념의 화면이다. 메인화면 만들기도 바쁜 와중에 이 화면을 굳이 만들어야 했냐고 묻는다면 음.. 지난 시간에 만든 아이콘을 어떻게 하면 더 자랑할 수 있을까 싶어서 나는 무조건 만들어야겠다고 생각했고 그것도, 첫 번째로 만들었다. 하하.
Google Keep, Youtube, Naver, Kakao Talk의 Splash Screen를 캡처해보았다.메인 색상인 녹색을 바탕색으로 하고, 전에 만든 앱 로고를 똵 박아둔 Splash Screen을 만들고 내 휴대폰에서 확인해보았다. (프로토파이는 휴대폰에서도 확인할 수 있는 기능을 제공한다!) 근데, 색이 조금 이상했다.
아니... 음... 이게 이렇게 풀색이었나...?
Copyright 2018. newnha. All rights reserved.지금 이 글을 읽고 있는 독자의 디바이스(device)에서 이 색이 어떻게 보일지 잘 모르겠지만, 나는 다크 그린보다는 밝은, 카키색처럼 차분하고 무게 있지만 칙칙하지 않은, 그런 녹색을 원했다. (글로 표현하자니 더 어렵다..) 하지만 내 휴대폰에서는 햇살을 받고 있는 풀색이었다. 빛나고 있는 그런 녹색 말이다!
어이쿠! 애들아 봐봐. 아니, 이쁘다고 말할게 아니라... 내가 의도한 색은 이게 아닌데... ㅂ.. 빛이 나면 안 되는 색이거든? 근데... 빛나는 녹색이야...
휴대폰 밝기 때문인 것 같아 밝기를 낮춰보기도 했지만 화면이 어두워질 뿐 여전히 내가 생각한 색이 아니었다.
이 색이 내 휴대폰에서 소화를 못하는 색인가 보네!라고 생각해 비슷한 계열의 색상 중 조금 더 어두운 색상을 찾아보기로 한다. 그때 참고한 사이트는 여기 이다.
위에 있는 Splash Screen의 바탕색은 #548235로, 이 색을 기준으로 Shades(음영, 그늘, 어두움)와 Tints(색조, 옅은 색)를 보여준다. 이 외에도 비슷한 색상을 뽑아내는 데에 도움이 될만한 사이트를 공유한다.
색을 바꾸고 확인하고 다른 색을 찾아서 또 바꾸고 또 확인하고... 이 과정을 몇 번 반복하고 반나절이 지나서야 알았다. 모니터마다 소화하는 색상이 다르구나... 내가 쓰고 있던 디바이스는 삼성 노트북, 더블 모니터로 쓰는 DELL 모니터, 삼성 휴대폰이었는데, 노트북에서 프로토파이를 하다가 DELL로 옮기는 순간, 색이 달라지고 내 휴대폰에 실행시켜도 달라지고 다른 팀원의 삼성 휴대폰에서도 달라지고... 멘붕의 연속이었다. 이게 왜 이러는지, 무엇이 원인인지, 그럼 어떤 것을 기준으로 색을 맞춰야 하는지 등에 답을 얻기 위해 색에 대한 공부를 시작했다.
색깔에도 규칙이 있을까? 팬톤(pantone)에서 올해의 컬러를 발표하기도 하고, 당장 내가 추출한 색상에도 숫자와 알파벳이 있으니 뭔가 규칙이 있는 것은 확실했다.
저 샵(#)과 숫자와 알파벳은 뭘까? 우리 팀원 중에 수학과인 언니가 있어 개념을 잡는 데에 도움을 얻었다. 그리고 추가로 참고한 사이트도 첨부한다.
HTML 컬러 코드 이론
> HTML 코드는 #과 6자리의 숫자로 되어있는데, 이 숫자는 16진법의 숫자 시스템이다.
>> 16진법에서는 10부터는 알파벳을 붙이는데, 10=a, 11=b.... 15=f이다.
>>> 6자리의 숫자 중, 처음 두 자리는 빨강, 다음 두 자리는 초록, 마지막은 파랑을 나타낸다.
>>>> 00이 최솟값이며 FF가 최댓값이다.
아 그럼, 일러스트레이터(Adobe Illustrator)에도 무슨 색이 있던데, 그건 뭐지? 그것도 찾아봤다.
https://glasscanopy.com/whats-difference-rgb-cmyk-spot-pms-colors/RGB는 RED, GREEN, BLUE 3색을 중심으로 하며 합칠수록 하얗게 되어 전자기기나 웹에 게시할 때 적합하다. CMYK는 CYAN(=blue), MAGENTA(=red), YELLOW, BLACK 4색으로 조합하며 출력물에 적합하다. 마지막으로 PMS는 PANTONE MATCHING SYSTEM의 줄임말로, 팬텀에서 정한 색을 의미하며 팬텀의 색상을 spot이라고도 한다.
16진법까지 나와서 숫자를 정한다는 게 너무 신기했고 RGB와 CMYK의 차이도 알 수 있었다. 어쩐지 CMYK로 컬러 모드를 바꾸면 조금 어둡고 탁한 느낌이 들더라니, 그게 검은색 때문이었던 것이다!! 이런 색 규칙이 화면 변화의 원인이 되기도 했지만 디바이스별 디스플레이(display)의 종류가 원인이 되기도 했다. 내 삼성 휴대폰(A7 2016, SM-A710)은 SUPER AMOLED 디스플레이였고 내 노트북(아티브 북 9 Lite, NT910SK)은 LED 백라이트 LCD이었다. 마지막으로 DELL 모니터(제품명은 모르겠다)는 LED였다. 디스플레이의 특징을 자세히 몰라도 셋 다 다르다는 것만 알면 된다. 이렇게나 많은 변수들이 있는데 계속 '음.. 소화를 못하는 색인가?'라고만 생각했던 게 너무 웃겼다. 껄껄.
짧고 굵은 공부와 도움으로 왜 이런 문제가 일어나는지 파악했지만 결론은 그냥 내 노트북 색감에 맞추는 걸로 결론을 냈다. 하하. 더 자세히 찾아보지 않았을 뿐 아마도 하나의 색으로 보일 수 있게 하는 방법이 있을... 것이다. 하지만 현재(2018.12월) 아이폰과 삼성폰 그리고 맥북과 삼성 노트북 모두를 쓰고 있는 지금, 같은 어플(카카오톡이나 페이스북 등)을 실행시켜봐도 색감의 차이가 많은 것을 확인할 수 있다. 긁적.
