아이디어에서 인터페이스까지 디자인 기초 구축하기

안녕하세요 Design Evangelism 팀 Majo입니다 Evangelism 팀이 하는 일이 궁금하시다면 제 업무는 Apple 플랫폼용 앱 제작 디자이너와 개발자 지원입니다 이 과정에서 배운 점이 있다면 앱이 작동할 때, 그렇지 않을 때 우리 모두는 그 느낌을 잘 안다는 것입니다 사용자 입장에서 차이점을 발견하는 것은 쉽습니다 하지만 디자이너로서 원활한 경험을 빌드하는 것은 조금 더 까다롭습니다 이 부분을 오늘 함께 진행해 보려고 합니다 제가 생각하는 방식 제가 묻곤 하는 질문 애매하게 문제가 있을 때 처리법을 설명 드리겠습니다 우선 구조에서 시작하겠습니다 정보의 구성, 무슨 앱인지 그 기능을 정의하는 것입니다 그런 다음 탐색 즉 사용자가 주도적으로 앱을 이용하도록 명확하게 디자인하는 법을 보겠습니다 이어서 콘텐츠, 의미 강화 명확한 제시, 동작 안내를 위한 콘텐츠 구성 방법을 중점적으로 살펴보겠습니다

끝으로 시각 디자인 측면에서 알맞은 스타일링으로 앱의 개성과 분위기를 살리고 사용성도 높이는 법을 알아보죠 그러면 구조부터 시작해 보겠습니다 모든 앱의 빌드 기초는 그 밖의 많은 것을 결정합니다 탐색하는 방식, 눈에 띄는 요소 경험 전달 방식 말입니다 이 부분이 잘 구성되면 모든 것이 원활하게 돌아갑니다 그렇지 않은 경우는 여러분도 잘 아실겁니다

이를 뒷받침하기 위해 만든 가상의 앱을 보여드리겠습니다 레코드 컬렉션 관리를 돕는 앱입니다 컬렉션을 스크롤하여 재생할 앨범을 고릅니다 크레이트에 레코드 정리 새 레코드 추가, 교체 관리 나중에 구입할 레코드를 저장할 수 있습니다 자, 첫인상이 어떠셨나요? 혼동스러운 점이 있나요? 자연스러운 부분과 그렇지 않은 부분이 어디인가요?

앱을 보았을 때 명확함이 느껴지길 바랍니다 그러면 매력적인 경험이 되고 앱 이용이 수월해집니다

이를 위해서는 우선 현재 위치가 확실해야 합니다 앱은 이 부분에서 명확해야 합니다 현재 위치가 어디인지 어떻게 왔는지 명확해야 합니다 다음 질문은 “무엇을 할 수 있는가?”입니다 추측할 필요가 없고 동작이 명확하고 이해하기 쉬워야 합니다 마지막 질문은 “어디로 갈 수 있는가?”입니다 다음 단계가 명확하면 흐름이 유지되며 주저하거나 추측하는 일이 없습니다 이런 질문에 쉽게 답할 수 있다면 매력적인 앱이라는 의미입니다 일반적으로 기초가 탄탄하다는 신호이고요 이 앱은 언뜻 꽤 괜찮아 보입니다 앱이 잘 작동할 거라고 넘겨짚게 됩니다 그러면 첫 질문부터 시작해 앱의 답이 어떤지 보겠습니다 현재 위치가 확실해야 하는데 처음 보이는 것은 메뉴입니다 적절하지 않죠 메뉴는 모호하고 예측이 어려워 먼저 필요한 것은 맥락입니다 다음으로 제목이 있는데 브랜딩 같은 느낌이 듭니다 보기에는 좋지만 크게 도움이 되지 않습니다 넘겨 버리고 싶은 충동이 들 정도입니다 때문에 앱의 추천 콘텐츠 조차 쉽사리 놓치고 마는 결과를 낳을 수 있습니다

