SwiftUI로 디자인하기

안녕하세요 여러분. 와주셔서 감사합니다. 정말 죄송합니다. 통제 중입니다. 발표자 안내문을 좀 더 크게 해주실 수 있을까요? 읽기가 어려워요.

디자인 희망 목록을 가지고 팀 전체가 함께 와주셔서 정말 감사합니다. 당신과 이 행사를 위해. 그리고 저희는 그 과정이 어떻게 이루어졌는지 여러분과 공유하게 되어 매우 기쁩니다. 그러니 여러분이 조금이라도, 아시다시피, 전달해 주실 수 있기를 바랍니다. 제가 수년간 배우고 경험한 것들과 디자인 과정을 여러분과 공유하고자 합니다. 그럼 시작하겠습니다. 앱 탐색부터 시작할게요. 이는 콘텐츠를 위한 구체적인 섹션을 만드는 것에서 시작됩니다. 그리고 여러분의 기능들. 저희는 그런 식으로 시작하는 걸 좋아해요. 우리가 무엇을 정확히 지을지부터 계획을 세워야 해요. 항해는 좀 지루한 주제일 수도 있지만, 저는 개인적으로 아주 좋아합니다. 그럼 다음으로 그 부분부터 시작해 보겠습니다. 레이아웃에 대해 이야기하고 콘텐츠를 가장 효과적으로 제시하는 방법을 설명하겠습니다. 화면 안에.

마지막으로 시각 디자인에 대해 이야기해 보겠습니다. 이것이 바로 구성 요소와 시각적 요소가 결합되어 명확성을 제공하는 모습입니다. 그리고 앱에 개성을 더하세요.

네. 앞서 말씀드렸듯이, 저는 이 앱을 처음부터 직접 디자인했습니다. 그리고 제가 제일 먼저 한 일은 앱 내비게이션에 대해 생각하는

것이었습니다. 앱의 콘텐츠와 기능을 결정합니다. will have는 내게 좋은 틀을 제공할 것이다. 그러면 명확하게 구축할 수 있습니다. 그러면 상단 바와 같은 탐색 구성 요소를 사용하는 방법을 알게 될 것입니다. 그리고 툴바.

저는 먼저 브레인스토밍을 하고 팀원들이 해야 할 모든 일을 목록으로 작성하는 것으로 시작했습니다. 그리고 저는 앱이 갖추고 있어야 하고, 또 그렇게 하기를 바랐습니다. 우리는 골을 축하하고 싶었고, 모든 아이디어를 환영했습니다. 우리는 브레인스토밍 단계에 있었어요.

디자이너는 단 1분만 말했다. 거기서부터 단순화했습니다. 그리고 저는 여행 버킷리스트 앱(예: 여행 만들기)에 필요한 필수 항목만 남겨두었습니다. 사진을 추가하고, 검색하고, 그런 다음 뒤로 물러납니다. 여행, 활동, 진행 상황 등 관련된 아이디어들을 함께 묶어서 그룹화합니다. 그리고 완료된 여행을 축하합니다.

이 그룹들은 앱에서 가장 인기 있는 세 가지 섹션을 나타냅니다. 그래서 저는 그것들을 위시리스트, 목표, 그리고 검색이라고 이름 지었습니다.

이것이 바로 저희 앱입니다. 그리고 이것이 여러분에게 어떤 의미인지 알려드리겠습니다.

앱을 처음부터 개발하든 기존 앱을 수정하든 상관없이. 이 연습을 해보는 것은 매우 유익합니다. 저는 개발자 센터에서 개발자들과 함께 이 작업을 해왔습니다. 워크숍에 참여하는 동안 항상 많은 것을 깨닫게 됩니다. 그러니 여러분도 그렇게 하시기를 권합니다. 그래서 생각을 정리하는 데 도움이 됩니다. 그리고 브레인스토밍을 통해 머릿속에 있는 이러한 막연한 아이디어들을 모두 정리해 보세요. 이제 연결된 화면들을 구축할 준비가 되었습니다.

