본문으로 건너뛰기

2024 KWDC 톺아보기

소개

2024 KWDC 내용 정리

당신의 View가 버벅이는 이유

화면 렌더링이 멈추는 대표적인 Case인 메인 스레드가 동작하지 않는 원인들에 대해 알아보고, 이를 테스트하기 위한 방법들에 대한 내용이다.

요약

Swift에서는 View protocol의 body 생성자를 통해 화면에 표시할 구성요소들을 정의 해준다. 이러한 View는 Main thread와 Background thread를 통해 코드가 실행되는 방식을 제어 할 수 있는데 어떻게 더 부드러운 화면을 만들 수 있는지 알아보자

View가 멈추는 대표적인 이유

화면이 멈추는 이유는 대부분 메인 스레드에 Blocking이 발생하기 때문이다. 그렇다면 메인 스레드에 Blocking이 발생하는 원인은 어떤게 있을까?

  • 메인 스레드가 동작하지(반응하지) 않는 이유
    1. 스레드에 작업이 할당되어 있을 때
    2. 다른 응답을 기다리고 있을 때 ex) async hang

메인 스레드에 작업이 걸리는 경우들

  • View model의 initialize 시점에 작업 할당 시 -> initialize 시점에 작업 할당 시 메인 스레드에서 동작하도록 되어있어 의도치 않게 메인 스레드에 작업이 할당될 수 있다

SwiftUI 애니메이션의 마법

SwiftUI iOS 개발자인 pavel zak님이 SwiftUI Canvas를 사용해 여러 애니메이션들을 구현하는 방법과 예제를 공유해주었다. 발표 당시 ppt 자료 글씨가 너무 작게보여 해당 내용들을 기록해둘 수 없었는데, 개인 블로그인 Pavel Zak’s dev blog에 잘 정리되어있어 코드를 확인할 수 있었다.

블로그 링크로 발표 내용 정리를 대신하고, 추후 시간이되면 포스트를 하나씩 따라하며 정리해보려한다.

Pavel Zak’s dev blog

위젯, 위젯, 어디에나 있고 픽셀 하나도 남기지 않기

iOS, iPadOS, watchOS, macOS 등 애플 기기 전반에 걸쳐 활용되는 위젯을 구현해본 경험을 공유하는 시간이었다.

iOS 16 부터 위젯에 여러 상호작용이 가능하도록 구현되어 이를 활용한 위젯 개발이 가능해졌다. 이를 토대로 여러 디바이스 환경에서 위젯을 개발하는 방법과 위젯을 개발할 때 고려해야할 사항들을 공유하는 시간이었다.

모두를 위한 디자인

포괄적인 디자인

우리의 삶에서 문화, 신체, 나이, 위치 등 여러 요소들로 사람들의 그룹을 나눌 수 있고 이러한 요소들을 조합하여 또 다시 다양한 그룹으로 나눌 수 있다. 앱 개발시에도 이러한 요소들을 고려하여 우리의 애플리케이션을 사용하는 사용자가 어떤 그룹에 속해있을 지 고려한다면 해당 그룹 사용자들에 맞춘 서비스를 개발할 수 있을 것이다. 하지만 우리의 애플리케이션이 특정 그룹을 타겟팅한 서비스가 아니라면 이러한 다양한 요소들을 고려한 모두를 고려한 디자인이 필요하다

어떻게?

그렇다면 모두를 고려한 디자인은 어떻게 적용할 수 있을까? Apple은 이미 여러 콘텐츠에서 글쓰기, 형상화, 오디오, 비디오를 통해 이를 적용 중이며 이러한 요소들 외에도 식별자(개인을 구분하기 위한)도 고려하여 제공하고 있다.

포괄적인 디자인을 위해 고려해야할 사항들은 크게 아래의 6가지로 정의할 수 있다.

  1. 다양한 스토리
  2. 고정관념을 피하라
  3. 접근성 개선
  4. 문화에 맞춰 현지화 하기
  5. 색상을 통한 표현
  6. 자유로운 자기표현

다양한 스토리

다양한 스토리를 담기위해서는 어떠한 방법들이 있을까, 아래의 예시를 보며 확인해보자.

액티비티 동호회를 위한 소모임 어플

액티비티 동호회를 위한 소모임 애플리케이션에서 동호회의 활동성을 강조하기 위해 메인 이미지를 격류에서 카약을 타고있는 사람으로 설정할 수 있을 것이다. 또한 활동성보단 커뮤니케이션을 강조하기 위해서는 대화를 주고받는 사람들의 이미지를 사용하면 좀 더 직관적으로 동호회의 성격을 표현할 수 있다.

To Do List 어플

이번에는 하루일과를 계획하고 정의해주는 애플리케이션을 생각해보자 조금 과할 수도 있지만, 우리나라에서만 사용중이던 애플리케이션의 대표이미지에 김장하기라는 일과가 설정 되어있었다. 이를 글로벌 사용자들을 위해 제공하려 할 때 해당 내용을 단순히 번역만 하여 제공한다면, 미국의 사용자들은 김장하기라는 활동에 대해 알지못하므로 이 애플리케이션이 정확히 어떤 용도인지 한눈에 파악하기 조금 어려워질 것 이다. 따라서 예시로 작성되는 일과들을 해당 국가의 문화에 맞춰 변경하는 것만으로도 사용자들에게 많은 공감을 끌어낼 수 있다.

식도락 어플