스크롤 시 앨범들이 보이는데 둘러보기 외에는 가능 동작이 없어 현재 위치가 어디인지 해야 할 동작이 아직 불명확합니다 밑에 Records라는 이름이 있어 겨우 현재 위치를 알 수 있지만 정보가 너무 늦게 제시됩니다 결과적으로 화면이 안내해 주지 않아 정보를 찾아야 했습니다 구조가 불명확할 때 어떤지 우리 모두 경험을 했습니다 머뭇거림, 혼란을 느끼고 사용자는 포기하기도 합니다 앱 내용이 적었다면 열었을 때 간편하게 보였을 것입니다 이것이 바로 정보 아키텍처의 목표입니다 정보를 정리하고 우선순위를 정하여 사용자가 필요 시 원하는 것을 쉽게 찾도록 하는 과정입니다 제가 가장 먼저 하는 일은 앱의 모든 기능을 적는 것입니다 기능, 작업 흐름, 있으면 좋은 요소 등입니다 이때 저는 아무것도 판단하거나 없애려고 하지 않습니다 그런 다음 다른 사람이 앱을 사용할 때를 상상합니다 언제 어디서 앱을 사용할 것인가? 앱이 사용자의 일상에 어떻게 들어맞는가? 사용자에게 실제로 도움이 되고 방해가 되는 것은 무엇인가? 이러한 질문의 답을 목록에 기록합니다 목록이 완성되면 정리를 시작합니다 필요하지 않은 기능은 없애고 불명확한 이름을 바꾸고 자연스럽게 모을 수 있는 것들은 그룹화합니다 이 과정을 거친 후에는 필수적인 부분을 명확히 알지 못하면 이를 앱에서 전달할 수도 없다는 사실을 알게 됩니다 단순화하면 앱의 목적을 강화할 수 있습니다 또한 사용자가 기능을 어떻게 생각할지 그러한 기능을 언제 사용할지 명확한 시작점을 제시해 줍니다 탐색에서 더 자세히 살펴보겠습니다 탐색은 사용자가 앱에서 이동하는 방식인데 그저 탭하는 동작 그 이상의 의미가 있습니다 사용자가 방향성과 명확성을 느껴야 합니다 이를 위해 정보 아키텍처에서 습득한 내용을 활용해 주요 기능에 접근해 보겠습니다 iOS에서는 탭 막대 구성요소를 사용하게 됩니다 이는 앱의 다른 섹션을 탐색할 수 있도록 해 주며 항상 표시되기 때문에 언제든 쉽게 접근할 수 있습니다 단순화가 중요한 이유는 탭이 늘어나면 사용자가 내려야 할 결정도 늘어나며 앱이 훨씬 더 복잡해 보이게 합니다 그래서 저는 잠시 멈춰 질문합니다 정말 필수적인 것은 무엇인가? 무엇을 탭으로 만들어야 하는가? 탭으로 만들 필요가 없는 것은 크레이트입니다 크레이트는 레코드를 그룹화하는 화면에 불과합니다 병합합니다 둘 다 있을 필요는 없습니다 이어서 Add가 있는데 기본 동작이므로 탭 막대에 있습니다 하지만 여기가 가장 좋은 위치인지 의구심이 듭니다 구성요소를 적절히 사용하는 시점이나 방법이 확실치 않으면 항상 휴먼 인터페이스 가이드라인을 살펴봅니다 역시 탭은 동작이 아니라 탐색용이라고 확인됩니다 Add를 많이 사용될 곳인 Records로 이동합니다 이제 탭 막대에 구분되는 세 섹션이 마련되었습니다 내용을 가능하면 더 쉽게 예측할 수 있도록 해야 하므로 탭에 이름을 붙이면 더 좋겠다는 생각이 듭니다 레이블과 아이콘으로 사용자가 각 탭의 용도를 알 수 있으면 좋죠 단순히 용도를 확인하려고 누르거나 무슨 용도인지 몰라 건너뛰지 않도록 말입니다 Swaps와 Saves의 이름을 더 직접적인 레이블로 바꿉니다 각 탭의 의미가 강조되도록 아이콘을 변경합니다 시각적 일관성이 있어야 하므로 아이콘을 직접 디자인하는 대신 (직접 하려면 무척 어렵긴 하죠) Apple의 아이콘 라이브러리인 SF Symbols를 사용하겠습니다 이러한 기호는 Apple 플랫폼 사용자에게 이미 친숙하기 때문에 탭을 알아보기가 쉽습니다 단순한 아키텍처, 친숙한 아이콘 명확한 레이블 덕분에 앱의 전체 범위와 목적이 분명해지고 탭 막대가 더 사용하기 쉽게 느껴집니다 정보 아키텍처 작업을 통해 일부 항목이 이동하면서 콘텐츠가 혼동을 줄 여지가 생겼습니다 이제 도구 막대로 내용을 명확히 해 보겠습니다 이렇게 하면 인터페이스에서 방향성을 잡기에 좋습니다 초반에 있었던 두 가지 문제 즉 현재 위치가 어디인지와 무엇을 할 수 있는가라는 문제가 모두 해결됩니다 그 이유는 도구 모음에 전과 달리 메뉴나 브랜딩이 아닌 화면 이름이 포함된 제목이 있기 때문입니다 이를 통해 화면의 콘텐츠를 짐작할 수 있으며 사용자가 탐색하고 스크롤할 때 방향성을 유지할 수 있습니다 또한 사용자가 탭 막대를 사용하는 대신 화면별로 주요한 동작을 수행하기에 좋은 곳이기도 합니다 공간이 없어 SF Symbols를 사용해 필수적인 내용만 포함하되 각 동작을 쉽게 알아볼 수 있도록 하겠습니다 이제 현재 위치가 어디인지 무엇을 할 수 있는지 앱에서 가능한 것이 명확합니다 사용자가 처음부터 명확하게 할 수 있는 경험이 준비됐습니다 구조를 손보고 탐색 구성요소를 의도적으로 사용한 결과입니다 돌이켜보니 처음에는 단점이 많았습니다 하지만 이것도 과정의 일부입니다 반복 작업을 거듭할수록 유용 하고 예측과 탐색이 쉬운 디자인이 완성되어 갑니다 이제 둘러볼 수 있는 기초가 마련되었으므로 화면의 실제 항목을 자세히 살펴보겠습니다 앱의 콘텐츠는 가장 중요한 것 먼저 보기를 원하는 것으로 사용자를 안내하도록 배치해야 합니다 지금까지 원하는 앱의 위치로 안내하는 방법에 집중했습니다 그렇다면 콘텐츠는 어떨까요? 두 가지 유형의 콘텐츠가 섞여 지저분한 느낌이 듭니다 그룹과 레코드죠 간단한 것을 시도해 볼 텐데 두 섹션을 나누는 것입니다 좋은 시작점이라고 생각합니다 적어도 콘텐츠가 무엇인지 알려 주는 제목이 있으니까요 하지만 스크롤해야 화면의 다른 내용이 보입니다 우선 몇 그룹만 보여 주고 이후 다른 그룹을 보여줄까요? 이 개념을 단계적 공개라고 합니다 사용자가 시작하는 데 필요한 정도의 내용만 먼저 보여 주고 이후에는 상호작용을 통해 추가 정보를 확인하도록 하는 방식입니다 매우 흔한 형태로 인터페이스가 처음에는 간단했다가 점차 더 자세한 내용이나 고급 옵션을 제공하는 식입니다 그래서 사용자가 콘텐츠를 놓치는 것이 아니라 콘텐츠가 제목 옆의 공개 컨트롤 뒤에 숨어 있다가 관련된 순간이 오면 표시되는 것입니다 화면이 열릴 때 콘텐츠가 동일하게 정렬되었으면 합니다 이전 화면과 연결되어 있으면서 확장되는 느낌이 들도록요 탐색에서 설명했듯이 모든 화면은 방향을 제시해야 합니다 이번에는 도구 모음을 제대로 살펴보겠습니다 도구 모음에는 화면 및 뒤로 버튼과 관련된 동작이 있어 도달한 경로와 이동 방법을 이해하기 쉽습니다 제 초기 디자인에는 장식용 요소나 목적이 없는 요소가 있었습니다 그래서 중요한 기능을 찾기가 어려웠습니다 이제는 더 스마트한 디자인을 추구하고자 합니다 레이아웃에서 콘텐츠를 가장 명확히 표시하는 법을 찾는 거죠 몇 가지 예를 살펴보겠습니다 단계적 공개는 올바른 수정 방향 이었습니다 하지만 격자 레이아웃은 최선이 아닌 것 같습니다 두 가지 항목만 담기에는 공간을 너무 많이 차지합니다 긴 텍스트를 표시하지 못해 콘텐츠가 불분명해집니다 이 부분을 손보겠습니다 목록은 구조화된 정보 표시에 유연하고 친숙한 방식이자 빠르게 훑어볼 수 있다는 점에서 훨씬 효과적입니다 또한 이미지보다 수직 공간을 덜 차지하므로 더 많은 항목을 한 번에 화면에 표시합니다 보시다시피 저는 처음부터 직접 디자인한 것이 아니라 탭 막대와 도구 모음 같은 구성요소를 통해 기능을 우선시해 디자인하는 것이 효과적임을 확인했습니다 그래서 Apple 디자인 리소스의 목록 템플릿을 사용합니다 콘텐츠에 맞게 쉽게 조정할 수 있었죠 디자인이 의도가 더 뚜렷해지고 더 많은 기능을 지원하면서 실제 앱 같은 느낌이 들기 시작했습니다 이제 마지막 섹션이 어떻게 작동하는지 살펴보겠습니다 스크롤하면 다른 사용자가 업로드한 모든 레코드가 보입니다 목표는 모든 것을 미리 보여줘 사용자가 둘러보는 것이었습니다 하지만 선택의 폭이 넓어지면 처리에 필요한 노력도 커집니다 사용자가 콘텐츠를 탐색하는 대신 부담감을 느껴 앱 사용을 중단할까 걱정됩니다 대량 콘텐츠 표시를 구상하기 전에 콘텐츠 정리가 필요했습니다 정보 아키텍처에서처럼 항목을 주제별로 그룹화하니 잡음을 걸러내고 중요한 것에 집중할 수 있게 되었습니다 앱의 콘텐츠를 정리할 때 사용하는 몇 가지 테마가 있는데요 시간별 콘텐츠 분류가 가장 흔한 방법 중 하나입니다 이 방법은 최근 파일을 찾을 때나 스트리밍 중인 프로그램을 이어서 시청할 때 유용합니다 계절과 현재 이벤트를 고려한 그룹화 또한 더욱 생생하고 관련성 높은 경험을 조성해 줍니다 진행 상황에 따라 그룹화하면 이메일 초안, 진행 중 수업 등 중단한 곳에서 다시 진행할 수 있습니다 앱이 실생활에 반응한다는 느낌을 주기에 좋은 방법인데 누구든 한 번에 모든 것을 끝내는 경우는 드뭅니다 패턴별로 그룹화하는 것은 관계, 또는 관련 제품처럼 한데 모을 수 있는 항목을 드러내는 방식입니다 패턴을 드러내는 방식에서는 짧은 둘러보기가 긴 탐색이 되는데 사용자가 미처 생각지 못했던 연결 고리를 보여주기 때문입니다 이러한 그룹화 아이디어는 한 가지 앱에 국한되지 않습니다 콘텐츠가 크게 시각적이지 않거나 자주 바뀌지 않더라도 그룹화로 선택 과부하를 줄이고 선제적 앱을 만들 수 있습니다 사용자가 그 다음에 필요한 것을 이해하는 앱 말입니다 저는 그룹화를 꼭 활용할 것입니다 그리고 필요에 따라 다수의 이미지 표시에는 컬렉션을 사용하는 것이 가장 좋습니다 사진, 비디오, 제품 등의 항목 그룹을 표시하고 화면 안팎에서 스크롤하는 데 적합합니다 동적인 느낌이 정말 좋습니다 이를 위해 항목 간에 일관된 간격을 유지하고 텍스트가 너무 많지 않도록 주의합니다 앞서 말씀드린 그룹화 아이디어로 컬렉션을 만들었습니다 여기서는 시간 기준으로 여름에 맞는 레코드를 표시합니다 진행 상황 기준으로는 전집이나 음반 목록을 표시합니다 패턴 기준으로는 스타일이나 장르로 구분합니다 콘텐츠를 신중히 구성하고 친숙한 플랫폼 요소를 배치하면 사용자가 중요한 것을 쉽게 찾을 수 있기 때문에 직관적이면서 계속 다시 사용하고 싶은 공간이 완성됩니다 마지막으로, 앱을 열었을 때 자연스러운 분위기를 내는 데는 시각 디자인이 큰 부분을 차지합니다 시각 디자인은 앱의 개성 전달 사용자의 감정 형성을 합니다 계층, 타이포그래피, 이미지와 색상을 세심하게 사용하고 기능을 지원하는 역할을 합니다 앱의 시각 디자인을 발전시키려면 효과적인 부분과 개선이 필요한 부분을 파악해야 합니다 활자, 색상 및 이미지가 조화를 이루는 방식에 집중합니다 슬쩍 보면 시선이 첫 번째 컬렉션으로 향합니다 시각적으로 무겁고 다채롭기 때문입니다 콘텐츠의 절반이 빠졌고 공간감도 떨어집니다 여기서 부족한 것은 시각적 계층입니다 관건은 화면에서 시선을 안내하여 중요도 순으로 각종 디자인 요소를 인지하도록 하는 것입니다 시각 디자인을 개선하기 위해 이 추천을 시각 앵커로 바꾸죠 가장 중요한 것의 크기를 키우거나 대비를 높이는 것입니다 이렇게 하면 자연스럽게 먼저 시선이 갑니다 그리고 시각적으로 제 역할을 다합니다 하지만 과연 지속될까요? 텍스트가 길어지거나 언어가 변경되거나 사용자가 큰 텍스트를 사용하면요? 결국 더 유연한 방향으로 디자인해야 한다는 의미입니다 특히 활자 측면에서 말입니다 이때 유용한 것이 시스템 텍스트 스타일입니다 이를 통해 다양한 화면 조건에서도 명확한 계층과 강력한 가독성을 쉽게 구현할 수 있습니다 제목부터 자막까지 모든 것을 일관되게 스타일링할 수 있습니다 이렇게 콘텐츠의 다양한 중요도를 전달할 수 있는 자유가 생겼습니다 텍스트 크기를 눈으로 보거나 맞춤 스타일이 필요없습니다 풀 블리드 디자인을 유지하고 앨범 커버를 배경에 놓습니다 그러면 텍스트에 지속적인 공간이 확보되며 세 가지 텍스트 스타일로 크기 및 대비 변화를 주어 시선을 유도합니다 텍스트 스타일은 Dynamic Type도 지원하므로 사용자가 자신에게 편안한 텍스트 크기를 선택할 수 있어 더 포용적이고 누구나 사용하기 쉬운 앱이 완성됩니다 텍스트가 이미지 위에 겹쳐지면 가독성이 문제가 될 수 있습니다 복잡하거나 대비가 높은 시각적 요소는 특히 그러합니다 이러한 경우에 명확성을 우선시해야 합니다