이 모든 것이 SwiftUI 와 어떻게 연결되는지 설명해 드리겠습니다. 당신이 바로 그 일을 위해 여기에 왔다는 것을 알고 있습니다. iOS 에서도 그 단계에 도달하고 있어요. 앱 탐색을 지원하는 구성 요소는 두 가지입니다. 상단 바와 툴바.

먼저, 상단 메뉴바가 어떻게 작동하는지 보여드리겠습니다. 상단 바에는 앱의 최상위 섹션이 표시됩니다. 그리고 모든 화면에서 계속해서 볼 수 있습니다.

이 예시에서 앱은 실제보다 더 복잡하게 느껴질 수 있습니다. 우리는 모두 기능이 많을수록 좋다는 광고를 하는 앱들을 보잖아요. 탑바에 계속해서 알림이 뜨는 건 좋지만, 그걸 좋아하는 사람은 많지 않아요. 상황이 매우 복잡해집니다. 제가 항상 추천하는 것 중 하나는 탭 수를 적게 유지하는 것입니다.

단순함을 유지하는 데 도움이 되고 예측 가능성이 매우 높습니다. 의사결정 과정을 줄여줍니다. 그래서 앱을 열 때마다 어떤 옵션을 사용할 수 있는지 정확히 알 수 있습니다.

둘째, 탭 바는 기본 기능을 유지하세요. 오늘 빙고 카드에 이게 있나요?

아시다시피 SwiftUI 컴포넌트에는 탭 바 같은 것들이 있죠. 애니메이션 및 접근성 지원과 같은 내장 기능이 함께 제공됩니다. 이러한 행동 양식은 사용자 정의 과정에서 쉽게 사라질 수 있습니다.

하지만 걱정 마세요, 다른 곳도 많을 거예요. 개성을 표현할 수 있는 앱입니다. 상단 바는 그중 하나가 아닙니다.

마지막으로 탭 표시줄에 명확한 기호를 사용했는지 확인하세요. 그리고 각 탭의 내용과 일치하는 레이블이 있습니다.

위시리스트. 딱히 공통적인 기호는 없죠? 그래서 저는 무지개를 선택했어요. 여전히 알아볼 수 있고 사람들이 꿈꾸는 여행의 모습을 담고 있는 것 아닌가요? 희망적인 느낌이 드네요.

반면에 목표는 더 명확한 상징을 사용하는 것입니다. 더 명확하고, 제목과도 아주 잘 어울립니다. 그리고 그 안에 있는 많은 수집품들과 같은 모양을 하고 있습니다. 저는 그게 참 좋은 아이디어라고 생각했어요.

탭 바도 마찬가지로 효과적일 수 있습니다. 다음 지침 중 일부를 따르면 효율성을 높일 수 있습니다.

자, 이제 잠깐 다른 이야기로 넘어가겠습니다. 디자인이나 탭 바에 대해 좀 더 자세히 알아보고 싶으시다면,

휴먼 인터페이스 가이드라인 참조하십시오. 저희가 전에도 말씀드렸던 내용입니다. 헤이그는 디자인의 본고장입니다. 모든 Apple 플랫폼 및 기술에 대한 지침 및 모범 사례.

저희를 찾아오시기 전에 궁금한 점이나 조언을 얻으실 수 있는 첫 번째 곳입니다. 이제 드디어 헤이그로 가는 링크를 찾을 수 있습니다. 개발자 웹사이트의 디자인 섹션에서, 여기에는 매우 귀중한 Apple 디자인 자료도 포함되어 있습니다.

위시리스트 탭 디자인 그리고 제가 디자인한 거의 모든 다른 앱들 저는 일상생활에서 이 라이브러리의 네이티브 컴포넌트를 사용하고 있습니다.