음식 이미지에서도 해당 문화에 맞는 사진을 통해 공감을 얻어낼 수 있다. 인도의 사람들은 난이나 카레와 같은 음식 이미지가 공감하기 좋을 것이고 이탈리아의 사용자들은 피자, 리조또 같은 이미지들이 공감을 끌어내기 쉬울 것 이다.

정리

이러한 내용들과 같이 이미지 안에도 다양한 스토리를 담아낼 수 있으므로 다양성을 고려할 때는 이미지에서 담아내는 스토리에 주의하면 보다 많은 사용자들에 공감을 얻을 수 있다.

고정관념을 피하라

우리의 지나치게 단순화된 믿음은 무의식적으로 소수그룹의 사람들을 배제할 수 있다. 발표자분은 최근 글로벌로 이슈가 되고있는 성별에 대한 예시로 이를 설명했다. 최근 미국에서는 성별의 다양성을 존중해 단순히 남성, 여성으로 나누는 것이 아닌 다양한 가치관을 포용하려는 노력을 하고있다. 다양성까지 가지 않더라도 아이콘을 남성적이거나 여성적인 아이콘을 활용한다면 해당 서비스는 특정 성별을 위한 서비스로 생각되어 반대 성별의 사람들이 사용하기 꺼려질 것이다. 따라서 젠더프리한 실루엣이 적용된 아이콘을 활용한다면 특정 그룹에게 거리감을 주지 않고 포용적인 어플리케이션을 개발할 수 있다.

접근성 개선하기

대부분 사람들은 나이가 들어감에 따라 시력이 나빠질 것이고 신체에 불편한 곳이 하나씩 생길 것이다. 따라서 어떤 사람들도 불편함 없이 사용할 수 있도록 반응형 요소들을 설정한다면 모든 사람들이 불편함 없이 서비스를 사용할 수 있다.

예를들어, 사용자의 시력에 따라 디바이스의 텍스트 사이즈를 다양하게 설정할 때, Text Size 에 맞춰 UI의 다른 요소들도 같이 반응한다면 앱을 사용하기 더 편해질 것이다.

문화에 맞게 현지화

전세계 사람들의 약 50% 정도는 2개국어를 사용하고 있다. 이에 맞춰 다국어를 고려한 UI 디자인이 필요하다. 다국어를 고려한 UI디자인은 단순히 문자를 변경하는데서 끝나지 않고, 문화에 맞춰 UI의 다른 요소들도 변경을 해주어야한다. 아랍어를 예시로 생각해보자.

아랍어의 경우 오른쪽에서 왼쪽으로 읽는 문화다. 따라서 단순 텍스트 뿐만 아닌 UI 다른 요소들도 오른쪽에서 왼쪽으로 배치하여 억지로 끼워 맞춘듯한 UI가 아닌 자연스러운 UI 적용한다면 아랍인들도 불편함 없이 사용할 수 있을 것이다.

Apple style guide를 통해 애플에서는 어떻게 적용 중인지 확인해볼 수도 있다.

색상을 통한 표현

색상은 감정을 불러 일으키는 효과가 있다. 하지만 이러한 색상에 대한 이미지도 나라별로 큰 차이가 있으므로, 이를 고려한 디자인 필요하다. 아래 예시를 통해 보자.

녹색과 빨강에 대한 인식

  • 녹색 - 동양권: 친환경, 서양권: 행운
  • 빨강 - 동양권: 행운, 텍스트에 사용 시 불길한 이미지, 남미: 사랑, 서양권: 폭력

주식 예시

  • 동양권에서는 상승 - 빨강, 하락 - 파랑
  • 서양권에서는 상승 - 녹색, 하락 - 빨강
추가로

세계 인구의 5%정도는 색맹이라 한다. 따라서 색에만 의존할 경우 알아보지 못할 수 있다. 색에 의존하지 않고 모양을 통해서도 표현한다면 모든 사용자들이 불편함 없이 사용할 것 이다.

자유로운 자기표현

사람들은 어플리케이션을 통해 자기자신을 표현하고 싶어한다. 이러한 욕구를 충족시켜주어, 자유롭게 자신을 표현할 수 있도록 정체성을 존중해준다면 보다 많은 사용자들을 포용할 수 있을 것이다.

위치 기반 서비스를 하면서 알게된 사소한 지식들

어플리케이션을 개발한다면 항상 내가 만드는 시스템에 대한 도메인 기반 지식이 필요하다. 이번에는 TMAP iOS 개발자분이 지도 애플리케이션을 개발하며 습득한 지식들을 공유해주셨다. 위치 기반 서비스를 개발할 때 알아야할 기반 지식들은 어떤게 있을까?

먼저 지도 위치정보를 활용한다면 크게는 트리거, 이벤트, 경험 3가지, 작게는 언제, 어디서, 무엇을, 어떻게, 왜 5가지 사실이 중요하다.

  • 트리거

    • 언제
    • 어디서
  • 이벤트

    • 무엇을
  • 경험

    • 어떻게

트리거에는 언제, 어디서가 포함된다. 위치정보를 활용할 때 사람이 어디에 있는지

지도, 위치기반 어플리케이션을 개발하면서 자주 접하는 용어들

Geofencing

특정 영역에 가상 울타리가 쳐져있다고 생각 -> 영역에 들어가고 나가는 이벤트 트리거

Geocoding, reverse coding

Map matching

위치 정보를 실제 도로 네트워크에서 신호가 벗어나더라도 조정

polyline

점의 연속적인 집합을 연결한 선 ex)