Adobe File type icon system
디자인 시스템
이번에 다룰 이야기는 Adobe system에 관한 두 번째 이야기로 포토샵, 일러스트 등 응용프로그램에서 저장하는 "File형식에 대한 시스템 디자인"이다. Adobe가 File type icon system이 왜 필요하게 되었는지, 어떠한 과정을 거쳐 리디자인되었는지 알아보려고 한다. 관련하여 Adobe Designer, Anny chen의 글을 바탕으로 번역 및 정리하였다.
* 더 자세하게 혹은 참고한 원본을 보고 싶다면 아래 링크로 들어가면 좋을 듯 하다.
[출처 : https://medium.com/@annydesign/redesigning-adobes-file-type-icon-system-language-6efa4aed1b30]
File type / File type icon
: File type / File type icon의 정의
Adobe Design Brand Team은 데스크톱, 모바일, 웹 모든 것들을 브랜딩한다. 브랜딩 되는 것들은 - 컴퓨터 바탕화면에서 볼 수 있는 Logo부터 제품의 Icon, Splash screen까지- 다양하다. 그 중 자주 간과되지만 가장 눈에 띄는 요소는 바로 File type icon이다.
File type이란 응용프로그램에서 만들어진 특정 종류의 파일에 지정된 형식이자, 이름입니다.
[ ex : Word 파일 > .DOC / illustrator 파일 > .ai / photoshop 파일 > .psd ]
File type icon이란 File type에 지정된 아이콘이며, 실제 파일을 저장하거나 열 때 화면에 표시되는 이미지입니다.
Background
: 7000개가 넘는 File type icon의 운영 관리 문제 / 확장성 있는 시스템 필요성
Adobe는 3가지 클라우드 (Creative Cloud, Document Cloud 및 Experience Cloud)에서 100가지 이상의 제품과 서비스를 제공하고 있다. File type은 어떠할까? File type icon에 관해서 사람들은 주로 응용프로그램의 Primary file type(기본 파일 유형)만 고려한다고 생각한다. 하지만, 대부분의 제품은 다양한 유형의 Secondary file type(보조 파일 유형)을 가져오고 내보낼 수 있다.
*Primary file type/ Secondary file type
Photoshop에서 Primary file type은 작업하던 psd 원본 파일을 의미하며, Secondary file type은 작업 파일에서 저장하고 내보내는 jpg나 png 등의 파일을 의미한다.
예를 들어 Photoshop 같은 경우, 내보낼 수 있는(저장할 수 있는) 파일 유형은 120가지 이상이며 다른 운영체제에 맞게 최적화하려면 File type icon 한 개 당 약 10가지 이상의 사이즈로 래스터화 하여 저장하여야 한다
Adobe는 매 릴리즈 주기마다 각 File type icon의 크기와 형식을 고려하여 약 7000개가 넘는 자산을 조사해야 했고, 리뉴얼 해야했다. 이러한 환경 때문에 수백 가지 제품에서 파생되는 수천 가지 File type icon의 확장 가능한 시스템이 필요했다.
STEP 1.
Audit & Investigate : 제품 조사 및 분류 정리
Adobe는 전체적인 리디자인을 진행하기 전, 연관되어있는 각 Product team에 도움을 받아 현재 무엇을 제품에서 사용하고 있는지 조사한 후 분류하고 정리되었다.
그 결과, 많은 곳에서 file type icon은 동일하지 않게 사용되고 있었다. 그 이유는 크게 2가지다.
1. 각 제품군을 소유하고 더 이상 디자인을 조정하지 않는 각각의 다른 팀
2. 제품과 파일 형식이 온라인으로 제공됨에 따라 일회성으로 디자인된 개별 아이콘
이렇게 동일하지 않게 사용되고 있는 File type을 정리 하기 위해 전체적인 조감도가 만들어졌다. 제품군별로 File type icon을 분류하고 교차 참조하여 중복된 아이콘을 제거되었다. 그 결과 보조 파일 유형 아이콘 수를 65%까지 줄여졌다.
제품 및 서비스에 따라 분류된 기존 File type의 조감도그 다음 "이미지", "오디오", "코드" 및 "3D"와 같은 기능별 File type icon을 분류되었다.일반적으로 File type icon은 주요 기능에 따른 메타포를 가지게 되어있었다. (ex: HTML 파일 유형은 괄호 메타포 </>를 사용하여 기능이 코드 또는 코딩과 관련)
기능에 따라 분류된 기존 File type의 조감도기능별로 현재 사용하고 있는 File type을 분류 결과, 같은 메타포를 가진 각기 다른 버전이 존재하였다. Adobe Designer들은 메타포의 수를 줄이기 위해, 전체 File type의 광범위한 그룹을 만들기 시작하였다.
기존 secondary file type의 메타포들STEP 2.
Sketch & Design : 시스템 원칙 수립
기존 시스템을 포괄적으로 살펴본 후, 새로운 시스템의 기본 조직 원칙을 수립하기 시작했다.
1. Primary File type icon 만 제품 로고 색상을 가질 수 있음. [ex:. PSD는 파란색/. AI는 주황색]
2. 여러 응용프로그램에서 지원되는 Secondary File type icon은 중립적인 색상을 만들어 사용 [ex: Photoshop과 Illustrator는 각각 브랜드 색상 조합을 통해 고유한 버전의 아이콘이 있는 대신 동일한. PNG File type icon을 사용]
3. Icon을 일관되게 유지하기 위해 File type icon의 메타포 마스터 라이브러리를 만들고 이를 적용
기존 file type icon의 구성요소Adobe는 정의 내린 기본 조직을 새로운 프레임 워크를 염두에 두고 스케치되었다.
Process sketches수많은 테스트 후, 태그를 삭제하고 파일 유형 표시를 아이콘 하단으로 이동되었다. 또한 페이지가 접히는 부분을 제거하여 디자인을 평평하게 만들고 현대적인 시각적 언어를 만들었다. Adobe Designer들은 UI 디자인 언어에 따라 파일 유형 아이콘의 모서리를 둥글게 만들었다.
스펙트럼 데이터베이스의 기존 은유를 사용하거나 일러스트레이션 스타일과 일치하는 새로운 메타포를 만드는 라이브러리를 제작하기 시작했다.
Adobe's Spectrum Icon Database마지막으로, File type icon에 밝은 색상을 통합하여 제품 로고의 기존 브랜딩에 연결했다. 이 변화는 보다 응집력 있는 시각 시스템을 만들 뿐만 아니라 어두운 아이콘에서는 더 나은 아이콘으로 렌더링된다.
어두운 UI에서의 명도 테스트STEP 3.
Iterate and Finalinze : 다양한 디바이스 환경에 적용 테스트
디자인 방향을 결정한 후, 새로운 File type icon을 테스트되었다. File type icon이 다른 운영 체제 및 자사 제품에 있는 모든 영역을 조사하여, 아이콘이 다른 크기와 해상도로 나타나는 각 상황을 살펴보았다.
1) Mac 및 Windows 데스크톱 화면에서 다양한 배율 (최소 16px~최대 512px)에 따라 목록 대 격자 보기에 표시되는 아이콘이 고려
2) Mac 바탕화면의 "Recent Items"또는 "Spotlight Search"와 같이 밝거나 어두운 UI도 테스트
3) 애셋 패널, 미디어 브라우저 대화 상자 및 응용 프로그램을 처음 시작할 때 시작 화면과 같이 자사 제품에 파일 형식 아이콘이 나타나는 위치를 조사
(상상할 수 있듯이, 이 과정은 혼란을 야기한다. 그렇지만 이 과정은 여전히 가치 있는 과정이며, 이러한 일들을 더 잘 이해하여야 한다.)
File type icon이 나타나는 다양한 상황들4) 마지막 단계는, Adobe Acrobat 및 Creative Cloud Libraries와 같은 웹 및 모바일 서비스의 UI에 구현된 파일 유형 아이콘을 살펴보는 것이다. 이러한 서비스는 다른 디자인 팀에서도 관리했기 때문에 파일 형식 디자인 시스템을 정밀 검사하기 위한 계획에 대해 많은 사람들과 함께 조정해야한다.
Adobe's new filetype icon design systemSTEP 4.
Small Change Can Make a Big Difference
*이 부분은 Designer Anny Chen의 글 마지막 부분을 그대로 번역 게재하여 마무리하고자 한다.
우리 팀에서는 종종 우리가 하는 일을 묘사하기 위해 분재 나무의 은유를 사용한다. 수백 가지 제품을 포함하는 브랜드 디자인 시스템의 진화는 그 길을 따라 수백만 개의 점진적 변화에 의존한다. 여기저기서 지점을 잘라내어 나무가 원하는 방향으로 시간이 지남에 따라 성장하도록 안내되어진다. 세부 사항에서 길을 잃기는 쉽지만 과정에서 배우는 모든 것은 다음 반복과 그다음 단계로 이어진다.