그리고 여러분이 디자인 도구를 찾아보고 구축하는 동안, SF 심볼 앱을 다운로드해 보는 건 어때요? 그것은 상징적인 사과 사이다입니다. 여기에는 복사할 수 있는 7000개 이상의 기호가 7개 있습니다. 디자인이나 코드에 붙여넣으세요.

이것들은 제가 상단 바에 사용하는 것들이고, 앞으로도 계속 사용할 겁니다. 오늘 저는 그것을 참고하겠습니다. 자, 그럼 다시 본론으로 돌아가죠. 상단 바와 툴바 모두 앱 탐색을 지원합니다. 하지만 차이점이 있죠, 그렇죠? 그들은 서로 다른 수준에서 작용합니다. 사용자는 상단 바를 사용하여 앱 내외부를 탐색합니다. 최상위 탐색이라고 말씀드렸죠. 하지만 조치를 취하고 특정 섹션으로 들어가야 할 때가 되면, 툴바를 사용하겠습니다.

툴바에는 탐색을 지원하는 다양한 요소가 있습니다. 먼저 현재 화면의 제목입니다. 이 화면에서 사람들을 볼 수 있습니다.

그들은 자신들이 그렇게 했다는 것을 알 수 있습니다. 그것들은 위시리스트에 있어요. 아니, 이 위시리스트 섹션에 있어요. 그리고 그들은 화면 내용에 대한 어느 정도의 맥락을 가지고 있습니다. 분위기를 조성하는 역할을 하는 것 같아요. 그러면 툴바에 컨트롤이 표시됩니다. 화면에 표시되는 가장 중요한 동작들을 위해서입니다. 주요 작업은 여행을 계획하는 것입니다. 그래서 저는 그렇게 할 수 있도록 오른쪽 상단에 컨트롤을 배치했습니다.

툴바의 세 번째 요소는 탐색 컨트롤입니다. 여행 상세 정보는 다음과 같습니다. 사람들이 이전 단계로 돌아갈 수 있도록 뒤로 가기 버튼을 추가했습니다. 그리고 위시리스트에 다시 접근하세요. 스캔하기 쉽도록 하기 위해서입니다. 저는 행동 횟수를 최소화합니다. 상단 메뉴와 동일한 안내입니다. 또한, 익숙하고 이해하기 쉬운 상징을 선택하여 의미가 명확하게 전달되도록 하십시오.

예를 들어, 항목이 너무 많을 때. 이 예시에서 분명히, 사람들은 자신이 먼저 무엇을 해야 하는지 이해하기 어려워합니다. 이 문제를 해결하려면 빈도가 낮은 행동을 찾으면 됩니다. 아니면 더 고급 기능이 있어서 '더보기' 메뉴 뒤에 숨겨져 있는 걸까요?

툴바는 주요 작업에 대해 눈에 띄는 스타일을 제공하기도 합니다. 생동감 넘치는 색감을 더하고 즉각적인 시선을 사로잡는 포인트가 됩니다.

앱을 디자인할 때. 화면당 하나의 동작에만 이 스타일을 사용해야 합니다. 최상단에서는, 우리가 원하는 중요한 기능들이 많이 있다는 것을 알고 있습니다. 강조하고 싶은 부분이지만, 아시다시피 모든 것이 중요하다면 아무것도 중요하지 않죠.

그렇다면 이 경우에는 여행을 하나도 하지 않은 여행 버킷리스트가 어떻게 될까요? 그래서 저는 그 점을 강조하고 싶습니다.

마지막으로 툴바에 대해 말씀드리자면, 상단 바와 마찬가지로, 네이티브 버전을 유지하는 것이 가장 좋습니다. 우리 함께 말해야 해요.

배경 같은 걸 추가하는 건 사실 별 의미가 없잖아요. 그것은 당신의 콘텐츠와 경쟁합니다. 기능성과 모르핀 효과 면에서 경쟁 관계에 있습니다. 그리고 나중에 커트가 그 부분에 대해서도 조금 이야기할 거예요.

