아이콘 여정

2017년 10월 24일 Chris Dias, @chrisdias

요약

열정적인 피드백에 감사드립니다. 매우 유익했고, 고통스러웠으며, 동시에 재미있었습니다. 스테이블 버전은 주황색 아이콘을 파란색으로 변경하고, 인사이더 버전은 녹색을 유지할 것입니다.

가장 좋아하는 색은 무엇인가요?

몬티 파이튼의 성배에서 다리 관리인이 죽음의 다리를 건너게 하기 전에 기사 라인슬롯에게 세 가지 질문을 합니다. 세 가지 질문 모두 올바르게 답하면 라인슬롯은 통과할 수 있습니다. 잘못 답하면 비극적인 죽음을 맞이합니다. 라인슬롯은 가장 좋아하는 색을 묻는 질문에 파란색이라고 답하고 다리를 건널 수 있었습니다.

우리는 "주황색"이라고 답했습니다.

사과와 투명성

먼저, 응답이 늦어진 점에 대해 사과드립니다. 저희는 피드백을 지켜보았고, 모든 피드백을 읽었으며, 다음 단계를 놓고 "활발한" 토론을 벌였습니다. 합리적인 계획을 세웠다고 생각하며 여러분과 공유하고 싶고, 이제 매우 논란이 많은 주제라는 것을 알게 된 것에 대한 지속적인 대화를 기대합니다.

완전한 투명성을 위해, 처음에 왜 주황색을 선택하게 되었는지 이해하는 데 도움이 될 것이라고 생각하는 몇 가지 역사를 공유하고 싶습니다.

가족에 오신 것을 환영합니다

지난 3월, 저희(더 넓은 범위의 Visual Studio 팀)는 저희가 생산하는 모든 개발 도구에 "가족"적인 느낌을 주기 위해 노력했습니다. 만약 그 블로그 게시물을 다시 읽어보신다면, 저희가 "까다로운" 기업 브랜딩 가이드라인(예: 단일 색상) 내에서 작업해야 했다는 것을 알 수 있습니다.

가이드라인을 탓하기는 쉽지만, 동시에 쉽게 그리고 광범위하게 인식될 수 있는 제품 세트를 갖는 것은 귀중한 자산입니다. 대신, 저희는 제약 조건 내에서 작업하는 동시에 회사 전반에 걸쳐 가이드라인을 발전시키고 저희가 직면한 문제를 해결하는 도전을 했습니다.

초기 아이콘 세트에 대한 부정적인 피드백을 보았을 때, 저희는 VS Code 아이콘에 집중했습니다. 저희는 광범위한 커뮤니티와 저희 모두가 즉각적으로 시각적, 감정적으로 매력적인 아이콘을 만들고 싶었습니다.

다음은 초기 디자인 중 일부입니다.

오른쪽 상단의 것을 제외하고는 이 중 어느 것도 우리에게는 눈에 띄지 않았습니다.

이것은 가족 디자인의 구성 요소인 접힘이 포함되지 않아 거부되었습니다. 다시 처음부터 시작해야 했습니다.

예를 들어, 저희는 한동안 무한대 로고를 반복했습니다.

눈을 아프게 할 디자인을 포함하여

현재의 "물고기" 디자인에 이르렀고, 솔직히 적은 수의 개발자들을 대상으로 테스트했을 때 좋은 결과를 얻었습니다.

회전

macOS(및 Linux)에서는 디자인 자유도가 훨씬 높기 때문에 다른 아이콘이 있습니다. 동일한 아이콘 모양을 유지하고 싶었지만, 단일 색상에 국한되지 않았고 어두운 패널에 아이콘을 배치하여 대비 문제를 해결할 수 있었습니다. 회전은 실제로 Apple 디자인 가이드라인을 준수합니다.

그렇긴 하지만, 회전이 시대에 뒤떨어졌고 마운트가 다른 Dock의 아이콘보다 아이콘을 더 작게 보이게 한다는 피드백은 전적으로 타당합니다.

피로

여름 중반에 아이콘 피로가 찾아왔습니다. 수많은 반복 작업을 거친 후, 현재의 모양으로 결정하고 "사전 출시" 디자인을 인사이더 버전용으로 체크인했습니다. 사전 출시는 오른쪽과 하단의 해시된 상자로 표시됩니다.

해시 마크는 파워포인트 슬라이드와 같이 큰 크기에서는 멋지게 보이지만, 작은 크기에서는 상자가 매우 흐릿해지고 아이콘이 흐릿해집니다. 저희는 흰색, 검은색, 다양한 주황색과 녹색 음영의 여러 윤곽선을 반복해서 시도했습니다. 가장자리를 보기 위해 확대했습니다.

이 문제를 해결하기 위해 macOS 버전을 Windows에서 시도했지만, 어울리지 않았고 작은 크기에서는 더욱 나빴습니다. 결국, 사전 출시 디자인을 포기하고 인사이더 버전에 다른 색상을 사용하기로 결정했습니다. 녹색은 사용 가능했고 기존 인사이더 색상이었기 때문에 녹색을 선택했습니다.

짜잔, 인사이더

아이콘 선점

VS Code가 존재하기 전에, 저희는 Visual Studio Monaco를 가지고 있었습니다. 이 도구는 Azure App Service 웹 앱을 라이브 편집할 수 있는 완전한 브라우저 기반 워크벤치였습니다. 온라인 제공 서비스였고 아이콘이 필요했기 때문에 파란색 무한대 아이콘을 "빌렸습니다."

