우리 학과에는 '아트앤테크놀로지학과 문화 연구 모임(아텍문화연구모임, 이하 아문연)'이라는, 학회 비스무리한 귀여운 모임이 있다. 아텍의 단체 문화를 증진시키고 유용한 정보를 제공하는 등의 다양한 활동을 하는 모임이다. 나는 2020년도에 위키팀 팀원으로 활동했다.
아쉽게도 코로나바이러스 때문에 팀원들과 직접 만난 건 딱 한 번 뿐이었지만, 아문연은 카톡으로 연락하고 줌으로 미팅하며 회의록은 노션으로 적어내려가는, 지극히 Z세대스러운 느슨한 방식을 통해 알찬 활동을 해왔다.
아문연 멤버들은 미리 정해둔 여러 개의 질문에 대한 대답을 각자 카드뉴스로 만들어서 배포하면서 2020년을 마무리하기로 했다. 인스타그램에 올린다기에, 만들기 편하면서도 재미있는 디자인의 카드뉴스를 만들고 싶었다. 그래서 생각해낸 게 Mac의 스포트라이트였다.
macOS를 사용하지 않는 유저들을 위해 간단히 설명하자면, 스포트라이트는 macOS의 종합 검색 기능이다. Command+Space나 Control+Space단축키로 간단히 창을 띄워 검색을 할 수 있다. 내 파일 속 검색어는 물론, 책갈피나 방문 기록을 검색할 수 있고, 간단한 사칙연산이나 단위계산도 수행 가능하다. 자세한 설명은 공인 페이지에서.
Mac에서 Spotlight로 검색하기
Spotlight를 통해 Mac에서 앱이나 문서와 같은 항목을 찾을 수 있으며, Siri 제안을 사용하여 뉴스, 스포츠 점수, 기상 상태 등을 확인할 수 있습니다.
support.apple.com
왜?
왜 스포트라이트?
내가 이 디자인을 선택한 이유는 크게 두 가지였다.
하나는 아텍 학생들이 Mac OS의 UI에 익숙하다는 것이었다. 패러디를 하려면 타깃층이 원본을 잘 알아야 하니까 최우선 고려사항이었다. 아텍의 랩실에는 iMac이 설치되어 있고, 그래픽 작업을 수행하는 학생들도 많아 원래도 맥북 이용자가 많다. 기존 사용자가 아니더라도 학교에서 쓰던 게 아이맥이니 랩탑을 구매할 때도 맥북 쪽으로 선택이 기울 수밖에 없다. 그래서 웬만한 학생들은 Mac OS를 낯설어하지 않는다.
둘째는 스포트라이트는 UI가 잘 정돈되어 있으면서도 종합적인 정보를 제공할 수 있는 자유도도 있어서, 패러디를 유지하면서도 카드뉴스의 형태로 가공하기가 편리하다는 것이었다.
왜 XD?
그런데 이 친구를 디자인하려니 아무래도 포토샵보다는 XD로 디자인하는 것이 훨씬 간편할 것 같았다. 포토샵은 스칼라 기반이라 무겁기 때문에 여러 장의 카드뉴스를 디자인한다고 아트보드를 복수로 띄워놓으면 작업이 상당히 느려진다. 또 각종 UI적 요소도 포토샵에서는 디자인하기가 어려웠다. 특히 은은하게 투명한 블러 윈도우 처리를 포토샵에서 하려면 번거로운 작업을 거쳐야 한다.
그리고 애초에 스포트라이트가 IT 프로덕트니까 사진 보정 어플리케이션보다는 UI 디자인 어플리케이션이 더 잘 맞는 건 당연한 일이었다. UI에서 반복되는 요소를 템플릿화해주는 '구성 요소'도 십분 활용할 수 있고.
디자인 시작!
월페이퍼
먼저 언스플래시(unsplash.com)의 월페이퍼 카테고리에서 macOS 월페이퍼 느낌이 풍기는 월페이퍼들을 골랐다.
왼쪽부터 시계 방향으로 카탈리나, 모하비, 요세미티, 시에라를 떠올리며 골랐다. 좌측 하단 사진은 맥 느낌은 별로 안 나는데 그냥 마음에 들어서 선택. macOS의 월페이퍼 브랜딩에 대해서는 아래 포스팅에서 자세히 언급한 적 있다.
역대 macOS 월페이퍼로 보는 애플의 똑똑한 브랜딩
목차 애플의 운영체제는 크게 봤을 때 두 가지다. 아이폰과 아이패드에 적용되는 iOS와, 아이맥과 맥북 등에 적용되는 macOS가 그것이다. (WatchOS는 앞의 두 운영체제만큼 소비자에게 가깝지는 않은
urdle.tistory.com
폰트와 이모지
폰트는 애플 공인 한글 폰트인 SD Gothic Neo를 사용했다. 원래 스포트라이트에서 데이터의 타입을 알려주는 요소인 아이콘은 대답의 내용에 맞게 애플 이모지 중에서 골라서 누끼를 따서 사용했다.
애플 이모지는 여기서 다운받을 수 있다. 누끼도 다 따져 있다.
🍏 Apple Emoji List — Emojis for iPhone, iPad and macOS [Updated: 2020] Emoji List
Full list of emojis supported on Apple platforms including iOS 14.2 (iPhone), iPadOS, macOS Big Sur, watchOS and tvOS. New emojis, and emoji image comparisons.
emojipedia.org
기타 디테일
'가장 연관성 높은 항목'을 활용해서, 스포트라이트에 검색 키워드 '아문연'을 검색한 시나리오를 상상하고 디자인했다. 스포트라이트 상자는 넓은 그림자를 주고 테두리에 얇은 회색선을 둘렀고 배경 흐림 효과는 밝기 50에 불투명도 43을 줘서 최대한 비슷하게 만들어봤다.
그리고 카드뉴스에 질문들이 세 번이나 반복되어 들어가기 때문에 정신이 없을 수 있어 질문의 전체 문장과 답변은 흰 배경에 큰 글자로 넣어서 정돈되어 보이도록 했다.
소감?
그때그때 필요에 따라 사용할 수 있는 툴을 항상 습득해야 한다는 것을 느낄 수 있는 작업이었다. 포토샵 같았으면 엄청나게 오래 걸렸을 작업들이 XD로 뚝딱 끝나 버리니까 카타르시스마저 느껴졌다.
XD는 작년에 영국으로 교환학생 프로그램을 갔다가 서비스기획 수업에서 워크샵 세미나 한 번 듣고 입문한 뒤로 독학도 해보고 학원도 다녀보면서 배운 툴이다. 포토샵은 13년을 사용했지만 워낙 무거운 툴이라 내 컴퓨터에선 너무 버벅거려서 별로 선호하지 않는데, XD는 가볍고 간편해서 간단한 디자인을 할 때 애용하게 된다.
결론적으로 깔끔한 패러디 디자인을 쉽게 시도해볼 수 있어서 재미있는 작업이었다.