지금까지는 앱의 구조에 집중해 왔습니다. 그리고 사람들이 그 안에서 어떻게 움직일 것인가. 이제 화면에 콘텐츠를 담을 차례입니다. 그리고 어떻게 발표할지 결정합시다.

이것이 바로 제가 레이아웃이라고 말하는 것입니다. 제가 좋아하는 레이아웃 패턴 두 가지를 예시로 보여드리겠습니다. 리스트와 컬렉션을 사용하기 위해서입니다.

두 옵션 모두 매우 유연하므로 어느 쪽이든 자유롭게 선택하셔도 좋습니다. 둘 중 하나겠지만, 곧 상황에 따라 다르다는 걸 알게 될 거예요. 보여주고 싶은 콘텐츠와 사람들이 그 콘텐츠를 어떻게 활용해야 하는지에 따라 달라집니다. 두 가지 선택지 중 하나가 다른 하나보다 더 낫다.

예를 들어, 내용이 텍스트 기반일 때는 목록을 사용합니다. 네. 그리고 표시해야 할 항목이 여러 개 있습니다. 덕분에 사람들이 내용을 아주 빠르게 훑어볼 수 있습니다. 그래서 이 레이아웃이 여행 활동에 적합한 것입니다.

여기서는 필요에 따라 '엣지 투 엣지'라는 스타일을 사용하고 있습니다. 콘텐츠를 분류해야 할 때는 그룹 스타일을 사용합니다. 그러니까 미묘한 차이라는 거죠. 하지만 삽입된 부분, 삽입된 레이아웃은 둥근 모서리가 각기 다른 카테고리를 명확하게 구분해줍니다. 목록에 넣을 수 있는 콘텐츠입니다. 그래서 제 앱에는 이런 스타일이 딱히 필요하지 않았어요. 다운로드하고 게임을 시작하면 그것으로는 이 예시를 찾을 수 없겠지만, 저는 원했습니다. 어떻게 할 수 있는지 보여드리려고요. 항상 그런 경우가 있잖아요. 엣지 투 엣지를 언제 사용해야 하는지 등에 대한 혼란이 좀 있는 것 같아요. 인셋은 언제 사용하나요? 우리는 이런 식으로 합니다.

마지막으로, 사람들이 목록을 빠르게 살펴보고 행동할 수 있도록 돕기 위해, 저는 액세서리와 컨트롤러를 사용합니다. 이미지 및 자막과 같은 부가 기능, 사람들이 한 줄씩 읽지 않고도 항목을 더 빨리 알아볼 수 있도록 도와줍니다.

그리고 여기 있는 선택 버튼과 같은 컨트롤은 사람들이 선택하는 데 도움이 됩니다. 다른 관점을 고려하지 않고 행동하는 경우가 매우 흔합니다. 앱이 때때로 너무 복잡해지기도 합니다. 조회수를 추가하고 있기 때문입니다. 목록 보기에서 간단히 처리할 수 있는 몇 가지 작업에 대해서만 그렇습니다.

추가할 수 있는 컨트롤 유형은 매우 다양합니다. 또한 다양한 기능을 지원합니다. 그러니 여러분께서 직접 가서 이용 가능한 것들을 살펴보시기를 권장합니다. 레이아웃을 간소화할 수 있는 기회가 있는지 살펴보세요. 여기에는 스텝퍼, 토글 스위치, 슬라이더 등 여러분이 직접 사용해 볼 수 있는 다양한 제품들이 있습니다.

그리고 이는 사람들이 텍스트를 빠르게 탐색하는 데 도움이 되는 목록을 포함합니다. 하지만 사진, 동영상 또는 제품을 둘러보는 것이 목적이라면 이야기가 달라집니다. 컬렉션이 훨씬 더 적합합니다.

