멋진 디자인의 원칙

안녕하세요, 저는 Linda입니다 저는 Doug입니다 저희는 Apple의 디자인 에반젤리스트예요 질문으로 시작해 볼게요: 디자인이란 무엇일까요? 잠시 생각해 보세요 사실 우리 중 많은 분들이 디자인은 외관이라고 생각하실 것 같아요 아니면 디자인은 동작 방식이라고 생각할 수도 있겠죠 이러한 정의들이 반드시 틀린 건 아니지만 완전한 그림은 아니에요 Apple에서 디자인은 의도를 가지고 무언가를 만드는 것입니다 사람들에게 가장 중요한 것에 집중하는 것이에요 그래서 진정으로 가치 있는 무언가를 만들 수 있도록요 제품에 추가하는 모든 기능은 사용자에게 무언가를 요구해요 시간, 주의, 그리고 신뢰를 요구하죠 이것들은 낭비할 수 없는 소중한 것들이에요 그래서 무엇을 만들지 선택하는 것은 무엇을 포함하지 않을지 결정하는 문제이기도 해요 스케치 한 장을 그리거나 코드 한 줄을 작성하기 전에 만드는 것에 목적이 있는지 생각해 보세요 목적은 기본 원칙 중 하나예요 Apple 플랫폼에서 훌륭한 경험을 디자인하는 데 활용할 수 있는 사람들을 위하고 삶을 존중하며 적응하는 경험이에요 명확하고 세심하며 최상의 상태에서 진정한 즐거움을 주는 이제 먼저 말씀드리고 싶은 것이 있어요 이 원칙들을 결합하는 공식이나 정답은 없어요 완벽한 해결책에 도달하는 것을 보장해 주지도 않아요 어떤 원칙을 강조하다 보면 다른 원칙과 타협해야 한다고 느낄 수도 있어요 하지만 그것이 바로 디자인이 흥미로운 이유예요 결국 지식과 직관을 활용하는 건 여러분의 몫이에요 최선의 방향을 찾기 위해서요 자, 시작해 봅시다!

목적 다음은 주체성이에요 주체성은 사람들이 통제권을 갖도록 하는 것입니다 자신만의 방식으로 할 수 있을 때 사람들은 통제감을 느껴요 예를 들어, 다음 부분을 맡으실래요? 아, 괜찮아요, 계속 하세요! 알겠어요! 선택지를 제공하는 것이 경험에 주체성을 부여하는 최선이에요 인터페이스는 사용자가 하려는 일을 절대 방해해서는 안 됩니다 미리 정해진 경로로 안내하는 대신 바로 경험에 빠져들게 해 주세요 자신의 속도로 탐색할 자율성을 주세요 자신의 경험을 통제하는 주체성이 있을 때 훨씬 더 참여하게 됩니다 물론 그건 사람들이 실수를 한다는 의미이기도 해요 또는 의도치 않은 경로로 가게 될 수도 있어요 그럴 때는 용서의 여지를 주세요 사람들은 항상 실수로 전송하고 변경하고 삭제해요 용서의 여지를 제공할 수 있어요 모든 작업을 쉽게 실행 취소할 수 있게 해 주면 돼요 그리고 누군가가 중요한 작업을 하려고 할 때는 실제로 그 의도인지 다시 확인하세요 경우에 따라 중단은 도움이 될 수 있어요 하지만 중단은 신중하게 사용하세요 큰 실수를 하려고 할 때만 사용하세요 이런, 그건 하지 않으려고 했어요! 잠깐만요 계속해 봐요

재앙을 피하도록 도와줄 때 사람들은 정말 감사해해요 용서는 주체성을 지원해요 자신감을 주기 때문이에요 어떤 것을 시도하든 항상 회복할 수 있다는 유능하고 안전하며 자유롭게 탐색할 수 있다는 느낌을 주죠 맞아요 하지만 자유를 줄 때는 안녕도 보호해야 해요 그것이 바로 책임으로 이어집니다 Apple 플랫폼에서 책임은 사람들의 최선을 위해 행동하는 거예요 그리고 그것은 개인 정보 보호에서 시작됩니다 개인 정보는 인권이에요 누군가에게 요청할 수 있는 정보가 많더라도 관계를 구축하는 최선의 방법은 아니에요 누군가 이렇게 다가온다고 상상해 보세요 안녕하세요! 안녕하세요! 전화번호를 알려주세요 왜요? 그냥 필요해요 음, 왜요? 전화번호를 주시면 알려드릴게요 실제 생활에서는 그런 사람을 신뢰하지 않겠죠 하지만 인터페이스는 항상 이런 일을 해요 앱을 시작하자마자 권한 요청을 던져버리죠 앱이 실제로 무엇을 하는지 파악하기도 전에요 또는 용도에 대한 설명 없이 정보를 요청하기도 해요 책임감 있는 디자인은 사람들과 개인 정보를 존중해요 실제 세계에서처럼요 책임감 있는 인터페이스는 개인 데이터를 요청할 적절한 시기를 기다려요 필요한 것만 요청하고 데이터 용도를 투명하게 밝혀요 제품을 사용하는 모든 사람을 보호하는 것은 여러분의 책임이에요 그리고 영향을 받을 수 있는 모든 사람도요 그래서 개인 정보 보호 외에도 사람들을 안전하게 지켜야 해요 인터페이스에서 이는 제공하는 기능을 면밀히 살펴보고 어려운 질문을 스스로 던지는 것을 의미해요 이 기능이 어떻게 남용될 수 있을까요? 누가 피해를 입을까요? 그리고 어떻게 막을 수 있을까요?

