→ 요세미티의 아이콘 살펴보기

2014.07.07 15:34    작성자: ONE™

그래픽 디자이너 'Nick Keppol'의 '요세미티의 아이콘 살펴보기(Inspecting Yosemite's Icons)'라는 글에서 발췌한 내용입니다. 장문의 글이지만 UX, UI 디자이너라면 원문을 읽어 볼 만한 가치가 충분한 것 같아 권해 드립니다. 저도 이 글을 읽고 나니 요세미티 아이콘에 들어간 디테일에 적잖히 놀라게 되었습니다. 애플이 디테일에 집착하는 회사라고 불리는 이유를 다시 한번 확인할 수 있는 글이라고 할까요.

"OS X 요세미티에 포함된 애플리케이션 아이콘은 단순히 페인트칠만 새로 한 것이 아니다. 

OS X에 2D 독이 돌아왔다. 새로운 아이콘의 모양과 크기는 화면에 시각적인 리듬을 불어넣는다. 공식 자료가 나와있는 것은 아니지만, (내부적으로) 이런 일관성을 유지할 수 있는 일종의 격자 시스템이 채용된 것 같다. 

전 시스템에 걸쳐 기본적으로 세 가지 형태의 애플리케이션 아이콘 모양이 활용되고 있다. 원형과 정사각형, 그리고 약간 기울어진 직사각형 아이콘이다... 

기존의 직사각형 아이콘은 원근법에 따라서 3D 공간에 실제 있는 것처럼 놓여있다. 아이콘의 모든 축에는 (투시화법의) 소멸점이 존재한다. 다시 말해, 아이콘을 직사각형으로 그리고 반시계 반향으로 11도 틀더라도 원근법에 의하여 축을 왜곡시켜야 한다는 얘기다.

… 중략 …

요세미티 아이콘은 직각 투영법을 따르고 있다. 여기에 깊이감만 추가한 것이다. 어떤 축도 “카메라”에 대한 관점이 아니라, 사물을 똑바로 쳐다보고 있는 관점이다. 따라서 아이콘을 직사각형으로 그리고 반시계 반향으로 9도만 틀면 된다. 가짜 깊이감을 제외한 어떤 요소도 일부러 왜곡시킬 필요가 없다. 따라서 더 단순해 보이고 실제로 아티스트가 디자인하기에도 수월하다… 

… 중략 …

애플이 요세미티를 공개하던 날 Craig Federighi가 새로운 독의 투명한 재질을 언급했다. 그걸 처음 본 나는 키노트를 보면서 웃어버렸다 – “저건 그냥 블러를 먹이고, 하얀색을 투명하게 오버레이 한 것 뿐이잖아” 혼잣말을 했었다. (그러나) 당신은 이를 마케팅이라고 폄하 할 수 있겠지만, 새로운 아이콘은 이전의 어떤 OS와 비교해도 현실에서 재질을 가진 물리적인 오브젝트처럼 작동한다. 애플은 심지어 이걸 플랫해 보이는 룩을 유지하면서 해냈다...

… 아이콘 제작에 있어 모양, 격자, 조명, 디테일은 모두 중요하지만, 어디까지나 가이드라인일 뿐이라는 점 기억하자. 정말 실력 있는 디자이너는 시스템을 따르지 않더라도 ‘잘 작동하는’ 아이콘을 만들 수 있으리라… 요세미티용 아이콘 제작을 시작할 사람을 위해 모양과 격자를 참고할 수 있는 PSD 파일을 만들었으니 작업의 시작점으로 활용하면 좋겠다."

- The Syndicate



참조
The Syndicate - Inspecting Yosemite's Icons /via JimanYoon

