brunch

매거진 스케치

라이킷 61 댓글 3

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by maus x maus Dec 06. 2020

스케치 아이콘 리디자인 이야기

Big Sur에 맞춘 기존 클래식 아이콘의 재구성

"새로운 스타일로 어떤 것들을 할 수 있는지 알아보기 위해 가능한 한 많은 아이디어들을 만들기 위해 노력했습니다."

지난달, 우리는 macOS Big Sur를 위한 주요 UI 개편과 함께 스케치 70을 출시했습니다. 그리고 스케치 디자인 팀은 업데이트된 OS에서 스케치가 더욱 멋져 보이기 위해 최선의 방법을 찾는데 오랜 시간을 투자했는데, 동시에 다른 프로젝트인 새로 디자인될 스케치 앱 아이콘에 대해서도 고민하기 시작했습니다. 그 이유인즉 스케치 앱 UI 디자인은 픽셀 하나하나 완벽하게 맞춰가며 수백 시간의 작업이 필요하지만, 사용자가 맥을 쓰면서 매일 보는 독(Dock: 맥 앱 메뉴바)에 올려져 있는 스케치 아이콘을 디자인하는 거 역시 중요한 일이 되었습니다.

새 시대(Big Sur)를 맞아 스케치 아이콘을 어떻게 재구성할지 그리고 아이콘 리디자인이 스케치의 상징적인 다이아몬드를 재현하는 거만큼 쉬운 일이 아니기 때문에 프로젝트 디자인 리드인 Prekesh와 함께 어떻게 풀어야 할지 같이 알아보기로 했습니다.

실험

이미 널리 알려진 아이콘을 재구성하는 건 결코 쉬운 도전이 아닙니다. Prekesh에게 있어 목표는 스케치 본질을 유지하면서 새로운 뭔가를 시도해 보는 것이었습니다.

"제가 처음 만든 문서는 '흰색 박스 안의 다이아몬드는 절대 아님'이란 문구였을 겁니다."라고 웃음을 지으며 말했습니다. "저희는 새로운 맥 OS Big Sur의 새로운 스타일로 무엇을 할 수 있을지 가능한 많은 가설과 선택지들이 얼마나 있는지 알아보기로 했습니다." 농담이 아니라 그런 과정은 거의 아이패드에 애플 팬슬로 그리면서 50개 정도 컨셉으로 시작했습니다.

"저는 그게 이상하던 말던 먼저 머릿속에 떠오는 데로 무조건 다 스케치했습니다."라고 설명하며, “목표는 아이디어를 발굴한 후 어떤 것이 고착되고 어떤 것을 어떤 것을 버리고 어떤 것을 계속 디벨롭할지 여부를 판별하는 것이었습니다.” 그러고 나서 그응 아래 이미지들을 꺼내면서 더 높은 완성도로 다양한 접근 방식을 연구하기 시작했습니다.

Prekesh는 초기 스케치 단계에서 아이디어를 탐구하는 것을 즐겼다. "이 모든 것들이 실제로 앱 아이콘이 되는 것은 아니지만, 가장 좋아하는 것들을 스케치로 옮겼습니다."

그가 스케치 내부 슬랙 채널에 작업물을 업데이트하면서, 기대감은 점점 부풀어 올랐으며 다른 스케치 디자이너들한테 엄청나게 많은 유용한 피드백을 받았습니다.

Prekesh가 앱 아이콘 전체를 새롭게 리디자인 할 때의 장단점에 대해 생각처럼 '멀리 저기 어딘가의 디자인들' 일부는 정말로 관심을 끌었습니다.

벡터 편집과 펜을 서로 연결하는 몇 가지 방법을 탐구한 후, Prekesh는 이러한 아이디어는 범위가 좁아지면 질수록 정리가 안된다는 것을 발견했습니다. 게다가 스케치는 벡터 편집기라기 보단 UI 툴 이 그 이상이기도 했습니다.

Prekesh는 연필 같은 부수적인 도구를 가지고 이것저것 시도는 해보았지만 이러한 결국 이러한 시도들은 너무 단조로웠습니다.

그는 "우리는 (기존의) 다이아몬드를 벗어난 실험도 했지만 다이아몬드는 우리 브랜드에서 임팩트가 워낙에 강력하다는 부분을 감안하면 좀 바보 같던 시도였던 거 같습니다."라고 말했습니다. "그래서 우리는 많은 새로운 다이아몬드 형태를 제작했는데 원근법 적용해 보기도 하고 빼보기도 하고 면을 늘려보거나 혹은 줄여 보거나 다양한 시도를 했습니다." 그리고 이때부터 어떤 것이 가장 잘 맞는지 그리고 이러한 요소들을 어떻게 서로 다른 배경들과 같은 요소들과 자연스럽게 녹일 것인지 등 질문이 생겼습니다.