AI 기능을 제품에 책임감 있게 추가하는 것의 의미를 생각해 보세요 지능형 기능을 만들 때는 모델이 무언가를 생성할 수 있다는 것을 예상해야 해요 예상치 못하거나 부정확한 레시피 앱처럼 무해한 것을 예로 들어볼게요 누군가 알레르기를 기록하면 모델이 재료를 제안할 수 있음을 예상해야 해요 심각한 반응을 일으킬 수 있는 실제 피해를 줄 수 있고 우연에 맡길 수 없는 일이에요 무엇이 잘못될 수 있는지 현실적으로 생각하고 안전장치를 추가하세요 미리 보기, 확인, 고지 사항이 도움이 될 수 있어요 하지만 기능을 완전히 제거하는 것도 고려하세요 사람들의 안전 위험이 가치를 초과한다면요 궁극적으로 여러분의 작업은 사람들의 삶에 실제 영향을 미쳐요 그래서 책임을 진지하게 받아들일 때 사람들이 신뢰할 수 있는 제품으로 이어집니다 다음 디자인 원칙은 친숙함이에요 사람들이 기존 지식을 여러분의 디자인에 가져오는 방식에 관한 것이죠 친숙함은 사람들이 아는 것을 바탕으로 쌓는 것입니다 여러분의 사용자는 평생의 경험을 가지고 있어요 그들은 실제 세계가 어떻게 작동하는지 이해하고 다른 인터페이스에서 규칙을 배웠어요 그 기존 지식을 활용해서 디자인을 직관적으로 만들 수 있어요 이를 위한 좋은 방법 중 하나는 메타포를 사용하는 거예요 메타포는 초기 인터페이스부터 사용되어 왔어요 사람들이 소프트웨어에 친숙해지도록 돕기 위해서요 이게 뭘 하는 건가요? 실제 세계와 같아요! 원하지 않는 것은 휴지통에 들어가요 그리고 실수를 했다면 휴지통에서 되찾을 수 있어요! 실제 세계처럼요! 맞아요! 메타포의 비결은 너무 직접적이거나 너무 추상적이지 않게 하는 거예요 인터페이스에서 인스펙터는 선택된 항목의 세부 정보를 보여줘요 인스펙터 메타포가 너무 직접적이면 사람들이 보여주려는 것에 친숙하지 않을 수 있어요 너무 추상적이면 아이디어가 전달되지 않을 위험이 있어요 좋은 메타포는 사람들이 이미 아는 것을 활용하고 무엇을 할지 예측하는 데 도움을 줍니다 올바르게 사용할 때 메타포는 즉각적으로 와닿아요 잘못 사용하면 나쁜 의미에서 놀라운 결과를 가져올 수 있어요 휴지통으로 돌아가 봐요 휴지통 아이콘을 삭제 이외의 의미로 사용하면 이 기호가 나타내는 것에 대한 사람들의 친숙함에 어긋나요 다른 소프트웨어에서요 삭제 아이콘을 창의적으로 변형해도 마찬가지예요 사람들이 즉각적인 인식을 하지 못하게 돼요 일반적인 작업에서는 새로운 것을 만들 필요가 없어요 사람들이 이미 친숙한 메타포를 사용하세요 그리고 사람들이 기대하는 대로 작동하는지 확인하세요 친숙함은 일관성의 결과이기도 해요 일관성은 사람들이 다음에 무슨 일이 일어날지 예측하도록 도와요 간단히 말해, 같아 보이는 것은 같은 방식으로 동작해야 해요 이 버튼 중 하나가 다른 화면으로 이동하고 다른 하나는 작업을 토글하고 또 다른 하나는 모달을 팝업시키면 이 인터페이스가 어떻게 작동하는지 이해할 패턴이 없게 돼요 일관된 동작은 인터페이스를 탐색하는 데 도움을 줍니다 무슨 일이 일어날지, 어디로 가는지 예측할 수 있기 때문이에요 일관된 배치도 마찬가지예요 Mac에서는 항상 왼쪽 상단 모서리에서 창을 닫을 수 있어요 항상 정확히 같은 위치에 있어요 누군가 작업을 찾을 수 있을 때 화면과 기기에서 같은 위치라면 더 빨라져요 생각할 필요가 없거든요 친숙한 무언가를 만들 때는 어떤 메타포와 패턴을 사용할지 그리고 언제 사용할지 아는 것이에요 하지만 친숙함이 같은 해결책을 어디서나 재활용한다는 의미는 아니에요 그것이 유연함으로 이어집니다 유연한 디자인은 단순한 진실을 인식해요 사람들이 그들 자신만큼이나 고유한 방식으로 디자인을 사용한다는 것이에요 그래서 사람들이 처한 다양한 맥락을 모두 지원하세요 인터페이스에 유연함을 추가하면 사람들의 실제 생활에 적응할 수 있게 돼요 음악 듣기를 예로 들어볼게요 누군가 음악과 상호 작용하는 방식은 상황에 따라 완전히 달라집니다 집에서 스피커로 음악을 조작할 수도 있고 AirPods와 watch로 달리기를 할 수도 있어요 또는 운전 중 완전한 핸즈프리 경험을 사용할 수도 있죠 다양한 상황을 수용하는 인터페이스는 더 편안하게 느껴지고 더 넓은 사용자층에 적합해요 맞아요! 특정 상황을 위해 디자인할 때는 사람이 하고 싶은 것에 주의를 기울이고 있다는 게 보여요 iPhone을 꺼낼 때는 빠르고 터치 기반 상호 작용을 원해요 Mac에서는 심층 워크플로우와 정밀한 포인터 제어를 기대하죠 모든 기기는 고유한 장점을 활용하는 해결책이 필요해요 물론 하드웨어는 절반의 이야기일 뿐이에요 나머지 절반은 사용하는 사람이에요 디자인을 유연하게 만드는 또 다른 방법은 사람들이 가진 다양한 능력에 맞추는 것이에요