SwiftUI 컬렉션은 기본적으로 뷰를 쌓아 올린 형태입니다. 화면 밖으로 콘텐츠가 확장될 수 있는 스크롤 뷰를 사용하여, 그리고 사람들이 스크롤하면서 안에 무엇이 있는지 발견하도록 유도합니다. 하지만 위시리스트 탭의 주된 목적은 둘러보는 것입니다. 그래서 저는 레이아웃을 만들기로 했습니다. 다양한 컬렉션 변형과 함께

만화에 시각적인 요소를 더하고 개인적이고 흥미로운 느낌을 주는 것. 사람들이 업로드한 사진들을 보여줍니다.

컬렉션의 경우 모든 콘텐츠가 한 번에 표시되는 것은 아니라는 점을 유념해 주세요. 대부분은 화면 밖에 있습니다. 따라서 적절한 기대감을 조성하고 사람들이 콘텐츠를 훑어보도록 유도하기 위해, 제목과 이미지를 효과적으로 추가하도록 하겠습니다. 그게 무슨 뜻인가요?

자, 이 예시에서 이미지가 가치를 더한다고 생각하시나요?

좀 뜬금없어 보이지 않나요? 네. 아주 예측 불가능하죠. 그리고 바로 그런 점 때문에 때때로 신뢰를 잃는 겁니다. 콘텐츠 자체에 문제가 있는 이유는 이미지가 맥락에 맞지 않기 때문입니다. 인위적으로 기획된 것 같지 않아요. 그런 다음 길이가 일정한 제목을 추가할 수 있습니다. 그렇지 않으면 레이아웃이 다소 투박해 보이기 시작합니다. 그리고 정렬이 안 된 것처럼 보입니다. 그래서 이는 소장품에 피해를 줄 뿐만 아니라, 하지만 아래에 다른 콘텐츠가 있을 때는 세로 스크롤이 되는 것도 문제입니다. 지금 모든 게 약간 불안정해 보이네요. 그래서 여러분을 위해 몇 가지 규칙을 정하는 것이 깔끔하고 좋을 것 같습니다. 컬렉션 콘텐츠에 포함되어 있습니다.

네, SwiftUI 이미 제가 원하는 많은 디자인 원칙들을 처리하고 있습니다. 제 설명 전반에 걸쳐 조금씩 뿌려왔습니다. 하지만 위계질서, 정렬, 근접성 같은 것들은 그것들은 모두 구성 요소의 일부입니다. 하지만 레이아웃을 만들 때 이러한 요소들을 직접 탐색해 보시는 것도 권장합니다. 그리고 그것은 시각 디자인의 중요한 부분입니다.

그래서 우리는 텍스트 색상과 이미지를 다시 사용하여 시선을 유도할 것입니다. 그리고 당신의 개성을 표현하세요. 지금까지 우리는 효과적으로 일하려고 노력하면서 꽤 제 역할을 다해왔습니다. 자, 이제 당신의 매력을 조금 더 끌어낼 수 있는지 한번 볼까요? 그래서 저는 시각 디자인에서 가장 큰 영향을 미치는 세 가지 측면에 집중하려고 합니다. 그리고 가장 초기에 영향을 미친 직물, 의미론적 색상 및 일관성.

이 모든 요소들이 합쳐져 앱을 더욱 즐겁고 이해하기 쉽게 만들어줍니다. 그리고 제가 아주 좋아하는 것이기도 해요. 앱이 성장함에 따라 재사용 패턴을 다시 활용하는 방법에 대한 지침을 제공할 것입니다.