Prekesh는 이전과 다른 방식으로 다이아몬드를 응용한 아이디어로 옮기기 시작했습니다. 그는 전형적인 탑-다운(위에서 아래로) 아이콘을 적용함으로써 살짝 변형한 후 스쿼클(squircle) 형태에 맞게 작업했습니다.

균형 맞추기

특히 전면 형태와 배경 사이의 균형을 바로 잡는 것은 힘들었습니다. "우리가 매우 빠르게 알아낸 사실은 모서리가 동근 사각형 배경과 전면 다이아몬드 형태 사이에 종종 시각적 다툼이 있었다는 것이었습니다."라고 말했습니다. "그리고 밖에 있는 사용자들의 관심을 끌기 위해 싸우기보다는 그 두 개의 요소가 서로 칭찬할 수 있는 방법을 찾아야 한다는 것을 알았습니다."라고 말했습니다.

이것들은 아이콘과 스케치 UI의 요소를 결합한 최초의 아이디어였는데 Prekesh는 다이아몬드와 사이드바 둘 다에 투명도를 적용하려 했습니다.

컨셉 작업이 계속되면서 윈도우 배경과 다이아몬드 사이의 메타포가 고착되었는데, 그 배경과 다이아몬드의 균형을 맞춤으로 위에 말한 갈등을 해결했고 그 결과 Prekesh는 배경을 살짝 단순화시켰습니다.

그리고 작업이 진척되면서 두가지 방법이 등장했는데, 서로 비슷한 배경에서 시작해서- 하나는 기존 다이아몬드로 다른 하나는 3D로 접근해서 작업했습니다.

아이콘을 재구성하는 단계에선 3D도 시도해 보았고 그중 약간 기울어진 형태도 있었습니다.

조명 레퍼런스를 알기 위해 Blender로 러프한 3D를 만들었습니다.

https://www.blender.org/

blender.org - Home of the Blender project - Free and Open 3D Creation Software

Home of the Blender project - Free and Open 3D Creation Software

www.blender.org

그리고 마지막엔 사내 테스트와 사내 전체를 통틀어 많은 피드백을 받은 후 어떤 방향으로 가야 할지 명확해졌습니다. 그리고 최종 아이콘이 결정되었습니다.

아이콘의 배경을 기본으로 벗겨내고, 사이드바에 미묘한 투명도를 적용함으로써 멋진 균형을 이룬다고 생각합니다.

디테일에 모든 것이 있다.

Prekesh에게 있어 새로운 아이콘을 특별하게 만드는 것은 미세한 디테일함에 있습니다. 그가 말하길 "저는 그것의 섬세함이 좋습니다"라고 말했습니다. "기존 아이콘을 업데이트하는 데에 있어 세부사항과 순환 과정이 있지만 반드시 (기존) 스케치 아이콘을 (새로운) 스케치 아이콘으로 만드는 것에서 너무 멀리 벗어날 필요는 없었습니다." 하지만 Prekesh 여러 노력 끝에 나온 아이콘이 사람들에게 친숙하게 (크게 변하지 않아서) 느껴질 디자인으로 끝나게 된 것에 실망했을까요?

"사실은 그렇지 않습니다. 그것은 우리가 모든 연구를 한 후에 어울리는 것이 옳다고 느꼈던 것."이라고 그는 말합니다." 그리고 내가 정말 좋아하는 미묘한 디테일이 있으며 둥근 사각형 배경은 사실 스케치의 Big Sur UI를 단순하게 표현한 것이고며 왼쪽의 사이드바에는 투명도가 적용되어 있어 뒤 배경의 배경색을 아주 가볍게 떠맡는다는 것을 의미합니다." 그리고 새로 바뀐 다이아몬드도 Prekesh가 대비를 개선하고 약간 더 생동감을 있게 하기 위해 처음부터 다시 디자인했습니다. 거기에 진한톤의 그림자가 UI 앞에 정말 떠 있는 듯한 느낌을 줍니다.

사이드바 부분의 미묘한 투명도는 아이콘을 통해 월페이퍼에서 힌트를 얻는다는 것을 의미합니다.

Prekesh는 Big Sur의 새로운 디자인과 애플의 아이콘에서 영감을 얻었다고 말하는데 사실 그는 Big Sur 디자인과 새로운 애플 아이콘의 열열한 지지자 이기도 합니다. 그가 말하길 "저는 새로운 방향성이 정말 맘에 든다."라고 말하기도 했으며, "모서리가 둥근 사각 형안에 아이콘을 제한한 것은 의심할 여지없이 사람들이 그러한 공간을 좀 더 창의적으로 사용하도록 장려할 것입니이다."라고 말했습니다.