사용자가 누구인지 궁금해하세요 나이가 얼마나 되나요? 어떤 언어를 사용하나요? 전문가인가요, 초보자인가요? 접근성 기능에 의존하나요? 처음부터 모든 유형의 사람에게 맞출 수는 없을 수도 있지만 경험을 더 포용적으로 만드는 방법을 살펴볼 수 있어요 유연함을 추가한다는 건 종종 모든 사람을 만족시키는 단일 디자인 해결책을 찾지 못한다는 의미예요 때로는 사람들이 경험을 개인화할 수 있도록 하는 것이 최선이에요 자신의 선호도에 맞게요 컨트롤 같은 것을 예로 들면 모든 사람에게 완벽하게 맞는 단일 레이아웃을 찾기가 정말 어려워요 그래서 사람들에게 재정렬할 수 있는 유연함을 주세요 개인적인 워크플로우를 지원하도록요 또는 사용하지 않는 컨트롤을 숨길 수 있도록 하세요 유연함은 투자이지만 가치 있는 일이에요 사람들을 염두에 두고 디자인했다는 것을 증명하기 때문이에요 다음은 단순함이에요 단순함은 불필요한 것을 제거하는 것이에요 디자인의 핵심 목적이 빛날 수 있도록요 단순하다고 할 때 미니멀하다는 뜻이 아니에요 모든 기능을 한 곳에 묻어두면 인터페이스가 더 미니멀하게 보일 수 있지만 단순해지는 건 아니에요 단순한 디자인은 마찰이 없고 직관적이에요 사람들이 필요한 것을 노력 없이 찾을 수 있어요 그리고 간결하고 명확하게 해서 그것을 달성해요 간결한 인터페이스는 쉬운 언어를 사용해요 전문 용어를 제거하고 자연스럽게 말해요

중복을 피하고 바로 본론으로 들어가요

간결한 인터페이스는 사람들의 시간도 존중해요 일을 처리하는 데 필요한 단계 수를 줄여요 명확하게 해서 단순함을 달성할 수도 있어요 명확한 디자인은 자신이 하는 일을 완벽하게 전달해요 명확함은 계층 구조로 만들어져요 순서, 간격, 대비를 사용해 중요한 것으로 사람들을 안내하죠 계층 구조가 강할 때는 화면에서 가장 중요한 항목이 항상 가장 눈에 띄는 것이에요 명확한 인터페이스는 사람들의 질문에 답해줘요 무엇에 주의를 기울여야 하나요? 무엇과 상호 작용할 수 있나요? 그리고 어떻게 상호 작용하나요?

단순한 인터페이스에서는 모든 요소가 자리를 차지해요 디자인을 살펴보고 정보를 압축할 수 있는 곳을 찾으세요 핵심으로요 그래픽으로 더 잘 이해될 수 있는 복잡한 데이터가 있나요?