간단한 해결법 중 하나는 텍스트 뒤에 그라데이션, 블러 등 은은한 배경을 추가하는 것입니다 이러면 디자인을 해치지 않으면서 차원감으로 가독성이 향상됩니다 마지막으로 중점을 두고 싶은 부분은 이미지와 색상이 앱의 개성을 전달하는 데 도움이 된다는 점입니다 목록에서 시작해 보겠습니다 너무 단순화한 나머지 구성요소 사이에서 길을 잃은 감이 있습니다 목록을 쉽게 볼 수 있도록 각 그룹에 이미지를 넣겠습니다 하지만 일부 이미지가 너무 튑니다 모두 색상과 스타일이 크게 다릅니다 정말 필요한 것은 일관된 시각 스타일입니다 색상 팔레트를 선택하고 몇 가지 간단한 규칙을 정합니다 아마 일관된 미감이 확보되고 자연스러운 느낌이 날 것입니다 네 가지 색상을 선택하고 복고풍 모양을 조합합니다 제목이 표시되는 그룹의 경우 더 굵고 넓은 서체를 사용했습니다 그래서 목록에 있는 텍스트와 느낌이 다릅니다 지금이 아주 좋은데요 앱의 개성이 돋보이며 앱을 확장할 때도 일관성을 유지할 것 같습니다 색상 작업을 하는 김에 앱의 어떤 다른 부분에서 색상을 활용할 지 궁금합니다 배경, 텍스트, 아이콘 정도일 텐데 이미 색상이 있지만 팔레트에서 고른 것이 아닙니다 검은색이나 보라색이 아니고 label이나 secondarySystemBackground 같은 이름입니다 의미 색상이라 하며, 외형이 아닌 목적에 따라 명명합니다 동적인 색상이기 때문입니다 이러한 색상은 대비 설정 화면 환경 라이트 및 다크 같은 모드에 따라 자동으로 변경됩니다 버튼, 컨트롤 등 여기저기에 강조 색상을 사용하여 선택된 항목을 표시합니다 다만 동적 변화, 전반적 가독성 편안함을 저해하지 않도록 주의해야 합니다 동적인 부분에 대해서는 이것이 기본적으로 제 시스템 색상 팔레트입니다 이는 Apple 디자인 리소스의 일부이며 추가 작업 없이 사용자가 선호하는 외관에 맞게 원활하게 조절되는 시각적 계층을 구축하기 위한 유연한 옵션 세트의 역할을 합니다 시스템의 기능을 활용할 때와 개성을 더할 때를 파악하는 연습을 하기에 좋은 방법입니다 디자인 요소 각각을 별도의 작은 프로젝트로 하고 싶을 수 있습니다 생각과 주의가 필요하니 프로젝트라고 할 수 있기는 합니다 하지만 진짜 효과는 디자인 요소들이 조화를 이루어 인터페이스의 전반적인 의미에 기여할 때 나타납니다 제 디자인은 처음과 완전히 다른 모습이 되었습니다 구조와 탐색을 단순화하고 콘텐츠를 의미 있게 표현하여 모두가 즐길 수 있는 공간에서 동작을 수행할 수 있게 되었습니다 이 디자인의 모든 요소는 우리 결정으로 이뤄졌습니다 첫 번째 탭부터 마지막 스크롤까지 말입니다 디자인은 100% 완성도 없으며 정해진 답도 없습니다 오늘은 기초 사항을 살펴봤으며 앱을 발전시킬 수 있는 여지는 타이포그래피, UX 라이팅 애니메이션 등 많습니다 계속할 준비가 되었다면 작년의 이 세션들을 확인해 새로운 디자인 시스템을 알아보세요 탐구하고 배울 내용이 많으니 호기심을 잃지 마세요 여러분 아이디어의 결실이 기대됩니다!