*맨 아래 예시 참조

이처럼 잘 알려진 (스케치) 아이콘을 재창조하는 과정을 되돌아보며 Prekesh는 자신의 어깨에 엄청난 책임감을 느꼈다고 인정했습니다. "초반에는 약간 초현실적이었는데 왜냐하면 제 경력 내내 이전 아이콘들의 디자이너들을 존경해왔기 때문입니다."라고 말했습니다. "Emanuel(CDO)과 Marcelo(디자인 디렉터)가 앱 아이콘의 다음 순환(iteration)을 연구하고 만들도록 저에게 위임한 것은 꽤 기분이 좋았습니다만 그에 대한 압박은 컸네요!"라고 웃으면서 말했습니다.

스케치 시네마틱 유니버스

마치 매일 Dock에서 보게 될 아이콘을 리디자인하는 것만으로 충분치 않은 것처럼, 아이콘 리디자인의 여정의 끝은 아니었습니다. 여러분이 사용하는 Mac 앱의 버전뿐만 아니라 우리는 여러 가지 테스트 빌드를 유지하며 각각 다른 개발 단계에 있는데 QA 팀의 디버그 버전과 초기 연구용 빌드부터 프라이빗 및 퍼플릭 베타 버전까지 우리는 각각의 다른 아이콘을 사용하기 때문에 누가 언제 어떤 기능을 테스트하는지 명확합니다.

예전에는 각 릴리스 빌드는 서로 다른 색상의 다이아몬드였는데 좌측 상단부터 릴리즈 버전, 베타, 프라이빗, 인터널, 연구, 디버그 버전입니다.

이전에는, 우리는 단순히 다른 버전을 나타내기 위해 서로 다른 색상의 다이아몬드를 사용했습니다. 하지만 Prekesh는 Big Sur 버전에서 이것저것 시도해 보기로 결정했습니다. "저는 'Xcode build' 아이콘에서 정식 릴리즈 아이콘까지 문자 그대로 시각적 진전이 있는 아이디어를 생각해냈고 그들은 일종의 이야기를 가지고 있었습니다."라고 그는 설명합니다. "하지만 그러한 것들은 내부적으로만 이해가 되는 것들인 거고 이것들에 대한 올바른 접근방식으로 느껴지지 않았습니다."

그러한 결과는 서로 각각 다른 색과 특성을 가진 6개의 유니크한 아이콘이 만들어졌습니다. 그것은 Prekesh에게 그러한 초창기 단계부터 좀 더 특이하고 다양한 생각들 중 몇 가지를 실제 아이콘에 반영할 수 있는 기회였습니다.

영화 메트릭스에 영감을 받은 디자인은 최종적으로 디버그 버전 아이콘이 될 뻔했으나 결국 우리 팀은 Xcode의 파란색 맥 OS 아이콘에 근접한 디자인으로 가기로 결정했습니다.

"우리의 실험적인 빌드는 언제나 개발 중인 새로운 기능을 담고 있으며, Glenn(디자인 팀의 다른 멤버)은 정말로 '거기 저 멀리에 있는 어딘가...'라는 것을 보여주기 위해 무언가를 시도해 볼 생각을 가지고 있었는데 그는 다이아몬드를 우주에 보내면 어떨까요?"라고 생각했습니다.

연구 버전 아이콘 경우 정말로 이름에 걸맞은 구성으로 디자인했습니다.

그리고 커튼 뒤에 숨어있는 아이콘은? "저건 약간 웃긴 사연이 있는데, 트위터 한정으로 새로운 아이콘을 티저 이미지로 공개하려 했고, 티저에 사용될 천을 그리느라 하루의 대부분을 보냈습니다. ㅎㅎ."그리고 그 모든 작업을 마친 후 우리가 실제로 프라이빗 베타 아이콘에 바로 적용할 수 있다는 것을 깨달았습니다. 그래서 이건 작업 시간이 좀 절약되었습니다."

"Marcelo가 트위터 한정이기 때문에 너무 많은 시간을 쓰지 말라고 말했습니다." 하지만 "아직 아이콘 작업에 할 일이 많았습니다."라고 말했습니다.

각각의 아이콘 스스로 정체성을 부여하고 사람들이 각각의 아이콘에서 어떤 성격을 가졌는지 사람들이 인지하는 것에 대해 명확하게 전달하는 것이 Prekesh에게 부여된 고제였는데, 결과에 만족하고 있으며 리디자인된 아이콘들 역시 회사 내부에서도 다른 팀들과도 잘 어울린다고 말할 수 있다고 봅니다.