HIG Reading Series | Foundations - App icons(8)

최승용·2022년 9월 20일
1

HIG Reading Series

목록 보기
28/46
post-thumbnail

Content

오늘은 App icons의 Platform considerations를 읽어보도록 하자.(3)

Platform considerations

macOS

  • 둥근 직사각형과 다른 모양을 제안하는 윤곽을 정의하는 것을 피하세요.
  • 드문 경우에, 기본 앱 아이콘 모양을 미세하게 조정하기를 원할 수 있지만, macOS에 속하지 않는 것처럼 보이는 아이콘이 생성될 위험이 있습니다.
  • 만약 모양을 반드시 변경해야 하는 경우라면, 둥근 직사각형 실루엣을 계속 표현하는 미세한 조정만을 선호하세요.

  • 주요한 컨텐츠는 아이콘 격자 경계 박스 안에 위치시키고; 모든 컨텐츠는 외부 경계 박스 안에 위치시키세요.
  • 만약 아이콘의 주요한 컨텐츠가 아이콘 격자 경계 박스를 넘어 확장한다면, 위치가 어긋나게 보이는 경향이 있습니다.
  • 만약 아이콘 위에 도구를 올려두고 싶다면, 도구의 상단 모서리를 외부 경계 박스에 정렬하고 하단 모서리를 내부 경계 박스와 정렬하세요, 아래와 같이.
  • 아이콘 내에 아이템들을 배치하는 것을 돕고 원 같은 중심의 내부 요소들이 시스템의 다른 아이콘들과 크기를 일정하게 사용할 수 있도록 보장하기 위해 격자를 사용할 수 있습니다.

Summary

macOS에 속하는 다른 아이콘들과 통일성을 유지하기 위해 둥근 직사각형 모양의 윤곽을 공통적으로 사용하는 것이 가장 좋지만, 만약 반드시 변경해야 하는 경우라면, 실루엣 정도는 유지 시킨 채로 미세한 조정만을 하는 것이 좋습니다.
앱 아이콘에 내부 격자와 내부 격자 경계 박스, 내부 경계 박스와 외부 경계 박스를 고려하여 주요한 컨텐츠들은 내부 격자 경계 박스 안에 위치시키고, 아이콘 위에 올리는 도구 또한 외부 경계 박스 안에 맞춰서 위치시켜야 합니다.

Review

파이널 컷 앱 아이콘의 경우 익숙하게 보던 아이콘인데도 둥근 직사각형 모양을 약간 벗어난 다는 사실을 알아차리지 못하고 있었는데 알고 보니 좀 더 새롭게 보였고, 실루엣은 유지한 채로 미세한 조정만을 한다는 좋은 예시인 것 같다.
또한 이전에 예시로 나왔던 Xcode나 TextEdit처럼 아이콘 위에 도구가 올려져있는 경우 도구의 각도나 크기가 똑같다고는 생각 했지만 이렇게 세세한 규격이 정해져 있을거라고는 생각하지 못했는데 역시 뭐든지 알고 봐야 제대로 보이는 것 같다.


  • 번역은 개인적인 능력에 추가로 papago의 도움을 받았다.
    의미가 틀린다거나하는 중대한 문제에 대한 지적은 감사히 받고 수정하겠지만 (영어 공부가 목적이 아니기 때문에) 약간의 실수는 넘어가주길 바란다.
profile
안녕하세요. 최승용입니다.

0개의 댓글