먼저 직물부터 시작해서 스타일의 위계질서를 설명하겠습니다. 그들은 미안해. 그들은 위계질서를 만들었어. 또한 다양한 화면 크기와 환경에서 가독성을 높이도록 노력합니다. 그래서 저는 시스템 텍스타일을 사용할 건데, 그러면 바로 계층 구조를 얻을 수 있습니다. 하지만 중요한 것은 목적에 맞는 적절한 섬유를 선택하는 것입니다. 앱에서요. 저는 이걸 꾸준히 사용해요. 예를 들어, 제목 3은 '여름의 빛'과 같은 모든 섹션 제목에 사용됩니다. 이를 통해 모든 화면이 더욱 균형 잡히고 세련되게 보입니다. 구체적인 콘텐츠 섹션들이 있기 때문입니다. 그리고 내가 위계질서가 표현된 것을 알고 있는 직물을 보는 순간, 저는 그 내용이 정확히 무엇을 의미하는지 알고 있습니다.

제가 시스템 텍스타일을 선호하는 또 다른 이유는 동적 타입 기능 때문입니다. 많은 사람들이 편안함을 위해 큰 사이즈의 직물을 사용합니다. 또는 때로는 둘 다에 해당될 수도 있습니다. 그리고 동적 타입을 사용하면 이러한 텍스타일의 이름은 동일하게 지정됩니다. 하지만 크기는 일관적으로 더 큽니다. 그러니 부디 사용해 주세요.

폰트 애호가라면, 앱 전체에 걸쳐 Apple System Font SF Pro 사용했다는 것을 알 수 있을 겁니다. 하지만 저는 분명히 그러지 못했어요. 프로 스타일로 하나만 사용해도 다양한 변형을 사용할 수 있습니다. 덕분에 가독성을 해치지 않으면서 앱의 개성을 만들어낼 수 있었습니다. 저희는 좀 더 스포티한 분위기를 원했어요. 그래서 저는 제목에서 강조하기 위해 '확장됨'이라는 단어를 사용해 왔습니다. 그리고 일부 오버레이에서만 드물게 압축합니다.

여기서도 마찬가지로, UI가 의도적으로 느껴지도록 선택지를 최소화하고 싶습니다. 또한 앱을 유지 관리하고 확장하기가 더 쉽습니다. 그럼 이제 다시 섬유 이야기로 돌아가 볼까요? 아, 그렇군요. 확장 기능은 언제 사용하나요? 언제 사용해야 하나요? 그리고 이제 우리는 다양한 직물과 다양한 변형 제품을 가지고 있습니다. 그리고 폰트 종류도 엄청 많네요.

앞서 컬렉션에 대해 설명드렸듯이, 앱의 시각적인 측면에서 이미지가 큰 역할을 한다고 언급했습니다. 따라서 의미론적 색상은 UI를 보완하는 좋은 요소입니다. 둘은 매우 비슷한 역할을 하지만 훨씬 더 구체적입니다.

이는 상태 및 피드백에 관한 것입니다. 예를 들어, 저는 앱 전체에서 Color Indigo를 사용하는데, 여기에서도 마찬가지입니다. 완료된 활동 목록의 상단 메뉴바에 있는 선택된 탭에서 확인할 수 있습니다.

저는 그 색깔이나 그와 아주 비슷한 색깔은 사용하지 않으려고 노력합니다. 장식용으로 인디고 염료를 사용합니다. 그렇지 않으면 사람들이 "이게 상호작용적인 거야, 아니면 그냥 그런 거야?"라고 이해하지 못할 수도 있어요. 그것이 무슨 의미가 있나요? 저는 이 색상의 이름을 인디고로 설정했습니다. 그리고 그 전에 우리는 의미론적 색상에 대해 설명하고 있습니다. 그러니까 그건 주변에 있는 색깔이 아니에요. 그렇군요. 네, 그냥 무작위로 골랐어요.

시스템에서 제공하는 것이고 각 색상은 기본 색상입니다. 죄송합니다. 각 네이티브 구성 요소는 고유한 색상을 가지고 있습니다. 그래서 배경을 설정하지 않았어요. 구분선 색상을 설정하지 않았습니다. 이 모든 것들은 제게 이미 익숙한 것들입니다. 제가 선택한 유일한 것은 이 포인트 색상입니다.