VS Code를 처음 출시했을 때 모든 것이 너무 빠르게 진행되었고, 아이콘은 저희의 가장 작은 걱정이었습니다. 새 아이콘에 대해 어떻게 생각하든, 이전 아이콘은 데스크톱과 작업 표시줄 및 Dock에서 꽤 나빠 보였습니다. 정말로 파비콘으로 사용될 목적이었습니다.

이후, 저희는 가족 내의 각 제품이 자체 색상을 갖기로 결정했고, 파란색은 이미 사용 중이었기 때문에 다른 것을 찾아야 했습니다. 게다가, 저희는 그들로부터 그것을 훔쳤기 때문에, 돌려주는 것이 옳다고 생각했습니다. :)

호박 파이

이 시점에서, 저희는 이제 악명 높은 주황색을 제외하고는 가족 색상표에서 거의 모든 색상을 다 사용했습니다. Sublime Text 색상표와의 유사성에 대한 약간의 우려가 있었지만, 테스트했을 때 아무도 문제를 제기하지 않았습니다. 그리고 솔직히, 저희는 최근 Sublime의 접힌 리본 사용에 더 놀랐습니다.

많은 피드백을 빠르게 생성하는 방법...

위에서 설명한 문제들을 반복하는 동안 인사이더 빌드는 약 2개월 동안 주황색과 녹색 아이콘을 사용했으며, 부정적인 피드백은 많지 않았습니다.

어쩌면 저희의 두려움은 근거가 없었을 수도 있습니다. 어쩌면 사용자들이 새 아이콘을 정말 좋아할 것이고, 소수의 문제에 대한 모든 고뇌는 잠을 설치할 만큼 가치가 없었을 수도 있습니다. 저희는 문제가 되지 않을 수도 있는 것에 대해 빛을 비추지 않기로 결정했습니다. 변경 사항을 푸시하고 릴리스 노트에 새 아이콘에 대한 간단한 언급을 했습니다.

그리고 나서 문제와 댓글이 쏟아지기 시작했습니다.

매일 추가적인 댓글이 달렸고, 각 댓글은 새롭고 흥미로운 방식으로 새 아이콘에 대한 싫음을 표현했습니다. 처음 며칠 후, 피드백이 줄어들고 개별 문제를 해결할 수 있을 것이라고 생각했습니다. 결과적으로, 저희는 틀렸습니다. 피드백은 계속해서 쏟아졌습니다. 새로운 이슈가 열렸고, 댓글은 저희가 응답할 수 있는 속도보다 빠르게 올라왔습니다. Hacker News, Visual Studio Magazine. 고등학교 친구들이 FaceBook에 댓글을 달았습니다. 대단했습니다.

너는 내 아들이야, 블루!

그리고 이것이 오늘날 우리가 있는 곳입니다.

저희는 1.17.0에서 스테이블 버전에 주황색 아이콘을 도입한 이후로 열리고 댓글이 달린 광범위한 이슈들로부터 모든 피드백을 검토했습니다. VS Code의 할로윈 릴리스가 많은 분들에게 잘 맞지 않았다는 것은 분명하며, 이에 대해 사과드립니다.

우연히 제가 이 글을 쓰는 동안, mdb07a는 Windows에서 피드백과 이슈를 요약하는 좋은 일을 했습니다. 요약하자면, 더 많은 이슈가 있지만, 주요 이슈는 다음과 같습니다.

• 색상 변경이 너무 급격했습니다. 주황색은 파란색의 반대 색상으로, 이전에는 좋아 보였던 것을 이제는 끔찍하게 보이게 했습니다.
• 투명성에 전적으로 의존하여 음각을 만드는 단색의 평면 아이콘은 구별성을 떨어뜨리고 구별 문제를 악화시킵니다.
• 새로운 테두리는 너무 크고 굵어서 무한대 기호보다 눈에 더 잘 띕니다.

macOS에서는 기울어진 모양이 시대에 뒤떨어졌고 Dock의 다른 아이콘에 비해 아이콘의 중요한 부분이 작아 보인다는 피드백이 가장 많았습니다.

이 모든 피드백은 가족 제품군을 계속 만들면서 더 나은 일을 할 수 있는지 다시 살펴보도록 저희를 촉구했습니다. 결과적으로, 스테이블 아이콘을 많은 사람들이 사랑하는 파란색으로 변경할 것입니다.

상태 표시줄 및 편집기의 다른 파란색과 잘 어울립니다.

스테이블과 인사이더의 차이를 구별하는 데 어려움을 겪는 분들을 위해, 녹색과 파란색이 더 잘 작동합니다. 여기 Sim Daltonism 앱 (이중색맹)을 사용한 두 아이콘이 있습니다.

여러 제품이 색상을 공유하는 것은 불가피하므로, VS Code가 파란색을 공유하는 것에 대해 더 이상 걱정하지 않습니다.

저희는 @donysukardi의 댓글에 따라 macOS용 기울어지지 않은 아이콘 사용을 탐색 중입니다. 아직 할 것이라고 말할 수는 없지만, 탐색할 것이며, 어떤 경우든 해당 이슈에 업데이트를 게시할 것입니다.

앞으로의 전망

주황색에서 파란색으로 변경하는 것이 모든 문제를 해결하는 것은 아니지만, 한 걸음 더 나아간 것입니다. 아이콘은 계속해서 발전할 것으로 예상하며, 가족 내에서 VS Code에 대한 새로운 아이디어에 열려 있습니다.

아이콘 변경을 발전시키고 배포하는 방법에 대한 어려운 교훈을 얻었습니다. 감사합니다. 주황색 아이콘을 좋아했던 분들에게는 파란색을 더 좋아하시기를 바랍니다.

감사합니다, Chris