디자이너랑 개발자가 좋아하는 달걀 레시피를 소개하는 글로 생각하고 들어오셨다면 뒤로가기를 눌러주세요.
Easter Egg
부활절 달걀을 의미하지만 영화를 좋아하는 사람들에겐 다른 의미로 더 익숙한 단어입니다. 작품 속에 몰래 숨겨 놓은 깜짝 메시지를 의미하는 ‘이스터에그’는 Pixar와 같은 애니메이션을 통해 대중들에게 많이 알려지게 되었습니다.
이런 메시지는 단순히 영화 속에만 존재하는 건 아닙니다. 크롬에서 인터넷에 연결되지 않을 때 방향키를 누르면 시작하는 공룡 미니게임도, 잘 알려진 구글의 이스터에그 중 하나죠.
그런데 이런 이스터에그가 제품에도 숨겨져 있다는 거 알고 계셨나요?
안녕하세요, 똑똑한개발자 프로덕트 디자이너 수지입니다 :)
오늘은 프로덕트 디자이너와 개발자가 숨겨 놓은 소소한 이스터에그의 발견에 대해 소개합니다. 그런데 이제 우리 팀원 자랑을 곁들인..
시작은 이러했다.
시작은 아주 작고 사소했습니다.
어느 날 저의 동료, 지민 디자이너님이 저를 급하게 (슬랙으로) 호출했습니다.
“수지님! 이것 좀 보세요!”
그리고 제 눈 앞에 펼쳐진 것은 아주 귀여운 고양이였죠.
집사인 저는 눈이 돌아가버렸습니다. 이… 이 귀여운 것은 대체 뭐죠..?
1. 개발자도구에 숨어있는 이스터에그
제품을 만드는 디자이너라면, 또 개발자라면 크롬의 개발자도구를 한번쯤 (혹은 아주 여러번) 사용해보셨을 겁니다.
멋진 페이지를 발견했을 때 “와 이건 어떻게 만들었지?” 하고 참고하면서 공부하기도 하고, 이 환경에서 어떤 텍스트 사이즈와 레이아웃이 적절한지, 어떤 Margin 혹은 Padding 값이 적절한지 리서치 하기 위해 종종 개발자도구를 활용하는데요. 몇몇 프로덕트는 이 개발자도구 안에 귀여운 그래픽을 이스터에그로 숨겨 놓고 있었습니다.
오늘의집은 스토어 페이지에서 개발자도구를 열면 이스터에그를 발견할 수 있습니다.
귀여운 고양이가 하늘에서 점프해내리며(?) “누구나 예쁜 집에 살 수 있어”라고 말하고 있어요.
해당 링크를 클릭하면 채용 페이지로 연결되는데, 아주 브릴리언트 쏘 스마트 인텔리전트 한 마케팅이다!! 하고 감탄에 감탄을 금치 못했던 기억이 납니다.
개발자도구를 가장 많이 열어보는게 바로 현업에 있는 개발자들, 개발 공부를 하는, 미래의 채용 예정자일테니까요.
이것이야말로 타겟 설정에 완벽한 채용 공고가 아닐 수 없다!!
두번째로는 오늘의꽃이라는 서비스입니다.
제품의 줄임말인 OKKOT을 귀엽게 이스터에그로 숨겨놓고 계셨더라고요! 마찬가지로 링크 클릭 시 채용으로 연결되고 있었습니다. 고양이는 아니지만 테트리스 하듯 한땀 한땀 새겨넣은 브랜드 네임이 아주 귀엽더라고요.
그리하여 저희 똑똑한개발자도 귀여운 고양이를 이스터에그로 만들어 넣게 됩니다.
이름하여 눈 앞의 쥐를 바라보는 똑똑한(?) 냥이.
리브랜딩 진행 중이라 곧 뉴 홈페이지도 오픈할 예정이니, 종종 귀여운 고양이 보러 놀러오세요!
2. 컬러 Hex Code에 숨어 있는 이스터에그
두번째 이스터에그는 우연치 않게 발견하게 되었습니다.
어느 날 프론트 작업을 하시던 호균님 책상 뒤를 저와 지민 디자이너님이 지나가다가 슬쩍 보게 되었고, 그 자리에서 경악에 찬 목소리를 내었죠.
호균님이 작업하시던 화면엔 아주 쨍하고 아름다운 형광 네온 색과, 블루스크린 블루가 공존하고 있었습니다.
아직 제품의 메인 컬러가 픽스되지 않아서, 임시로 호균님이 색상값을 넣어 작업하고 계신 거였어요.
그런데 그 색상 값 코드가 약간 특이했습니다.
“어..? 뭔가… 바다…? 단어 같네요??”
“맞아요 ㅎㅎ Badass 예요 ^__^ 단어로 만드는게 재밌어서 혼자 작업하거나 할 때는 이런 컬러 값 적용하면서 해요.”
(진짜 어썸 브릴리언트 똑똑하자나..?)
호균님의 경우, 어떤 해외 개발자가 이런 컬러 코드를 사용한 걸 보고 ‘오 이거 재밌잖아!’ 하면서 처음 사용하게 되셨다고 해요.
찾아보니 Badass.io 라는 Fun Hex Code 를 아카이브 하는 페이지도 존재했습니다.
R은 2 (필기체 r과 유사), I는 1, g는 6, S는 5, T는 7 과 같은 형태로 단어를 만들어 사용하는 모양이에요.
이럴 때마다 새삼, 그들의 모국어가 영어이기 때문에 더 쉽게 공감하고 활성화 될수 있는 부분들이 있다는 점이 아쉬워지곤 합니다.
어느 인강 선생님이 말씀하셨던 “우리나라가 제일 처음으로 수학 공식 같은 걸 발견했다면, 지금 우리가 ‘a의 제곱’을 배우는게 아니라 ‘ㄱ의 ㄴ’ 같은 이름과 정의를 배우고 있을지 모른다는 말이 갑자기 떠오르네요.
아무튼 그리하여 이런 컬러값을 코드에 적용시키면 아래와 같은 색상 값을 얻을 수 있게 됩니다.
물론 프로덕트는 제품마다 고유한 브랜드 컬러와 시스템에 따른 디자인 정의들이 있어서, 실제로 이러한 Hex 코드가 마지막까지 그대로 적용되어 선보여질 수는 없겠지만, 어떻게 보면 임의의 값을 필요로 할 때 좀 더 재밌게 작업할 수 있는 우리만의 이스터에그가 아닐까 하는 생각을 합니다.
혹은 브랜딩 단계에서 카페라면 #1ce #C0ffee 와 같은 색상 값을 브랜드 컬러로 적용하는 걸 고려해봐도 재미있을 것 같고요.
개인적으로는 이번 글을 위해 리서치하며 발견한 #1ce #C0ffee 라는 Hex Code가 가장 마음에 들었습니다.
왜냐하면, 직장인들은 모두, 추우나 더우나 얼어죽어도 아이스 아메리카노를 마시기 때문이지요..
그래서 디자이너의 이스터에그는 어떻게 적용할 수 있을까..?
이번 글을 적으면서 ‘디자이너의 이스터에그는 무엇일까’, ‘나는 디자이너로서 어떤 이스터에그를 만들어 낼 수 있을까?’ 많이 생각해 보았습니다.
아직까지는 이렇다 할 요소를 찾아내지 못해 글에는 함께 적지 못했어요. (한편으론 이렇게 즐겁게 재미있는 것들을 숨겨 놓을 수 있는 개발자들의 영역이 부럽게 느껴지기도 했습니다.)
프로덕트 디자이너의 관점에서 사실 ‘디자인을 한다’는 것은 때때로 ‘무언가를 더하기’ 보다 ‘무언가를 조금씩 덜어내는 일’에 가까운 것 같다고 생각합니다.
‘내가 이상적으로 생각하는 것’ 보단 사용자 관점에서, 혹은 데이터 분석을 통해 결과를 도출하고, 이런 부분에서 이런 이슈가 생기지는 않을지 몇 번이고 고민하고 생각하는 일을 반복하죠.
그렇기 때문에 디자인 어딘가에 무언가 의도를 담은 재밌는 것들을 담아두기란 어려운 일에 가깝습니다. 그 작은 요소 하나가 전체의 사용자경험을 다르게 유도할 수 있기 때문입니다.
그러나 디자인이란 본질적으로 즐겁고 아름다운 것, 창의적인 것, 아름다운 것을 추구하는 영역이기에, 어떤 이스터에그는 어떻게 전달하느냐에 따라 오히려 더 좋은 시너지를 내는 사용자 경험을 전달할 수도 있겠다는 생각이 들었습니다. 어떻게 보면 우리의 디자인시스템도 하나의 이스터에그로 볼 수 있겠다는 생각을 했어요.
결국 이 모든 것들은 결코 우리 눈 앞에 쉽게 드러나 보이지 않습니다. UX도, 어떤 성과나 비전이나 가치도, 이스터에그도 그렇죠. 애정을 가진 사람들, 조금 더 관심을 가지고 지켜본 사람만이 마침내 찾아낼 수 있는, 귀여운 선물 같은 것이라고 생각합니다.
드러나 보이는 메시지가 아니더라도, 그런 우리만의 ‘즐겁고 애정이 담긴 이스터에그’를 전달하는 디자이너가 되고 싶다고 생각합니다. 무엇이 될지는 모르겠지만, 우리가 만든 것들을 함께 애정해주는 사람들, 지켜보고 응원해주는 사람들, 그리고 그 사람들을 위해 더 나은 경험과 가치들을 꼭꼭 눌러담아 또 다시 디자인으로, 무언가로 돌려줄 수 있는 그런 것들.
그게 어쩌면 디자이너와 개발자가, 우리가 사람들과 주고 받고자 하는 가장 큰 이스터에그는 아닐까요.
언젠가 제가 가진 커다란 달걀을 자랑스레 돌려 드릴 수 있게 되기를 바라며, 이만 글을 마칩니다.
감사합니다 :)