관련 글
• OS X 요세미티 공식 아이콘 세트 다운로드 '응용 프로그램 및 휴지통, 폴더 등 총 34종'
• OS X 요세미티와 잘 어울리는 응용 프로그램 아이콘 세트...
OS X 요세미티 vs OS X 매버릭스 아이콘 비교. Swift 아이콘에도 숨겨진 비밀이 있다


    
  1. Blog Icon
    ryanonit

    이런 깊이 있는 디자인이었었나요... ㅋ
    저걸 알아보는 디자이너들이 더 대단해 보이네요.
    애플의 디자인은 깊이있게 연구할 가치가 있는 것이네요

  2. Blog Icon
    불끈앙마

    저만 그런가요...? 제 눈엔 아랫줄 독에 아이콘들이 더 옛날 아이콘 같아 보이네요... 디자인이 퇴화된다는 느낌을 지울수가 없네요...

  3. Blog Icon
    페이퍼

    그리드와 가이드를 따르는 디자인이 최고의 디자인이라면 모든 디자인을 그것에 맞춰 만들면 다 칭찬을 들어야겠죠.
    시스템적인 일관성과 시각적 일관성, 사용상의 일관성을 혼돈하는 것같습니다

    그리드와 가이드는 디자인을 만족시키는 요소가 아니라 개발상의 편의일 뿐입니다. 일관성 유지로 이 디자인이 뛰어나다 라고 말하는 것은 잘 못된 것입니다.

  4. Blog Icon
    OEO

    회화, 디자인, 모션그래픽 영상 계통에 종사하고 있습니다.
    개인적인 취향으로는 요세미티의 디자인이 마음에 드는입장인데요. 디자인 이라는것이 당연히 각각의 사람마다 취향을 갖기 마련이죠.
    그렇다면 가장 앞선 트렌트란 무엇인가, 세련된것이란 무엇인가를 고민하게 됩니다. 제 개인적인 생각으로는, 그래픽 디자이너들은 이미 익숙해진것들을 변화시킨 새로운 스타일을 만들어내는데 그것들은 과거의 양식을 참고, 재해석 할수도있고 레티나같은 고해상도 디스플레이와(특히 폰트같은 경우) 같은 기술적인 영향을 받기도 합니다. 디자이너들은 그런것들에 이미 대중화된 것들에 대해 쉽게 실증을 느끼고 또다른것들을 찾아 나서게 됩니다.

    디자인 양식의 큰 변화로는 최근 어느정도 미니멀리즘과 flat한 디자인으로 어느정도 자리를 잡고 대중들도 그 새로운 양식에 적응하게 됩니다. 요즘 몇몇것들을 보시면 공감하시리라 생각됩니다. 근 몇년간 펩시나, 구글같은 큰 기업도 대세의 흐름에 맞춰 bi를 변경하죠.
    그다음 세대는 플랫한 디자인에서, 깊히와 공간을 함께 나타내는 것들이 될겁니다. 사실 어느방식으로 발전할지는 아무도 몰라요. 누가 대세를 선점할수도있고, 대중들이 자연스럽게 따르는 곳으로 대세가 만들어질수도 있습니다. 물론 최소한의 미적 공감은 기본으로 해야겠지요.

    대중들도 알게모르게 이미 무수한 디자이너들의 작업물들에 의해 눈높이가 점점 높아지고 있습니다. 디자이너들은 새로운것을 찾아가고 대중들은 그에맞춰 따라가게되죠. 모두의 취향을 고려할순 없겠지만 이것이 자연스러운 행태이고 발전하는 과정입니다. 세계최고의 디자이너들이 모든 대중의 취향을 맞춰줄수는 없겠지만, 그누구보다 디자인에 대해 많은 것을 보고 느끼고 생각하는것은 분명한것 같네요.

    그리고 저 본문을 쓴 디자이너가 왜 투시화법 이라는 표현을 썼는지는모르겠지만 정확히는 투시화법이 사용되지 않았습니다.
    투시화법이란 인간의 눈의 원리를 기반으로 하기때문에 거리에 따라 크기가 달라지는 방식을 말해요. 원형, 그리고 사선 의 가이드라인은 단지 가이드라인에 불가합니다. 투시의 소실점이라고 말할수 없습니다. 글쓴이의 의도를 유추해보자면, 아마도 초점흐림(블러처리) 와 드롭쉐도우 효과를 통해 객체간의 거리를 표현했다는 의미를 그렇게 해석한것 같네요.

  5. 애플에서 이젠 고양이 이름을 안써고 산이름을 써네요. 아이콘도 더 깔끔하구요..
    저게 황금비율이라던데요..^^ 좋은 포스팅잘보고 갑니다.

  6. Blog Icon
    헤어포스원짱

    직접 보기 전까지 어느 정도 디자인인지 확실히 알수 없다고 봅니다. 어느 정도 디자인인지는 디테일이 중요한데 움직임이나 사용하면서 느끼는 경험은 스샷으로 알수 없거든요. iOS7 디자인도 나오기 전에는 이상해 보였는데 사용해 보니 편하고 세련됐더군요.

  7. Blog Icon
    헤어포스원짱

    요세미티 같은 경우 플렛 이면서 아이콘을 가만 보면 완전한 플렛이 아니예요. 윈도우 메트로 디자인이나 iOS7 처럼 완전히 플렛하게 했으면 너무 단순해 보였을수 있었는데. 그런 작은 차이가 디자인의 성공 여부를 가르는것 같아요.

  8. Blog Icon
    박명호

    훨씬 나아졌습니다. 아주 훨씬이요. 요세미티 잠시 올리다가 매버릭스 다시 내려 보면 왠 오징어들이 ...ㅠㅠ 아이폰때도 그랬죠.
    iOS7 보다가 간만에 6 봤는데 너무 칙칙하고 복잡하며 산만해 보이는 아이콘들 보며 사람의 눈이란 참 간사하구나란 생각을 했죠. 저도 처음엔 정말 별로였거든요.
    언능 정식판이 나오길..

  9. 아이폰3Gs부터 애플의 아이콘을 접했고 아쿠아 인터페이스도 잠시 윈도우에서 써봤지만(테마라든지…) 오히려 전 스큐어모피즘이 별로더군요.
    iOS7의 아이콘은 색이 좀 그렇지 플랫해 보이는 디자인이 마음에 들었고 요세미티도 기대하고 있습니다.

    그런데 정작 애플 내부에선 어떨지 정말 궁금하네요.
    차마 공개는 못하겠지만 싫다는 반응이 얼마나 있을지…?

  10. Blog Icon
    카제트

    맥 프로에 아이콘만 미리 바꿔서 사용 해 보는중인데
    맥 북의 매버릭스 dock을 보면 뭔가 칙칙한(?) 느낌을 지워버릴 수 가 없습니다.
    개인적으로 ios7 아이콘에 익숙해져서 그런 것 같습니다.

  11. Blog Icon
    쌀킹

    전 별로 맘에들지 않네요. 일단 요세미티나 iOS7의 아이콘 디자인은 전에 쓰던 아이콘을 기본으로 바꾼것에 지나지 않습니다. 그리고 너무 기존의 이미지를 억지로 치환시킨 나머지 이게 대체 뭐지? 하는 듯한 느낌을 받게 해주는 아이콘도 있죠. 사파리가 바로 그렇습니다.
    또 바뀐 아이콘들이 위에서 어떤 분이 말한 것처럼 디자이너가 디자인하기 수월하다고 그 디자인이 좋다. 라고 할 수도 없습니다. 아무리 디테일을 넣고 전문가들이 대단하다고 한들, 유저들이 느끼기에 그것이 느껴지지 않으면 그것은 속없는 디자인에 불과합니다. 물론 디자인은 개취이겠으나 조니 아이브가 맥북프로 레티나 영상에서 말한 것처럼 기존의 디자인을 완전히 버리지 않고는 나아갈 수 없다. 라고 말한 것이 계속 생각납니다. 개인적으로는 더 멋지게 바꿀 수 있었을텐데... 라는 아쉬움도 있어요. 전체적으로 아이콘을 제외하면 전체적인 인터페이스는 맘에 듭니다.

  12. Blog Icon
    지하

    저는 매버릭스에서도 이미 이런 아이콘으로 바꿔서 사용하고 있었기에 대환영입니다.
    Flat 한 디자인, 미니멀리즘이 단순히 대세이기 때문에 그쪽으로 가는 것이 아니라,
    iOS와 미적으로 일관성/ continuity를 유지하면서, 더 미려하게 보이고, 불필요한 3D 효과/그림자 같은 것들이 빠지는 것 같아서
    마음에 들어요!

  13. Blog Icon
    paige

    애플의 기존 디자인 철학인 스큐어모피즘에서 플랫, 미니멀리즘으로 변화를 싫어하시는 분들도 계시는 것 같은데,
    디자인 입문자인 제 생각엔 이는 실제감이 사라지는 나쁜 게 아니라, 가독성이 엄청나게 뛰어나지는 데 그 장점이 있는 것 같습니다.

    < 와 같은 심플한 라인 아이콘 그 자체에서 군더더기를 더 뺄 게 없는 것처럼.. 버튼 하나를 디자인할 때 Satin이나 Emboss, drop Shadow를 전혀 줄 필요가 없는 것처럼, 이러한 디자인은 오히려 범람하는 App store의 수많은 앱들이 가진 각기 다른 디자인에 오히려 통일성을 불러일으킵니다. 더불어 앱을 만들 때의 쓸데없는 장벽도 줄여주고요(디자인 뿐만 아니라 디자인을 코딩으로 대체할 수 있다는 점에서).

    좀 다른 예지만.. '편강탕' 광고도 거기서 뭘 더 뺄 게 없잖아요? 그만큼 사람들 눈에 더 확실히 들어옵니다.
    여기에 편강탕 전화번호, 사이트 주소, 사람들 후기 이런 저런 요소들을 덕지덕지 붙일수록
    전달하고자 하는 가장 중요한 것은 오히려 사라지지요.

    마치 인포그래픽에 쓰이는 간결한 요소들이나, + - 등 모두에게 공통적으로 통용되는 기호나 문자 같이..
    화장실을 나타내는 기호나 상징에 실제 여성이나 남성의 사진이 그려져 있는 것보다,
    우리가 자주 보는 '그 상징'이 너무나도 확연히 우리에게 의미를 전달하죠.

    스마트폰도 처음 선보였을 때를 생각해 보세요. 그 당시 피쳐폰을 가지고 있던 대다수들은 지금 이미 폰도 있고, 데스크톱 컴퓨터도 있는데 왜 저게 필요해? 라고 생각했지만 그 때와 달리 이제 대중에게 너무나도 익숙하고 당연해진, 가장 가까운 제품이 되었으니.. 그 디자인이 꼭 이해를 돕기 위해 실제와 가까워질 필요는 사라진 셈이지요.

    더 나아가 이들이 플랫하고 미니멀리즘한 디자인을 시도하다보니 맞이하는 하나의 함정, 스마트폰 안의 계층이 구별이 되지 않는 것.
    특히나 작은 화면에 그런 깊이감을 해결하기 위해 그들이 선택한 방법은

    사진을 찍을 때 가까운 것은 선명하고, 멀리 있는 것은 흐릿하게 보이듯이 blur를 통한 원근감을 준 것입니다.
    그리고 이러한 blur가 가독성을 해치지 않도록 text color에 대해 수많은 노력을 해온 것도 느껴집니다.

    무튼 디자인을 담는 포멧인 스마트폰과 컴퓨터 너무나도 다르기 마련인데,
    이 둘을 자연스럽게 어우러낸 노력의 산물이 iOS 7과 Yosemiti가 아닐까 생각이 듭니다.