이러한 색상은 밝은 모드와 어두운 모드에 자동으로 맞춰지기 때문에, 또한 액체 유리 및 다양한 화면 환경도 포함됩니다. 맞춤 설정에 다시 압도당하지 않는 것이 가장 좋습니다. 특히 버튼과 조작 버튼의 경우 더욱 그렇습니다.

앱에서 색상 팔레트도 보셨을 겁니다. 네온 그린 색상이 포함되어 있는데, 강조를 위해서만 사용합니다. 진행 표시기나 부제목처럼요. 다시 말해, 의미와 이러한 시각적 은유를 파악하려고 노력하는 것입니다. 그러므로 색깔은 의미론적인 것이 아닙니다. 저희 키트에는 그게 포함되어 있지 않습니다. 그래서 저는 명암 대비가 충분한지 확인합니다. 저는 정말 다양한 배경에서 테스트해봤어요. 그리고 저는 대비 증가를 위한 값도 제공했습니다.

따라서 시스템 색상이 아닌 다른 색상을 사용하기로 결정했다면, 몇 가지 간단한 규칙만 잘 지키면 됩니다. 이 경우처럼 계속 테스트하세요. 그리고 앱이 여전히 표현력이 풍부한지 확인하세요. 하지만 사용성에 영향을 미치지 않습니다. 이제 거의 끝에 다다랐네요. 즉, 모든 것이 최상의 상태로 보이도록 점검하기에 좋은 시기라는 뜻입니다. 그리고 마지막으로, 다시 돌아가서 모든 요소가 제대로 정렬되었는지 확인하겠습니다. 그리고 일정한 간격으로 배치되어 있습니다.

이렇게 하면 디자인이 훨씬 더 세련되고 시각적으로 균형 잡힌 느낌을 줍니다. 전문가처럼 보이네요. 또한 이는 사람들이 정보를 받아들이고 다음에 무엇을 해야 할지 결정하는 방식에도 도움이 됩니다. 만약 좁은 공간에 많은 부품들이 빽빽하게 들어차 있다면 어떻게 될까요? 우리는 스트레스를 받아요. 생각할 여유도, 시간도 없는 것 같아요. 그리고 UI에 숨 쉴 공간을 조금 더 주면, 바로 그때 멋진 경험들이 시작되는 겁니다. 사람들에게 감정을 추스릴 공간을 제공하는 곳.

그래서 네이티브 컴포넌트를 사용할 때도 같은 방식으로 사용하려고 주의합니다. 다른 화면에서도 동일한 방식으로 작동합니다. 저는 사람들이 같은 일을 할 수 있는 여러 가지 방법을 제공하는 것을 피합니다. 때때로 그런 일이 발생하기도 합니다. 저희는 새로운 화면을 만들 때면 항상 설레고, 처음부터 다시 시작합니다. 하지만 가장 좋은 점은 개발을 단순화할 뿐만 아니라, 사람들이 경험하게 될 것은 이러한 구성 요소들을 재활용하는 것입니다. 그들은 그것을 어디서 본 적이 있는지, 어떻게 아는지 알고 있습니다. 그들은 자신들의 행동 방식을 알고 있다. 그리고 그들은 자신들에게 무엇이 기대되는지 정확히 알고 있습니다. 예를 들어, 진척도 지표 같은 것들이죠. 여기서는 동일한 강조 색상과 동일한 모양을 사용하세요. 하지만 크기는 그것보다 조금 더 작습니다. 그것들은 제가 아는 맥락 속에 있어요. 네. 그들이 대체 무슨 짓을 한 거야? 그리고 그러한 꾸준함은 여러분의 발전에도 도움이 됩니다. 조립해야 할 부품 수가 줄어듭니다.