정보를 요약할 수 있는 기회가 있나요 사람들이 원하는 것에 집중할 수 있도록요 모든 요소가 요점을 명확히 하는지 확인하세요 경우에 따라 인터페이스를 더 단순하게 만드는 것은 더 추가하는 것을 의미해요 이 비디오 재생/일시정지 컨트롤을 예로 들면 단순하고 친숙해요 보고 있는 것을 일시정지할 수 있고 나중에 돌아오면 더 많은 맥락이 필요해요 이 컨트롤은 어디에 있는지 얼마나 남았는지 명확히 해줘요 때로는 단순함이 맥락과 정보를 추가하는 것을 의미해요 사람들이 정보에 기반한 결정을 내릴 수 있도록요

단순한 인터페이스는 사람들이 그곳에 있는 이유를 지원해요 단순함에 도달했다는 것을 알게 될 때는 딱 충분할 때예요!

다음 원칙은 가진 것을 완벽하게 실행하는 것에 관한 거예요 완성도는 세부 사항에 대한 주의예요 여러분이 제공하는 경험에 정말 신경 쓴다는 것을 말해주죠 저렴한 제품이 어떤 느낌인지 우리 모두 알아요 제대로 닫히지 않는 삐걱거리는 문 세탁하면 풀어지는 셔츠 누군가 지름길을 택했을 때는 그냥 알 수 있어요 소프트웨어도 마찬가지예요 서둘러 출시된 인터페이스를 사용할 때 어떤 느낌인지 정확히 알아요 버튼을 탭하면 무언가 작동하기까지 기다려야 해요 스크롤이 끊겨요, 아이콘이 정렬되지 않아요 폰을 회전하면 레이아웃이 엉망이 돼요 불안정하게 느껴지죠 소프트웨어가 대충 만들어진 것 같으면 그 제품을 사용해 얻을 결과의 품질을 의심하게 돼요 하지만 꼼꼼하게 완성된 디자인은 정반대로 작용해요 자신감을 불어넣어 줍니다 그렇다면 잘 완성된 디자인의 실제 요소는 무엇일까요? 실제 세계처럼 고품질 재료에서 시작해요

기기에서 멋있어 보이는 아름다운 폰트 라이트 및 다크 환경에서 매끄럽게 적응하는 세심한 색상 명확한 그래픽과 아이콘 유동적이고 즉각적이며 자연스러운 피드백을 제공하는 반응형 애니메이션 신뢰할 수 있고 안전한 SDK들을 기반으로 모두 만들어졌어요 이것들이 중요한 세부 사항이에요 하지만 그 수준의 품질에 도달하려면 시간이 필요해요 완성도는 반복에서 나와요 인터페이스의 마지막 부분까지 아름답게 작동하게 해야 해요 그리고 이것은 지속적인 과정이에요 완성도의 큰 부분은 시간이 지나면서 디자인을 유지하는 방법이에요 훌륭한 디자인은 수명이 길어요 계속 발전시키세요 새로운 기능이나 하드웨어가 도입될 때는 여러분의 경험에 맞는지 탐색해 보세요 이러한 변화와 함께 제품이 발전하면 사람들은 지원받고 보람을 느껴요 완성도는 세부 사항에 대한 타협 없는 헌신이에요 세부 사항을 제대로 갖추면 사람들은 여러분이 신경 쓴다는 걸 알아요 마지막으로, 기쁨이에요 기쁨은 정의하기 어려운 것 중 하나예요 하지만 경험할 때 즉시 알아볼 수 있어요 기쁨을 주는 인터페이스는 만족스럽고 풍요로우며 진정한 감정적 연결을 만들어요 그 연결은 경험이 인간적으로 느껴질 때 시작돼요 디자인을 기쁘게 만드는 방법은 색종이를 추가하는 것이 아니에요 또는 프로세스 끝에 여분의 장식을 붙이는 것도 아니에요 기쁨을 주는 인터페이스를 만들려면 사용자가 느끼기를 원하는 감정을 파악하세요 편안함, 자신감, 흥분 그리고 디자인을 통해 그것을 강화할 기회를 찾으세요 기쁨은 제품에 쏟은 배려의 총합이에요 모든 디자인 원칙을 제대로 적용한 자연스러운 결과이죠 의도와 배려를 가지고 디자인할 때 사람들에게 행동할 주체성과 탐색할 안전함을 줄 때 친숙한 패턴의 편안함과 자신만의 것으로 만들 수 있는 능력 진정한 즐거움을 주는 경험을 만들어냅니다 이제 여러분의 차례예요! Human Interface Guidelines는 Apple 플랫폼을 위한 디자인을 시작하는 최고의 자료예요 새로운 디자인 원칙 페이지를 추가했으니 더 알아보세요 이 원칙들을 사용해 디자인을 안내하고 사람들이 정말 좋아하는 무언가를 만들어 보세요