컬렉션을 설명하면서 이미지에 대해 간략하게 언급하겠습니다. 하지만 물론 시각 디자인의 일부이기도 합니다. 그러므로 이미지와 삽화를 선택할 때, 두 개를 나란히 놓고, 겉모습이 비슷한지 살펴보세요. 세부 묘사의 정도와 전반적인 분위기, 그런 다음 세부적인 조정을 할 수 있습니다. 그래서 그들은 자신들이 같은 브랜드의 일원이라고 느끼게 됩니다. 같은 컬렉션에 속한다고 느껴진다면요. 직감을 믿으세요. 직감이 맞을 가능성이 높습니다. 어떤 목록에서요? 예를 들어, 사람들은 자신의 사진을 업로드할 것입니다. 하지만 다시 한번, 이 점을 설명하기 위해 말씀드리자면, 이미지를 사용해서 여러분도 어떻게 사용할 수 있는지 보여드렸습니다. 코드에서는 다음과 같습니다. 당신은 해당 이미지들에 접근할 수 있게 될 것입니다. 보시다시피 저희가 거쳐온 패턴이 대략 이렇습니다. 그래서 저는 역동적인 하늘을 선택하려고 합니다. 피사체가 작거나 공간과 상호작용하는 경우가 매우 많습니다. 하지만 핵심은 사진보다 사용자 인터페이스가 더 중요하다는 것입니다. 하지만 분명히 당신이 평가해 볼 만한 사항입니다. 앱들의 일관된 디자인을 유지하기 위해서입니다. 돌이켜보면, 앱 디자인에 대한 공로는 제가 상당 부분 가져왔다고 할 수 있습니다.

약간은 그럴 수도 있지만, 디자인 결정의 상당 부분을 당신이 담당하고 있다면요. 제게는요. 그리고 그건 정말 솔직한 말이에요.

하지만 사실이에요. 저는, 저는, 함께 일하는 걸 정말 좋아해요. 이 앱을 개발하는 데 엔지니어들과 함께했습니다. 제가 디자인한 모든 것들이 이렇게 멋지게 구현된 걸 보니 정말 감격스럽네요. 코드로 번역하면 매우 유사한 의미를 가집니다. 그래서 저희는 이 소식을 여러분과 공유하게 되어 매우 기쁩니다. 그리고 당신이 그것을 가지고 놀 수 있다는 것입니다. 그리고 바라건대 여러분이 이 팁들 중 몇 가지라도 활용하실 수 있기를 바랍니다. 여러분의 프로세스를 원활하게 진행하고, 여러분이 알고 계시는 불확실성을 조금이라도 줄여줄 수 있습니다. 가끔은 창의적인 아이디어를 내고 싶을 때 그런 일이 생기기도 해요. 마치 임의의 시점처럼 혹은 단순히 처음 시작할 때 창의력을 발휘하고 결정을 내릴 수 있는 공간을 제공하는 것일 수도 있습니다. 아이디어를 구상한 다음 코딩을 시작하세요.

그러므로 업무에 복귀하시면 구조와 그 구조를 탐색하는 방법을 정의하거나 평가하십시오. 구성 요소를 신중하게 사용하십시오. 이는 여러분이 명확한 결정을 내리는 데 도움이 될 것입니다. 그러니까 코딩을 시작하는 순간, 자신이 어디로 가고 있는지 정확히 알게 되는 거죠. 당신은 당신이 만들어가는 바로 그 모습입니다. 네, 그러면 훨씬 더 의도적인 앱을 만들게 될 겁니다. 좋아요, 그럼 SwiftUI 와 파트너십을 맺으세요. 시스템이 어려운 작업을 대신하게 하고, 당신은 최선을 다해 개성을 표현하세요. 창의성과 거기에 담긴 인간미.

정말 감사합니다. 즐겁게 만드시길 바랍니다. 그리고 앱을 가지고 놀고 있어요. 디자인 측면에서는 이게 전부입니다. 와주셔서 감사합니다. 자, 이제 리아에게 다시 넘겨드리겠습니다.