

8년 전에 모바일 앱 개발의 여정을 시작할 때는 앞으로 다가올 다양하고 동적인 경험에 대해 잘 알지 못했습니다. 네이티브 안드로이드 개발자로서 시작해 Flutter를 마스터하는 과정을 거쳐, 이 여정은 도전적이면서 보람찬 경험이었습니다. 이 블로그 포스트에서는 배운 핵심 교훈, 모바일 앱 개발의 진화, 그리고 이 계속 발전하는 분야에 몰두하려는 분들에게 도움이 될 수 있는 통찰을 공유하겠습니다.

# 네이티브 안드로이드 개발로 시작하기

나의 경력은 당시 번창하고 있던 네이티브 안드로이드 개발로 시작했습니다. 처음 2.5년간 안드로이드의 핵심 구성 요소인 액티비티(activity), 서비스(service), 콘텐트 프로바이더(content provider), 및 브로드캐스트 리시버(broadcast receiver)를 이해하는 데 집중했습니다. 이 기초가 매우 중요했는데, 안드로이드 생태계에 대한 탄탄한 이해를 제공해주었으며 UI/UX 디자인 원칙부터 다양한 디바이스 구성 핸들링까지 포함하고 있었습니다.

## 네이티브 안드로이드 개발로부터의 주요 개념과 교훈

<div class="content-ad"></div>

- 안드로이드 라이프사이클 이해: 액티비티 라이프사이클을 숙달하는 것은 백그라운드 프로세스나 화면 회전과 같은 앱 상태를 관리하는 데 중요합니다. 이 지식은 견고하고 민첩한 애플리케이션을 만드는 데 도움이 됐어요.
- 디자인 패턴: MVC (모델-뷰-컨트롤러) 및 MVVM (모델-뷰-뷰모델)과 같은 디자인 패턴을 학습하고 적용함으로써 코드가 더 모듈화되고 유지보수가 용이해졌어요. 또한, 다른 프레임워크에서 사용되는 아키텍처를 이해하는 데 기초가 마련됐어요.
- API 사용: 안드로이드 개발의 중요한 부분은 RESTful API와 상호작용하는 것이었어요. Retrofit 및 Volley와 같은 라이브러리를 사용하여 네트워크 작업을 효율적으로 처리하는 방법을 배웠어요.
- 데이터베이스 관리: SQLite를 사용하여 데이터 저장 및 검색을 처리하고, 나중에 Room Persistence Library를 사용하는 것은 오프라인 기능이 필요한 앱을 만드는 데 중요했어요.
- UI/UX 디자인: 머터리얼 디자인 원칙을 이해하는 것이 중요했어요. RecyclerView, ConstraintLayout, 사용자 정의 뷰 등을 사용하여 직관적이고 시각적으로 매력적인 인터페이스를 만들었어요.

# 플러터로의 전환

2.5년 동안, 업계가 크로스 플랫폼 솔루션을 향한 이동을 알게 됐어요. 네이티브 성능을 단일 코드베이스로 제공할 것을 약속하는 플러터가 제 관심을 끌었어요. 그래서 5년 이상 동안 제 주요 관심사로 플러터 개발로 전환했어요.

## 플러터 개발에서의 주요 개념과 교훈

<div class="content-ad"></div>

- Dart 학습: 플러터 여정의 첫걸음은 Dart에 익숙해지는 것이었습니다. 이 언어의 단순함과 async/await 및 스트림과 같은 강력한 기능들은 반응형 프로그래밍에 용이한 훌륭한 선택이었습니다.
- 위젯 트리 마스터리: 플러터의 UI는 전적으로 위젯을 사용하여 구축됩니다. 위젯 트리와 상태를 가진 위젯과 상태가 없는 위젯의 차이를 이해하는 것은 동적이고 반응형 UI를 만드는 데 중요했습니다. 이러한 지식은 플러터의 핫 리로드 기능을 활용하여 개발 프로세스를 가속화하는 데 도움이 되었습니다.
- 상태 관리: 플러터에서 상태를 관리하는 것은 큰 응용 프로그램의 경우에 특히 어려울 수 있습니다. 몇 년 동안 Provider, Bloc, Riverpod을 비롯한 다양한 상태 관리 솔루션을 사용해왔습니다. 각각의 장점이 있으며, 적절한 선택은 응용 프로그램의 복잡성과 특정 요구 사항에 따라 다릅니다.
- 크로스 플랫폼 도전과제: 플러터의 "한 번 작성하고 어디서든 실행"의 약속은 매력적이지만, 특히 플랫폼별 기능인 카메라 통합 또는 파일 처리와 관련된 문제를 해결할 때 도전적일 수 있습니다. 이러한 간극을 플랫폼 채널을 이용하거나 필요 시 네이티브 코드를 작성하여 극복하는 법을 배웠습니다.
- 성능 최적화: 플러터가 성능으로 유명하다고 해도, 더욱 최적화할 방법은 항상 있습니다. 레이지 로딩, const 생성자 사용, 위젯 재구성 최소화와 같은 기법은 부드러운 사용자 경험을 보장하는 데 중요했습니다.
- 지속적 통합/지속적 배포 (CI/CD): 더 큰 프로젝트에 참여할수록 빌드와 배포 프로세스를 자동화하는 것이 점점 중요해졌습니다. Codemagic와 같은 도구는 플러터 앱을 위한 CI/CD 파이프라인을 설정하는 데 중요한 역할을 하였습니다.

# 주요 프로젝트 및 성과

이 8년간, 초기 스타트업을 위한 소규모 앱부터 대기업용 솔루션까지 다양한 프로젝트에 참여하며 다양한 경험을 쌓았습니다. 중요한 성과 중 일부는 다음과 같습니다:

- 위치 기반 서비스 앱 개발: 초기 프로젝트 중 하나는 실시간 위치 추적 및 지오펜싱이 필요한 Android용 위치 기반 서비스 앱이었습니다. 이 프로젝트를 통해 Android의 위치 API와 백그라운드 서비스에 대한 이해가 더 깊어졌습니다.
- 크로스 플랫폼 전자 상거래 앱 구축: 플러터로 전환하면서, Android와 iOS에서 매끄러운 경험을 제공해야 하는 크로스 플랫폼 전자 상거래 앱을 개발했습니다. 이 프로젝트는 성능 최적화와 서로 다른 화면에서 복잡한 상태를 관리하는 도전적인 경험을 주었습니다.

<div class="content-ad"></div>

# 도전과 극복 방법

모든 여정에는 도전이 있습니다. 제 여정도 예외는 아니었습니다. 제가 직면한 주요 도전 몇 가지는 다음과 같습니다:

- 빠르게 변화하는 기술에 대한 최신 정보 유지: 모바일 개발 환경은 빠르게 변화합니다. 이에 대비하기 위해 산업 블로그를 팔로우하고, 컨퍼런스에 참석하며, 지속적으로 새로운 도구와 프레임워크를 실험해 보는 습관을 들였습니다.
- 성능과 사용자 경험의 균형 유지: 어플리케이션이 성능을 유지하면서 사용자 친화적이도록 하는 것은 가장 어려운 도전 중 하나였습니다. 때로는 이미지 최적화나 위젯 수를 줄이는 것처럼 간단한 해결책이 가장 큰 영향을 미친다는 것을 배웠습니다.
- 크로스 플랫폼 제약 해결: Flutter는 놀라운데, 플랫폼별 기능을 사용해야 하는 경우에는 제약이 있을 수 있습니다. Flutter 프레임워크와 통합하기 위해 플랫폼별 코드를 작성하고 능숙하게 사용함으로써 이를 극복했습니다.

# 모바일 개발의 미래

<div class="content-ad"></div>

미래를 내다보면, 모바일 개발이 계속해서 빠르게 발전해나가고 있다는 것을 알 수 있어요. AI와 머신 러닝의 부상, 개인 정보 보호와 보안의 중요성이 더 커지고 있으며, AR/VR 분야의 지속적인 발전에 특히 흥분하고 있어요.

Flutter가 계속해서 주목을 받을 것으로 보이는데, 특히 점점 확장되는 에코시스템과 Flutter Web 및 Desktop의 도입에 대해 특히 기대하고 있어요. 단일 코드베이스를 사용하여 다중 플랫폼을 위한 애플리케이션을 개발할 수 있는 능력은 게임 체인저이며, 이번 여정이 어디로 나를 데려갈지 기대되요.

# 결론

8년 동안의 여정을 되돌아보면, 개발자로서 얼마나 많이成장했는지 깨닫게 되었어요. 네이티브 안드로이드 개발을 마스터링하고 Flutter의 크로스 플랫폼 기능을 받아들이는 등 매 단계가 배움의 경험이었어요. 모바일 앱 개발 분야는 광범위하고 끊임없이 변화하는데, 이 분야에 기여할 수 있는 기회에 감사하게 생각하고 있어요.

<div class="content-ad"></div>

당신이 막 시작한 개발자이든 경험이 풍부한 개발자이든, 제 경험이 이 흥미진진한 분야에서 일하는 모습에 대해 어떤 통찰력을 제공해줄 수 있기를 희망합니다. 기억해 주세요. 모바일 앱 개발에서 성공을 거두기 위해서는 지속적인 학습과 새로운 도전에 대한 적응이 필수라는 점입니다.

네이티브 안드로이드 대신 플러터를 사용해야하는 이유



## 안드로이드 앱을 위한 머티리얼 디자인 살펴보기: 사용성과 미적 감각을 결합한 일관된 접근 방식. 대담한 원칙과 실용적인 팁으로 앱 디자인을 높여보세요.

[공식 웹사이트 방문하기](링크)

## 안드로이드 앱을 위한 머티리얼 디자인

안드로이드 앱을 위한 머티리얼 디자인의 세계에 오신 것을 환영합니다! 세련되고 기능적인 인터페이스를 찾는 많은 사용자와 같다면, 여기에 잘 오셨습니다. 머티리얼 디자인은 패션에 그치지 않고, 사용성과 시각적 미학을 동시에 향상시키는 포괄적인 디자인 언어입니다. 이 글을 끝까지 읽으신 후에는 안드로이드 앱 개발뿐만 아니라 사용자 경험 전반에 대한 이해를 향상시킬 수 있을 것입니다.

<div class="content-ad"></div>

## 머티어리얼 디자인이란?

핵심적으로, 머티어리얼 디자인은 구글이 2014년에 개발한 디자인 언어로, 안드로이드, 웹 및 iOS를 포함한 다양한 플랫폼에서 통일된 경험을 제공하기 위해 고안되었습니다. 이는 실제 소재와 자연의 형태에서 영감을 받아 디지털 공간에서 물리적 감각을 제공합니다. 이러한 원칙을 따라 디자인하면, 네비게이션하기 쉽고 놀랍게 아름다운 인터페이스를 만들 수 있습니다.

하지만 이것이 당신에게 무엇을 의미하는 걸까요? 이는 서로 보완하는 요소를 갖춘 일관된 옷장을 만드는 것으로 생각해보세요. 머티어리얼 디자인을 사용하면, 안드로이드 앱의 각 요소를 조화롭게 얽어가며, 사용자를 참여시키고 만족시키면서도 의도적일 뿐만 아니라 옳은 느낌을 줍니다.

## 머티어리얼 디자인 원칙

<div class="content-ad"></div>

안드로이드 앱에서 Material Design의 사용에 대해 더 깊게 파고들기 전에, 이 디자인 철학을 이끄는 기본 원칙을 탐험해 봅시다. 이러한 원칙을 이해하면 현대적이면서 사용자에게 자연스러운 느낌을 주는 애플리케이션을 구축할 수 있을 것입니다.

## 1. 재료 비유

Material Design의 기초적인 측면은 재료 비유에 중점을 둔다는 점입니다. 이 테마는 물리적 세계가 작동하는 방식을 반영하면서 디지털적인 조화를 유지합니다. 안드로이드 앱을 디자인할 때, 빛, 깊이, 그리고 움직임이 상호 작용하는 방식을 상상해 보세요. 표면을 층층이 쌓고 깊이를 추가함으로써 사용자를 쉽게 다양한 기능과 기능으로 안내할 수 있습니다.

## 2. 대담하고 그래픽적이며 의도적

<div class="content-ad"></div>

Material Design은 소심하지 않아요. 대담한 색상, 평면 아이콘 및 돋보이는 그래픽 타이포그래피를 포용합니다. 이러한 요소를 안드로이드 앱에 통합하여 사용자에게 명확한 메시지를 전달합니다. 이 앱은 생동감 넘치고 명확한 개성을 갖고 있습니다. 중요한 정보나 작업을 제시할 때 의도적으로 수행하여 사용자가 과도한 것에 압도되지 않고 아름답게 활기찬 느낌을 받도록 합니다.

## 3. 움직임은 의미를 제공합니다

사용자의 주의를 효과적으로 끌기 위해 고민해 보았나요? 움직임이 당신의 동반자입니다. Material Design은 사용자 경험을 이끄는 움직임을 장려합니다. 탭 시 서서히 발생하는 버튼 파급물이나 화면 간 전환 시 발생하는 전환과 같은 움직임을 사용하세요. 감동적인 반응을 일으켜 사용자가 수행하는 작업에 연결되는 느낌을 갖도록 애니메이션 전환을 사용하세요.

## 안드로이드 앱에 Material Design 적용하는 방법

<div class="content-ad"></div>

안드로이드 애플리케이션에서 Material Design을 도입하는 것은 미적 선택을 넘어서 코드에 신중한 사용자 경험을 통합하는 것입니다. 우리는 당신의 안드로이드 앱이 매력적으로 느껴지도록 하는 몇 가지 실용적인 접근 방법을 탐색해보려 합니다.

## 색상 선택에 주의하기

색상은 즐거운 사용자 경험을 만들어내는 데 중요한 역할을 합니다. Material Design은 다채롭지만 일관성 있는 접근을 장려하는 정의된 색상 팔레트를 가지고 있습니다. 주요 및 보조 색상을 활용하고 적절한 대비를 고려하면 앱의 시각적 매력이 크게 향상될 수 있습니다. 색상 구성표를 선택할 때 전달하고자 하는 감정적 톤을 고려해보세요.

## 타이포그래피가 중요합니다

<div class="content-ad"></div>

당신의 옷장에는 강렬한 메시지를 전달하는 패션 아이템들이 있듯이, 디지털 디자인에서도 글꼴이 매우 중요한 역할을 합니다. Material Design은 특정 기준선 그리드와 글꼴 스케일을 사용하여 가독성과 계층 구조를 보장합니다. 앱에서 텍스트를 작성할 때, 색상 선택과 상호작용에 주의하여 인터페이스 내에서 조화를 유지하세요.

## 향상된 사용성을 위한 컴포넌트 활용

Material Design의 매력 중 하나는 다양한 컴포넌트 라이브러리를 제공한다는 점입니다. 귀하의 Android 애플리케이션에 통합할 고려해야 할 몇 가지 주요 컴포넌트를 소개합니다:

## 버튼

<div class="content-ad"></div>

버튼은 모든 앱에서 중요한 호출 행동 요소입니다. Material Design은 상호 작용 시 물결 효과로 촉각적 피드백을 제공하는 버튼을 촉진합니다. 각각의 중요성에 따라 평평한, 돋보인 또는 부동 액션 버튼 중 하나를 선택하고 싶을 것입니다.

## 카드

카드를 콘텐츠의 컨테이너로 생각해보세요 - 기사, 이미지 또는 시스템에서 생성된 데이터를 볼 수 있는 완벽한 방법입니다. 정보를 표시하는 깔끔한 방법을 제공하고, 쉬운 탐색을 위해 상호 작용이 가능합니다.

## 상호 작용 패턴

<div class="content-ad"></div>

자신만의 강력한 안드로이드 애플리케이션을 만들기 위해선 다양한 상호작용 패턴을 만나게 될 거에요. Material Design은 내비게이션을 부드럽고 간단하게 만들어주는 직관적인 제스처에 초점을 맞추고 있어요.

## 내비게이션 드로어

내비게이션 드로어는 앱 내비게이션을 효과적으로 표시하는 공간 절약형 방법이에요. 사용자가 화면 가장자리에서 스와이프하거나 아이콘을 탭하여 숨겨진 옵션 메뉴를 드러낼 수 있게 해 주어, 주요 인터페이스를 깔끔하고 사용자 친화적으로 유지할 수 있어요.

## 스낵바

<div class="content-ad"></div>

가끔 사용자에게 알림을 전달하되, 그들을 압도하지 않고 싶을 때가 있습니다. 스낵바는 화면 하단에 간단한 메시지를 표시하여 결과를 간단히 전달하거나 쉬운 작업을 제안하는 데 최적입니다.

## 재료 테마

Android 앱에서 일관성과 독창성을 보장하기 위해 재료 테마를 사용하면 브랜드에 맞게 구성 요소를 사용자 정의할 수 있습니다. 모양, 색상 또는 타이포그래피를 수정하고 싶다면, 브랜드 아이덴티티와 일치하면서도 재료 디자인 원칙을 준수하는 고유한 스타일을 만들 수 있습니다.

## 성능 고려사항

<div class="content-ad"></div>

안녕하세요! 안드로이드 앱을 Material Design의 화려한 옷으로 장식하는 동안 성능에 우선 순위를 둘 것을 권해드립니다. 무겁고 복잡한 디자인은 응용 프로그램의 성능을 늦출 수 있어 사용자 경험을 방해할 수 있습니다. 원활한 상호작용을 유지하기 위해 코드와 에셋을 최적화하는 데 집중해야 합니다.

## 지연 로딩

게으른 로딩(Lazy Loading)을 도입하면 필요한 경우에만 이미지나 요소를 로딩하여 성능을 향상시킬 수 있습니다. 이 기술은 초기로드 시간을 크게 줄여 사용자 경험이 원활하게 시작되도록 돕습니다.

## 사용성 테스트

사용성 테스트는 사용자 경험을 평가하고 개선하기 위해 중요합니다.

<div class="content-ad"></div>

디자인을 완성하는 과정에서 사용성 테스트의 중요성을 항상 잊지 마세요. 아름답게 디자인된 애플리케이션을 만들 수 있지만 사용자가 탐색에 어려움을 겪는다면 제대로 된 점수를 얻지 못할 것입니다. 디자인 프로세스의 각 단계에서 사용자 테스트를 진행하여 소중한 피드백을 수집해보세요.

## Rambox로 작업환경 개선하기

이제 안드로이드 앱용 Material Design에 대해 약간 익숙해진 지금, Rambox라는 놀라운 도구를 활용하여 작업환경을 개선하고 생산성을 향상시키는 방법에 대해 이야기해보겠습니다.

장치들 간에 앱 설정을 동기화하여 일관된 설정을 제공받을 수 있다면 어떨까요? 바로 Rambox가 제공하는 서비스입니다. Rambox를 통해 모든 애플리케이션의 설정을 중앙화된 대시보드에서 직접 관리하고 알림을 음소거할 수 있어 작업 환경을 향상시켜 주는 도구입니다. 여러분의 주의를 산만하게 하지 않도록 돕습니다.

<div class="content-ad"></div>

## 사용자 정의 옵션

Rambox를 사용하면 놀라운 유연성이 가능합니다. 만약 디자인적 세부 사항에 관심이 있다면, CSS 스타일링 및 JS 코드를 적용하여 각 앱의 디자인과 성능을 향상시킬 수 있습니다. 그것은 디지털 작업 공간을 당신의 성격과 생산성 기술을 반영하도록 맞추는 것과 유사합니다.

## 업무 시간 동안 집중 유지

일 중에 집중을 유지하는 것은 매우 중요합니다. Rambox를 통해 이러한 시간을 구성하고 알림을 무음으로 설정하여 산만함을 피할 수 있습니다. 알림의 끊임없는 경보음 없이 회의나 코딩 세션에 몰두할 수 있습니다. 당신의 내적 닌자에 도전하여 작업에 몰두하면서 애플리케이션 간에 원활하게 전환할 수 있으며 누구도 방해하지 않을 것이라는 안심感를 느낄 수 있습니다.

<div class="content-ad"></div>

## 자주 묻는 질문

Material Design이나 Rambox에 대해 아직 궁금한 점이 있을 수 있습니다. 여기 명확성을 도울 수 있는 일반적인 문의 사항 몇 가지가 있습니다:

## 안드로이드 외부에서 Material Design을 사용할 수 있나요?

당연히 가능합니다! Material Design은 안드로이드를 벗어나 웹 및 iOS 애플리케이션에도 적용할 수 있습니다. 이러한 다양성은 플랫폼 간 일관된 경험을 유지할 수 있도록 한 가장 큰 강점 중 하나입니다.

<div class="content-ad"></div>

## 램박스는 무료로 사용할 수 있나요?

램박스는 기본 기능을 제공하는 무료 티어를 제공하지만, 고급 성능 및 생산성 향상을 위해 평생 액세스 플랜을 선택하는 것은 가치 있는 투자입니다.

## 램박스에서 사용자 정의 레이아웃을 만들 수 있나요?

네, 램박스를 통해 애플리케이션을 전체 화면 또는 타일 모드로 구성하여 작업 공간을 조정할 수 있습니다. 원하는 대로 작업 공간을 정의하여 스타일에 맞도록 설정할 수 있습니다.

<div class="content-ad"></div>

## 결론

Material Design은 단순히 시각적으로 매력적인 UI를 만드는 것에 그치지 않습니다; 사용자가 안드로이드 애플리케이션과 상호 작용하는 방식을 변화시킬 수 있는 방법론입니다. 이 원칙과 구성 요소를 활용하여 사용자와 공감대를 형성하고, 사용자들이 애플리케이션과 더 깊이 관여하도록 유도할 수 있습니다.

Material Design을 구현하는 여정을 시작하거나 계속 진행하는 동안, 이를 독특하게 만드는 아름다운 터치와 움직임 중심 요소를 유지하기를 기억해 주세요. Rambox와 같은 도구를 활용하여 워크플로우를 최적화하고 애플리케이션을 구현하는 과정에서 산만한 것을 방지하세요!

만약 이 글이 도움이 되었다면 크게 박수를 치거나 의겢을 남겨 주시고, 미래 업데이트에 대한 내 미디엄 뉴스레터를 구독하세요. 즐거운 디자인하세요!

<div class="content-ad"></div>

알림: 본 이야기는 콘텐츠 작성을 위해 AI 도움을 이용하였습니다.

안드로이드 앱을 위한 Material Design의 장점과 활용법 정리



## 최신 기사에서 최고의 모바일 앱 디자인 도구를 탐색하세요. 창의성을 향상시키고 영향력 있는 앱 디자인을 위한 작업 흐름을 간소화하세요.

[공식 웹 사이트 방문하기](링크)

# 최고의 모바일 앱 디자인 도구

뛰어난 모바일 앱을 만드는 것은 최종 결과물뿐만 아니라 사용하는 도구에 있습니다. 초보 디자이너든 시니어 전문가든, 적절한 도구는 작업 흐름을 크게 향상시키고 생산성을 높이며 창의성을 촉진할 수 있습니다. 여기에서 여러분의 아이디어를 현실로 만들어 줄 최고의 모바일 앱 디자인 도구들을 살펴보겠습니다. 각 도구는 독특한 기능과 혜택을 제공하므로, 디자인 프로세스에 꼭 필요한 이 도구들이 무엇인지 알아보겠습니다.

<div class="content-ad"></div>

## 디자인 도구의 힘

디자인 도구는 자원 이상의 것입니다. 그것들은 여러분의 비전을 현실적인 제품으로 만들게 도와주는 중요한 구성 요소입니다. 이 도구들은 창의적인 과정을 간소화하여 여러분의 생각과 아이디어를 시각적으로 표현하기 쉽게 만들어줍니다. 점점 더 이동성이 높아지는 세상에서 강력한 디자인 도구에 손쉽게 접근할 수 있다는 것은 그냥 도움이 된다는 것뿐만이 아니라 필요한 요소입니다. 사용자 인터페이스 디자인부터 프로토타이핑까지, 이러한 도구들은 사용자들과 깊게 공감하며 전문적이고 정교한 앱을 만들 수 있도록 도와줍니다.

## 적절한 도구를 선택하는 이유

디자인 도구를 선택하는 것은 사소해보일 수 있지만, 여러분의 작업 흐름에서 엄청난 차이를 만들 수 있습니다. 적절한 도구는 여러분의 스타일을 보완하고 노력을 집약시켜 진정으로 중요한 부분인 여러분의 디자인에 집중할 수 있도록 도와줍니다. 잘 선택된 앱은 생산성을 향상시키며 여러분이 넘치지 않게 새로운 창조적 길을 모색할 수 있도록 격려합니다.

<div class="content-ad"></div>

## 디자인스카우트

디자이너들 사이에서 인기를 끌고 있는 도구 중 하나는 디자인스카우트입니다. 이 도구는 직관적인 사용자 인터페이스를 만들기 위한 원활한 경험을 제공하는 데 초점을 맞추고 있습니다. 사용하기 편리한 인터페이스를 통해 앱의 디자인을 신속하게 제작하고 동시에 영감을 얻을 수 있는 강력한 자원을 제공합니다.

디자인스카우트는 프로젝트를 시작하는 데 도움이 되는 다양한 스타일과 산업을 대상으로 하는 템플릿 라이브러리를 제공합니다. 레이아웃과 요소를 사용자화하여 기존 디자인을 브랜드에 맞게 조정하고 창의적인 개성을 명확히 드러낼 수 있습니다. 이 유연성은 처음부터 다시 시작할 필요 없이 실험할 수 있는 환경을 제공합니다.

## 효과적인 피드백 통합

<div class="content-ad"></div>

DesignScout의 특별한 점은 강력한 피드백 통합 기능입니다. 이 도구를 사용하면 이해관계자들과 디자인을 공유하고 실시간으로 실행 가능한 피드백을 수집할 수 있습니다. 당신의 팀과 연결되어 있는 것이 얼마나 중요한지 알고 있으니까요. 이 도구는 협업적인 느낌을 주며 디자인 수정이 신속히 이루어지므로, 문제 없이 원활한 진행을 유지할 수 있습니다.

## Adobe XD

Adobe는 창의적인 전문가들을 위한 산업 표준으로 오랫동안 인정받아 왔으며, Adobe XD를 통해 이 모습을 계속 유지하며 모바일 앱 디자인에서도 그 전통을 이어가고 있습니다. 이미 Adobe의 디자인 도구 모음에 익숙할 수도 있지만, XD는 모바일 디자인에 중점을 둔 포괄적이고 사용자 친화적인 특징을 제공합니다.

이 도구는 와이어프레임 작업과 프로토타이핑 과정을 간편화하는 다양한 기능을 제공합니다. 현실적인 방식으로 사용자 경험을 시뮬레이션할 수 있는 인터랙티브 프로토타입을 생성할 수 있습니다. 이는 앱을 출시하기 전에 사용자가 어떻게 상호작용할지를 미리 확인할 수 있어 시간과 자원을 절약할 수 있습니다. 게다가 Photoshop 및 Illustrator와 같은 다른 Adobe 도구와의 강력한 통합을 통해 쉽게 그래픽 및 자산을 통합할 수 있습니다.

<div class="content-ad"></div>

## 팀원과 협업하세요

어도비 XD의 또 다른 중요한 장점은 협업 능력입니다. 디자인 팀이 동시에 프로젝트에 참여할 수 있는 기능을 통해 디자인 시간을 크게 단축할 수 있습니다. 의사소통 오류나 소실된 반복 작업으로 인해 고생해본 적이 있다면, 이 도구가 제공하는 원할한 전달이나 공유 기능을 감사히 여기게 될 것입니다. 실시간으로 변경 사항을 적용할 수 있을 때 더욱 일관된 제품을 만들 수 있을 것입니다.

## Figma

Figma는 협업 디자인과 동의어가 되었습니다. 여러분이 다른 사람들과 함께 일하는 것을 좋아한다면, 이 브라우저 기반 도구는 팀을 함께 모아줍니다. 웹 기반 환경 덕분에 어디에서든 프로젝트에 접속할 수 있어 매우 편리합니다.

<div class="content-ad"></div>

Figma의 강점은 디자인 팀워크를 가능하게 한다는 데 있습니다. 동료가 단 몇 번의 클릭으로 변경사항을 가할 때, 모바일 앱 인터페이스를 디자인하는 상황을 상상해 보세요. 실시간 협업은 창의적인 과정을 높여주어 분리된 느낌을 덜어줍니다. 더불어, 버전 히스토리와 같은 기능은 디자인의 이터레이션을 추적하는 것을 잊지 않게 도와줍니다 — 진정한 생명 구조자죠.

## 플러그인의 힘

Figma의 다양한 플러그인 모음은 그 유틸리티를 한층 업그레이드합니다. 서드파티 플러그인을 통해 워크플로우를 개선하고, 새로운 기능을 추가하며, 예상치 못한 디자인 프로세스의 측면을 간소화할 수도 있습니다. 이 유연성은 당신이 특정한 필요에 맞춰 도구를 구성할 수 있도록 도와주어, 마주한 어떤 빈 틈도 메울 수 있습니다.

## 인비전(InVision)

<div class="content-ad"></div>

사용자 테스트 및 프로토타이핑에서 뛰어난 성과를 내는 모바일 앱 디자인 툴을 찾고 있다면 InVision이 탐험할 가치가 있는 옵션입니다. 퀄리티를 희생하지 않고 빠른 프로토타이핑 능력을 요구하는 디자이너들 사이에서 인기가 높습니다. InVision은 쉽게 앱을 탐험할 수 있도록 하는 클릭 가능한 프로토타입을 만들 수 있습니다.

고객이나 이해관계자에게 앱을 소개하고 그들 눈앞에서 살아 움직이는 것을 보는 상상을 해보세요. 이 도구는 상호 작용적인 형식으로 여러분의 비전을 강조하는 동적 경험을 제공합니다. InVision은 이미 사용 중인 다른 툴과도 다양한 통합 옵션을 제공하므로 디자인 툴킷에 가치 있는 추가물로 놓치지 않아야 할 툴입니다.

## 피드백 수집

디자인과 사용자 경험을 향상시키기 위해서 피드백이 중요합니다. InVision은 리뷰어가 프로토타입 위에 직접 주석을 남길 수 있는 툴을 통해 쉽게 피드백을 수집할 수 있습니다. 이를 통해 복잡한 메시지 교환 없이도 특정 제안을 받을 수 있습니다. 이러한 피드백 과정을 간소화하는 능력 때문에 InVision은 효율적인 디자인을 위해 반드시 필수적인 도구입니다.

<div class="content-ad"></div>

## 스케치

모바일 앱 디자인 분야의 중요 인물로, 많은 디자이너들에게 익숙한 강력한 도구 모음을 제공하는 스케치. 그 간결함과 기능성으로 유명하며, 벡터 기반 디자인에 이상적으로, 모바일 앱에 매우 강력한 옵션이 될 것입니다.

스케치를 통해 빠른 디자인을 할 수 있는 직관적인 인터페이스를 찾을 수 있습니다. 아트보드 기능은 다양한 화면 크기와 방향을 쇼케이스하고 싶을 때 특히 유용합니다. 게다가 강력한 플러그인 생태계를 보유하고 있어 기능을 보강할 수 있어, 효율적으로 디자인할 수 있게 해줍니다.

## 일관된 디자인 수립

<div class="content-ad"></div>

모바일 앱 디자인에서의 한 가지 과제는 다양한 화면과 기능 사이에서 일관성을 유지하는 것입니다. Sketch의 심볼과 공유 스타일을 통해 앱 전반에 유지할 수 있는 통일된 디자인 언어를 만들 수 있습니다. 재사용 가능한 구성 요소를 만들어 업데이트를 쉽게 할 수 있습니다. 변경이 필요할 때 일회 수정으로 모든 인스턴스에 전파됩니다.

## Marvel

Marvel은 디자인, 프로토타이핑 및 사용자 테스트의 편의를 강조하는 사용성에 중점을 둡니다. 기술적 세부사항에 빠지지 않고 큰 그림에 집중할 수 있도록 도와주는 쉬운 사용자 도구를 찾는다면 Marvel이 최적인 선택일 수 있습니다.

마블의 간편한 인터페이스로 여러분은 거의 학습 곡선이 없이 프로토타입을 만들 수 있습니다. 모바일 앱 디자인에 상대적으로 새로운 개인들에게 탁월한 선택지입니다. 협업 기능을 통해 팀원과 이해관계자를 직관적으로 피드백을 제공할 수 있도록 초대할 수 있습니다.

<div class="content-ad"></div>

## 테스트하기 쉬워진다

마블은 사용자 테스트 분야에서도 빛을 발합니다. 몇 번의 클릭만으로 상호 작용하는 프로토 타입을 만들고 테스트를 위해 공유할 수 있습니다. 실제 사용자로부터 통찰력을 얻는 것은 이제 그 어느 때보다 쉽습니다. 사용자 피드백을 직접 수집할 수 있는 능력은 디자인을 조정하여 대상 청중에 공감을 얻도록 도와줍니다.

## Rambox

이제 여러분의 전체 작업 공간에 대해 잠시 생각해봅시다. 여러 앱과 디자인 도구를 열 때 압도될 수 있습니다. Rambox를 소개합니다. 앱 알림과 작업 공간 구성을 관리하는 생산성 도구입니다. 전통적인 의미의 디자인 도구는 아니지만 작업 공간을 향상하는 데 중요한 역할을 합니다.

<div class="content-ad"></div>

임포턴트한 디자인 세션 동안 모든 앱의 알림을 무음 상태로 변경할 수 있다면 얼마나 좋을까요? Rambox를 사용하면 소리를 차단하고 산만한 요소를 제거하여 회의나 심도있는 디자인 작업 중에 집중력을 유지할 수 있습니다. 이 기능은 작업 공간을 정리하는 데 그치지 않고 창의적인 에너지를 유지하는 데도 도움이 됩니다.

## 환경을 맞춤 설정하세요

Rambox를 통해 디자인 도구와 애플리케이션을 자신의 스타일과 작업 흐름에 맞게 구성할 수 있습니다. 워크스페이스를 구성하고 전체 화면이나 타일 모드에서 어떤 앱이 표시되는지 결정할 수 있는 자유를 누릴 수 있습니다. 다양한 레이아웃을 전환하면 작업 흐름 중 소중한 시간을 절약하며 효율적으로 애플리케이션에 액세스할 수 있습니다.

문법 검사기 또는 비밀번호 관리자와 같은 타사 애드온을 통합할 수 있는 기능은 작업을 더욱 향상시킬 수 있습니다. 디자인 작업에 몰두하고 있어도 필수 도구를 한 번의 클릭으로 사용할 수 있다는 것은 귀중합니다.

<div class="content-ad"></div>

## 캔바

캔바는 오직 모바일 앱 디자인 도구만은 아니지만, 다양한 템플릿과 디자인 자원을 제공하여 모바일 프로젝트를 보완할 수 있습니다. 특히, 모바일 앱에 대한 빠른 모형 또는 홍보 자료가 필요한 경우 캔바가 빛을 발합니다.

사용하기 쉬운 인터페이스는 복잡한 소프트웨어에 대한 교육이 필요하지 않고도 아름다운 디자인을 제공합니다. 템플릿을 선택하고 앱 브랜딩에 맞게 사용자 정의할 수 있습니다. 이는 홍보 캠페인을 위한 효율적인 디자인 솔루션을 찾는 앱 마케터나 개발자에게 특히 유용합니다.

## 디자인의 다재다능함

<div class="content-ad"></div>

Canva의 다양성은 기본 그래픽을 넘어서며, 동일한 플랫폼을 사용하여 소셜 미디어 게시물, 프리젠테이션, 심지어 마케팅 소개를 제작할 수 있습니다. Canva를 모바일 앱 디자인 도구 상자에 통합하면 브랜딩 노력을 간소화하여 앱과 관련된 시각 요소가 다양한 형식에서 일관되게 유지됩니다.

## Gravit Designer

일부 더 잘 알려진 소프트웨어와 경쟁할 수 있는 강력한 벡터 디자인 도구를 찾고 있다면, Gravit Designer가 매우 강력한 선택지입니다. 모바일 앱 디자인에 맞춘 기능을 갖추고 있어서, 벡터 그래픽을 쉽게 생성하고 편집할 수 있습니다.

이 소프트웨어는 다양한 플랫폼에서 사용할 수 있어서 기능을 상실하지 않고 다양한 장치에서 사용할 수 있습니다. 데스크톱이나 태블릿에서 작업하더라도 Gravit Designer는 매끄러운 경험을 보장합니다. 또한 빠르고 효율적으로 시작할 수 있도록 템플릿과 디자인 요소로 가득 차 있습니다.

<div class="content-ad"></div>

## 접근성에 초점을 맞춘

Gravit Designer는 모든 배경의 디자이너가 강력한 기능을 활용할 수 있도록 접근성에 큰 중점을 두고 있습니다. 초보자를 위해 리소스와 자습서를 제공하여 도구의 기능을 쉽게 활용할 수 있도록 도와줍니다. 디자인 분야를 막 시작하신 분에게는 훌륭한 선택일 수 있습니다.

## 모바일 앱 디자인의 미래

모바일 기술이 계속 발전함에 따라 앱 디자인을 지원하는 도구들도 발전하고 있습니다. 트렌드와 새로운 도구에 대해 최신 정보를 유지하는 것이 중요합니다. 항상 변화하는 환경에서 혜택을 줄 수 있는 혁신적인 기능과 협업 기회를 제공하는 새로운 솔루션을 탐색해보시기를 권해드립니다.

<div class="content-ad"></div>

## 적응하고 혁신하세요

휴대폰 앱 디자인에서 우위를 유지하려면 적응력이 중요합니다. 이미 사용 중인 도구를 활용하면서도 새로운 옵션을 탐색하는 태도를 취하면 놀라운 결과를 이끌어낼 수 있습니다. 디자인 세계는 넓고 다이나믹합니다. 활용할 수 있는 자원이 많을수록 창의성이 향상됩니다. 

## 결론

휴대폰 앱 디자인 여정 중에는 다양한 도전과 성공을 경험하게 될 것입니다. 적절한 도구를 활용하면 탁월한 경험을 창출하는 데 필요한 지침과 지원을 받을 수 있습니다. DesignScout, Adobe XD, Figma, InVision, Sketch, Marvel, Rambox, 그리고 Canva와 같은 도구를 활용하여 생산성을 향상시키고 디자인 작업을 효율적으로 수행할 수 있습니다.

<div class="content-ad"></div>

각 도구마다 고유한 강점이 있어 전체적인 성공에 기여할 수 있습니다. 그러니 한 번 시도해보고 자신의 스타일과 가장 잘 맞는 것이 무엇인지 확인해보세요. 창의성을 발휘하고 이 도구들이 여러분을 다음 멋진 디자인 프로젝트로 이끌도록 허용하세요!

만약 이 글을 즐겁게 읽었다면, 클랩(clap) 버튼을 눌러주시면 정말 감사하겠습니다. 의견을 남기시는 것을 망설이지 마시고 제 생각을 알려주시고, 유사한 글의 업데이트를 위해 내 Medium 뉴스레터를 구독해주시기 바랍니다. 즐거운 디자인하세요!

고지: 본 글은 콘텐츠 작성을 위해 AI 보조 기술이 적용되었습니다.

2024 최신 모바일 앱 디자인을 위한 최고의 도구 모음 정리 



플러터 개발자 여러분, 복잡한 상태 관리와 씨름하는 데 지치셨나요? 더 직관적이고 강력한 해결책을 갈망하고 계신가요? 그렇다면 더 이상 기다릴 필요 없어요 — Riverpod이 나타나면서 플러터 애플리케이션에서 상태를 다루는 방법을 혁신할 준비가 되었습니다.

Riverpod은 플러터 커뮤니티를 열광케 하는 차세대 상태 관리 라이브러리입니다. 경험 많은 개발자이든 막 시작하시는 플러터 여행자이든, 이 게시물은 앱 개발 기술을 높이는 데 필요한 지식과 기술을 제공할 거예요.

이 글을 끝까지 읽으시면 다음 내용을 이해하게 될 거에요:
- 플러터에서 상태 관리가 중요한 이유
- Riverpod이 이전 솔루션의 한계를 어떻게 해결하는지
- 프로젝트에서 Riverpod 구현하기까지의 단계
- 상태 관리 최적화를 위한 고급 기술들
- 실제 예제와 최고의 실천 방법

이제 여러분의 플러터 앱의 잠재력을 펼치기 ready하신가요? 함께 시작해봐요!

<div class="content-ad"></div>

플러터에서 상태 관리의 진화

플러터 개발의 초기 시절을 기억하시나요? 상태 관리는 종종 SetState와 같은 솔루션이 단순한 앱을 넘어선다는 느낌으로 머리아플 때가 많았습니다. 그런 다음 Provider가 등장했고, 상태 관리의 성지로 여겨졌던 적도 있었습니다. 그러나 앱이 점점 복잡해지자 Provider조차도 한계를 보이기 시작했습니다.

그리고 나타난 Riverpod — Provider의 창시자 레미 루셀레가 탄생시킨 작품입니다. Riverpod는 Provider의 우수한 기능을 그대로 살리면서도 고급 개념을 도입하여 완전한 상태 관리를 위한 강력한 해결책을 제공합니다.

하지만 왜 Riverpod가 중요한지 궁금할 수도 있습니다. 이를 자세히 알아보겠습니다:

<div class="content-ad"></div>

- 타입 안정성: 상태 관리와 관련된 런타임 오류와 작별해 보세요.
- 테스트 용이성: Riverpod를 사용하면 상태 로직의 단위 테스트가 간단해집니다.
- 확장성: 작은 프로젝트에서 엔터프라이즈급 앱까지, Riverpod는 함께 성장합니다.
- 유연성: 서로 다른 상태 관리 접근 방식을 원활하게 결합할 수 있습니다.

궁금하신가요? 그럼 좋아해야 할 것입니다. 하지만 제 말만 믿지 말고 — Riverpod가 어떤지 직접 보시죠. 시작하기 전에 아래 내용을 확인해주시기 바랍니다.

Riverpod로 시작하기

우선, 프로젝트에 Riverpod를 추가해 봅시다. `pubspec.yaml` 파일을 열고 다음 종속성(dependencies)을 추가해주세요.

<div class="content-ad"></div>

```js
의존성:
  flutter:
    sdk: flutter
  flutter_riverpod: ^2.3.6
  riverpod_annotation: ^2.1.1
개발 의존성:
  build_runner: ^2.4.6
  riverpod_generator: ^2.2.3
```

`flutter pub get`을 실행하여 패키지를 가져오세요.

이제 Riverpod을 사용하여 간단한 카운터 앱을 만들어보겠습니다. 아래는 설정 방법입니다:

```js
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

// 프로바이더 정의
final counterProvider = StateProvider((ref) => 0);

void main() {
  runApp(
    // 앱을 ProviderScope로 감싸세요
    ProviderScope(
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(counterProvider);

    return Scaffold(
      appBar: AppBar(title: Text('Riverpod 카운터')),
      body: Center(
        child: Text('카운트: $count'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => ref.read(counterProvider.notifier).state++,
        child: Icon(Icons.add),
      ),
    );
  }
}
```

<div class="content-ad"></div>

리버포드 카운터 예시 이해하기

리버포드가 어떻게 작동하는지 이해하기 위해 우리의 카운터 앱을 해부해봅시다:

1. Provider 정의:

```js
final counterProvider = StateProvider((ref) => 0);
```

<div class="content-ad"></div>

이 줄은 시간이 지남에 따라 변경될 수 있는 간단한 상태에 적합한 `StateProvider`를 생성합니다. 이는 초기값 0으로 시작합니다.

2. ProviderScope:

```js
ProviderScope(
  child: MyApp(),
)
```

`ProviderScope`는 중요합니다. 이는 앱 전체에 Riverpod를 초기화하여 위젯 트리에서 그 아래에 있는 모든 위젯이 providers에 액세스할 수 있도록 합니다.

<div class="content-ad"></div>

3. ConsumerWidget:

```js
class HomePage extends ConsumerWidget {
  // ...
}
```

`ConsumerWidget`은 Riverpod의 `StatelessWidget` 버전입니다. `WidgetRef` 매개변수에 액세스할 수 있게 해주는데, 이를 통해 providers와 상호 작용할 수 있습니다.

4. 프로바이더 감시하기:

<div class="content-ad"></div>

```js
final count = ref.watch(counterProvider);
```

`ref.watch()` 함수는 `counterProvider`를 감시합니다. 카운터 값이 변경될 때마다 이 위젯이 다시 빌드됩니다.

5. 상태 수정:

```js
ref.read(counterProvider.notifier).state++
```

<div class="content-ad"></div>

`ref.read()`은 리스너를 설정하지 않고 공급자에 액세스합니다. 우리는 `.notifier`를 사용하여 `StateController`를 가져와 그 상태를 수정합니다.

주요 포인트

- Providers는 위젯 외부에서 정의되어 쉽게 액세스하고 테스트할 수 있습니다.
- `ProviderScope`는 앱을 위해 Riverpod 생태계를 설정합니다.
- `ConsumerWidget`(또는 더 세분화된 제어를 위해 `Consumer`)는 위젯이 공급자와 상호 작용할 수 있게 합니다.
- `ref.watch()`는 상태 변경을 읽고 듣는 데 사용됩니다.
- `ref.read()`는 일회성으로 상태를 읽거나 수정하는 데 사용됩니다.

고급 Riverpod 개념

<div class="content-ad"></div>

기본 사항을 다룬 이제 Riverpod의 좀 더 고급 기능을 살펴봅시다:

- Family Providers

Family providers를 사용하면 매개변수를 받는 프로바이더를 만들 수 있습니다. 이는 동적 데이터 가져오기에 매우 유용합니다.

```js
final userProvider = FutureProvider.family<User, String>((ref, userId) async {
  return await fetchUser(userId);
});

// 사용법
final user = ref.watch(userProvider('user_123'));
```

<div class="content-ad"></div>

2. 공급자 종속성

Riverpod를 사용하면 다른 공급자에 의존하는 공급자를 쉽게 만들 수 있습니다.

```js
final nameProvider = Provider((ref) => 'John Doe');
final greetingProvider = Provider((ref) {
  final name = ref.watch(nameProvider);
  return 'Hello, $name!';
});
```

3. 자동 해제 항목

<div class="content-ad"></div>

리버포드는 더 이상 필요하지 않을 때 제공자를 자동으로 해제하여 메모리 누수를 방지합니다. 그러나 이 동작을 사용자 정의할 수 있습니다.

```js
final myProvider = StateProvider.autoDispose((ref) {
  ref.onDispose(() {
    print('Provider is being disposed');
  });
  return 0;
});
```

4. 리버포드 생성기

대규모 프로젝트의 경우 리버포드는 보일러플레이트를 줄이기 위해 코드 생성을 제공합니다.

<div class="content-ad"></div>

```js
@riverpod
class Counter extends _$Counter {
  @override
  int build() => 0;

  void increment() => state++;
}
```

이 코드는 `ref.watch(counterProvider)` 처럼 사용할 수 있는 프로바이더를 생성합니다.

Best Practices and Tips

- 프로바이더를 작고 집중된 상태로 유지하세요. 하나의 크고 복잡한 프로바이더보다 여러 작은 프로바이더를 가지는 것이 좋습니다.
- 미세한 재구성을 위해 `select`를 사용하세요.

<div class="content-ad"></div>

```js
 final name = ref.watch(userProvider.select((user) => user.name));
```

3. `ref.listen`를 활용하여 부수 효과 처리하기:

```js
   ref.listen(counterProvider, (previous, next) {
     if (next == 10) {
       showDialog(context, 'You reached 10!');
     }
   });
```

4. 더 나은 코드 구조를 위해 프로바이더를 별도의 파일로 구성하세요.

<div class="content-ad"></div>

5. 복잡한 상태 객체를 변경해야 하는 경우에는 `StateNotifierProvider`를 사용하십시오.
   
결론

Riverpod은 Flutter에서 상태 관리를 위한 강력하고 유연한 접근 방식을 제공합니다. 해당 개념과 최적의 방법을 숙지하여 유지보수가 용이하고 테스트 가능하며 확장 가능한 앱을 만들 수 있습니다.

Riverpod 습득에는 연습이 필요합니다. 다양한 프로바이더 유형을 실험하고 공식 문서를 탐색하며 Flutter 커뮤니티에서 질문을 주저하지 마세요.

<div class="content-ad"></div>

다음 플러터 프로젝트에서 Riverpod을 사용해보는 게 기대되시나요? Riverpod의 어떤 측면이 가장 흥미로우신가요? 아래 댓글에 여러분의 생각과 경험을 공유해주세요!

더 깊이있는 플러터 개발 관련 기사를 기대해주세요. 즐거운 코딩되세요!

플러터에서 상태 관리하는 방법



성능은 모바일 애플리케이션의 성공에 중요한 요소입니다. 크로스 플랫폼 개발의 세계에서 Flutter는 강력한 툴킷으로 부상했지만, 가장 잘 작성된 Flutter 앱도 최적화되지 않으면 성능 문제가 발생할 수 있습니다. Flutter DevTools는 개발자가 앱 성능을 모니터링, 진단 및 최적화하는 데 특별히 설계된 강력한 도구 세트를 제공합니다. 이 안내서에서는 Flutter DevTools를 활용하여 앱 성능을 향상시키는 방법에 대해 자세히 살펴보겠습니다.

![No More Excuses: Make Your Flutter App Fly with DevTools](/assets/img/2024-08-26-NoMoreExcusesMakeYourFlutterAppFlywithDevTools_0.png)

### 프로필 모드에서 Flutter DevTools 활성화하기

Flutter 앱의 최적화를 시작하기 전에, Flutter DevTools가 프로필 모드에서 가장 효과적임을 알아야 합니다. 디버그 모드에서 DevTools를 사용할 수 있지만, 디버거의 추가 오버헤드로 인해 프로파일링 데이터가 정확하지 않을 수 있습니다.

<div class="content-ad"></div>

DevTools를 활성화하여 Profile 모드에서 실행되도록 하려면:

- 앱을 Profile 모드로 실행하세요:

```js
flutter run --profile
```

Profile 모드는 Debug 및 Release 모드 사이의 균형을 유지하며, 앱의 성능을 더 정확하게 측정할 수 있도록 하면서 일부 디버깅 기능도 제공합니다.

<div class="content-ad"></div>

디버그 도구 활성화 방법:

- IDE에서: Visual Studio Code 또는 Android Studio를 사용하는 경우, 프로필 모드에서 실행 중인 경우 IDE에서 직접 DevTools를 열 수 있습니다.
- 명령줄에서: 다음 명령을 사용하여 DevTools를 시작하십시오:

```js
flutter pub global run devtools
```

활성화되면 DevTools가 실행 중인 앱 인스턴스에 연결되어 성능을 프로필링하고 최적화하는 데 효과적으로 사용할 수 있습니다.

<div class="content-ad"></div>

## Flutter에서 성능 이해하기

Flutter DevTools의 구체적인 내용에 대해 들어가기 전에, Flutter 앱의 성능 핵심 측면을 이해하는 것이 중요합니다. Flutter 앱의 성능 문제는 일반적으로 다음과 같이 나타납니다:

- 부자연스러운 애니메이션: 프레임 렌더링이 오래 걸려 부드럽지 못한 애니메이션을 유발합니다.
- 시작 시간이 느림: 앱을 실행할 때 지연이 발생하여 처음 인상을 나빠지게 합니다.
- 메모리 누수: 과도한 메모리 사용은 앱이 느려지거나 충돌을 유발할 수 있습니다.

Flutter DevTools를 통해 다양한 프로파일링 도구를 사용하여 이러한 문제를 식별하고 해결할 수 있습니다.

<div class="content-ad"></div>

## 성능 최적화를 위한 Flutter DevTools의 주요 도구

### 1. 성능 오버레이

- 목적: 성능 오버레이는 프레임 렌더링 시간을 그래프로 표시하여 목표 프레임 시간을 초과하는 프레임을 식별하는 데 도움이 됩니다.
- 사용 방법: "Performance" 탭으로 이동하여 DevTools에서 성능 오버레이를 활성화합니다. 오버레이는 앱에 직접 표시되며 두 가지 주요 지표를 보여줍니다:
    - UI 스레드: UI를 빌드하고 렌더링하는 데 걸리는 시간
    - 래스터 스레드: 화면에 픽셀을 그리는 데 걸리는 시간
- 최적화 팁: 60fps의 부드러운 애니메이션을 위해 두 지표 모두 16.67ms 임계값 아래에 유지하는 것을 목표로 합니다. 프레임 시간이 이를 초과하는 경우, 비효율적인 빌드 방법이나 무거운 레이아웃을 위젯 트리에서 조사해 보세요.

### 2. CPU 프로파일러

<div class="content-ad"></div>

- 목적: CPU 프로파일러를 사용하면 특정 기간 동안 앱의 CPU 사용량을 기록하고 분석할 수 있습니다.
- 사용법: 성능 문제를 일으킬 수 있다고 의심되는 앱 내 작업을 수행하는 동안 CPU 프로파일 녹화를 시작합니다. 녹화를 중지하면 DevTools가 CPU 사용량의 자세한 분할을 제공하며, 어떤 함수가 가장 많은 리소스를 사용했는지 알 수 있습니다.
- 최적화 팁: CPU 시간을 많이 사용하는 함수나 위젯을 찾아보세요. 코드의 이러한 부분을 보다 효율적으로 개선하기 위해 불필요한 다시 빌드를 줄이거나 복잡한 계산을 최적화하는 등의 작업을 할 수 있습니다.

## 3. 메모리 프로파일러

- 목적: 메모리 프로파일러를 사용하면 앱의 메모리 사용량을 모니터링하여 잠재적인 누수나 과도한 메모리 소비를 식별할 수 있습니다.
- 사용법: DevTools의 메모리 탭을 사용하여 앱의 메모리 할당량을 시간별로 확인합니다. 지속적으로 증가하는 메모리 사용량 없이 메모리 누수를 나타내는 메모리 스파이크나 패턴을 찾아보세요.
- 최적화 팁: 앱에서 오래 지속되는 객체(컨트롤러 또는 서비스와 같은)에 특별히 주의를 기울이세요. 필요할 때 메모리를 해제하기 위해 dispose 메서드를 구현해주세요. 

## 4. 타임라인 보기

<div class="content-ad"></div>

- 목적: 타임라인 뷰는 앱에서 발생하는 모든 이벤트를 포괄적으로 보여줍니다. 이에는 프레임 렌더링, 가비지 컬렉션 및 네트워크 요청 등이 포함됩니다.
- 사용법: 타임라인 뷰는 잔달 진단에 특히 유용합니다. 이벤트 타임라인을 조사하여 프레임 드롭이 발생하는 시기와 이유를 정확히 파악할 수 있습니다.
- 최적화 팁: 프레임 드롭이 발생하기 직전 순간에 주목하세요. 이벤트 로그를 조사하여 무거운 빌드 방법, 주 스레드에서 실행되는 오랜 작업 또는 기타 사항을 식별하세요.

## 5. 네트워크 프로파일러

- 목적: 네트워크 프로파일러는 앱에서 수행된 모든 네트워크 요청을 추적하여 요청 시간, 데이터 크기 및 기타 정보를 제공합니다.
- 사용법: DevTools의 네트워크 탭을 사용하여 API 호출 및 기타 네트워크 상호작용을 모니터링하세요. 이 도구는 느린 네트워크 요청이나 대규모 데이터 페이로드와 관련된 성능 문제를 식별하는 데 필수적입니다.
- 최적화 팁: 네트워크 요청이 느릴 경우, 페이로드 크기를 줄이기, 캐싱 전략 구현하기 또는 데이터를 UI 스레드를 차단하지 않고 비동기적으로 로드하는 것 등 최적화 방법을 고려해보세요.

## 플러터 앱 최적화를 위한 실용적인 단계

<div class="content-ad"></div>

- 위젯 재구성 최적화: 불필요한 재구성을 방지하기 위해 가능한 경우 const 키워드를 사용하세요. shouldRebuild 메서드를 활용하여 언제 위젯을 재구성해야 하는지 제어하세요.
- 오버드로우 줄이기: Performance Overlay를 사용하여 오버드로우를 식별하고 줄이세요 (동일한 픽셀이 여러 번 그려지는 경우). 다중 레이어의 투명도를 피하고 가능한 경우 솔리드 색상을 선호하세요.
- 효율적인 데이터 처리: 앱에서 데이터 처리 방식을 최적화하세요. 효율적인 데이터 구조와 알고리즘을 사용하여 처리 시간을 줄이고 한 번에 많은 양의 데이터를 불러오지 않도록 주의하세요.
- 비동기 프로그래밍: 무거운 계산이나 IO 바운드 작업을 해소하여 Future, async, await를 사용하여 독립적으로 실행하거나 비동기적으로 실행하세요. 이렇게 하면 주 스레드가 부드럽게 프레임을 렌더링할 수 있습니다.
- 가비지 컬렉션 관리: 타임라인 뷰에서 가비지 컬렉션을 주시하세요. 빈번한 가비지 컬렉션은 불필요한 객체 할당과 같이 처리해야 할 메모리 문제를 나타낼 수 있습니다.

## 결론

앱 성능 최적화는 원활한 사용자 경험을 제공하는 데 매우 중요하며, Flutter DevTools는 이를 달성하는 데 필요한 모든 도구를 제공합니다. Performance Overlay, CPU Profiler 및 Memory Profiler와 같은 도구를 활용하여 앱의 성능에 대한 심층적인 통찰력을 얻고 병목 현상을 식별하고 목표로 하는 최적화를 적용할 수 있습니다. 이 도구들을 정기적으로 사용하여 Flutter 앱이 효율적으로 실행되도록 하여 사용자에게 부드럽고 반응성 있는 경험을 제공할 수 있습니다.

Flutter 앱 개발자라면 DevTools를 반드시 사용해야하는 이유



<img src="/assets/img/2024-08-26-TheJourneyBehindSimplifyingCustomerOnboardingatGlovo_0.png" />

제품 매니저로서 내 업무 중 가장 보람 찬 순간 중 하나는 아이디어가 가설에서 출발하여 실제로 구현된 기능이 사용자들에게 현저한 차이를 만들어내는 것을 보는 것입니다. 그러나 이 여정은 항상 일관된 경로를 향하는 것은 아닙니다. 최근에는 Glovo의 고객 온보딩 프로세스를 간소화하는 프로젝트가 좋은 예시입니다. 간단한 작업처럼 보였던 것이 우리 팀의 복원력과 협업을 시험하는 어려운 반복적인 프로세스로 발전하였습니다. 이 프로세스를 통해 많은 교훈을 얻었습니다. 이 곳에는 우리가 테스트를 세 번 실시해야 했지만 마침내 고객 온보딩 흐름에 상당한 영향을 미치고 신규 고객을 3.7% 늘릴 수 있었던 여정이 담겨 있습니다.

# 발견: 고통 포인트 발굴

우리의 여정은 온보딩 프로세스 중에서 상당한 이탈이 발견되었을 때 시작되었습니다. 회원 가입 및 로그인 흐름을 최적화하기 위해 최선을 다하고 있음에도 불구하고, 사용자의 30% 이상이 심지어 로그인 화면에 도달하기도 전에 앱을 이탈하고 있었습니다. 안드로이드 사용자의 경우, 이 비율은 더 높았으며 때로는 45%에 이를 정도였습니다.

<div class="content-ad"></div>

사용자 경험 연구(UXR) 연구는 추가로 통찰력을 제공했습니다. 결과는 명확했습니다: 사용자들이 우리의 온보딩 화면을 불분명하고 반복적이며 무시하기 쉬운 것으로 생각했습니다. 많은 사용자들이 그것들을 참여하지 않고 그냥 스크롤만 하면서 지나갔습니다. 우리는 온보딩이 게이트웨이보다는 장애물이라는 것을 깨달았습니다. 접근 방식을 다시 생각할 시간이었습니다.

# 해결책 만들기: 적은 것이 더 나은 방향

우리가 제안한 해결책은 간단하지만 대담했습니다: 온보딩 프로세스를 핵심 요소로 축소하는 것입니다. 이는 비필수 화면을 모두 제거하고 사용자가 로그인하여 앱을 탐색할 수 있는 데 필요한 것에만 집중하는 것을 의미했습니다. 구체적으로 우리는 다음을 결정했습니다:

- 온보딩 흐름을 7개의 화면에서 최소한으로 줄이기: 더 부드럽고 빠른 온보딩 경험에 바로 기여하지 않는 화면은 제거했습니다. 위치와 알림과 같은 필수 권한만을 유지하고 심지어 이러한 것들도 상호작용 수를 줄이기 위해 간소화되었습니다.
- 권한 도전 과제 해결: 우리가 직면한 가장 큰 도전은 주소 권한을 처리하는 것이었습니다. Glovo에서 사용자의 주소 획득이 그들에게 해당 지역의 관련 가게와 서비스를 보여주는 데 중요하다는 사실을 알고 있었습니다. 그러나 이것이 큰 막강 지점이라는 것을 알고 있었습니다. 사용자들은 앱을 즉시 탐험 시작하길 원하지만 GPS 액세스를 미리 승인하거나 앱이 제공하는 것을 보기 전에 주소를 제공하는 데 주저할 수 있습니다.

<div class="content-ad"></div>

이 문제를 해결하기 위해 우리는 두 가지 방법을 사용했습니다:

- 주소 권한 요청 연기: 지역 액세스를 사용자에게 최초로 요청하는 대신, 사용자가 더 많이 참여하고 이미 계정을 생성한 상태에서 이 요청을 연기했습니다.
- 백업으로 수동 주소 입력: 아직 망설이는 사용자들을 위해, 주소를 수동으로 입력할 수 있는 옵션을 제공했습니다. 이를 통해 GPS를 활성화하도록 압박받지 않고 관련 정보를 얻을 수 있었으며, 이로 인해 이 결정적인 단계에서의 이탈을 줄일 수 있었습니다.

3. 명확성과 관련성 향상: 남은 화면들을 가능한 한 명확하고 관련성 있게 만드는 데 주안점을 두었습니다. 사용자들이 권한을 요청하는 이유와 그것이 사용자 경험을 어떻게 향상시킬지를 이해할 수 있도록 하였습니다.

4. 권한 요청을 위한 타이밍 최적화: 조사 결과를 바탕으로, 우리는 타이밍이 중요함을 알았습니다. 예를 들어, iOS 사용자에게 앱 투명성 추적 요청(App Transparency Tracking, ATT)을 앱 사용 시작 후 첫 30초 이내에 요청하도록 하여 수락율을 높일 수 있었음이 밝혀졌습니다.

<div class="content-ad"></div>


![이미지](/assets/img/2024-08-26-TheJourneyBehindSimplifyingCustomerOnboardingatGlovo_1.png)

또한 푸시 알림 요청은 사용자가 이미 주소를 만들었을 때에만 전송되었습니다. 이렇게 하면 사용자들이 푸시 알림에 동의해야 하는 이유를 가치 있게 여길 수 있었고, 온보딩 중에 무엇을 얻을 수 있는지 모르는 상황에서 사전에 요청하는 것보다 나은 결과를 얻을 수 있었습니다.

# 인증: 새로운 온보딩 경험

이러한 인사이트를 갖고 우리는 급진적인 변경안을 제안했습니다: 온보딩 프로세스를 7개 화면에서 필수 사항만으로 줄이는 것입니다. 필수 사항이 아닌 권한을 모두 제거하고 사용자를 빠르게 로그인 화면으로 이동시키는 것이었습니다. 우리는 마찬가지로 신규 고객 수 증가로 이어지는 가입률 향상을 통해 마찬가지로 신규 고객수 증가로 이어지는 가입률 향상을 기대했습니다.


<div class="content-ad"></div>

그러나 이 가설을 검증하는 것은 전혀 간단한 일이 아니었습니다. 사용자가 계정을 만들기 전에 발생한 이러한 흐름들 때문에, 우리는 사용자 ID가 아닌 장치 ID를 기반으로 실험을 무작위화해야 했습니다. 그러나 기존의 A/B 테스팅 도구는 장치 ID 기반 실험에 적합하지 않았습니다. 이런 제약을 극복하기 위해 우리는 여러 차례 방법을 조정하여 여전히 의미 있는 데이터를 수집할 수 있도록 노력했습니다.

# 구현: 도전의 여정

구현 단계는 정말 흥미롭고-frustrating 해졌던 지점입니다. 새로운 흐름에 대한 우수한 배송 시간과 테스트용 기능을 신속하게 활성화했음에도 불구하고, AB 테스트를 시작하자마자 여러 가지 어려움에 직면했습니다. 우리는 큰 희망을 가지고 A/B 테스트를 시작했지만, 병행 프로젝트들이 결과에 영향을 주고 분석적 이벤트가 모든 경우에 제대로 전송되지 않는 문제를 발견했습니다. 다른 팀들이 온보딩 흐름에 영향을 주는 변경을 하고 있어 우리의 테스트 데이터가 신뢰할 수 없다는 것을 알게 되었습니다. 우리는 세 번이나 테스트를 다시 시작해야 했고, 각 시도마다 이전의 경험을 토대로 배우고 팀 간의 조정을 더 강화했습니다.

이러한 손실은 도전적이었지만, 제품 개발에서 교차 기능적 커뮤니케이션과 세심한 계획의 중요성을 강조했습니다. 각 실패한 테스트는 신뢰할 수 있는 실험에 한 걸음씩 더 가까워지게 하고, 각 어려움은 미래에 더 나은 도구와 프로세스가 필요하다는 것을 강조했습니다.

<div class="content-ad"></div>

제품 매니저로서 이 글에서 얻을 수 있는 주요 교훈 중 몇 가지는 다음과 같습니다:

- 실수는 발생할 수 있고, 이는 사람의 경력이나 재능을 결정하지 않습니다. 중요한 것은 이 실수에 대해 어떻게 대처하는가입니다. 실수를 다루는 방법에 대한 WellTech의 프레임워크가 정말 마음에 듭니다:

    - 실수에 대한 책임을 집니다.
    - 가능한 한 빨리 인정하고 접근 방식을 조정합니다.
    - 알아야 할 모든 사람에게 알립니다.
    - 실수로 이끈 근본 원인을 이해합니다.
    - 결론을 도출하고 동료들과 공유합니다.
    - 미래에 같은 실수를 반복하지 않습니다.

- 도구의 중요성입니다!

<div class="content-ad"></div>

우리 A/B 테스트 도구의 한계는 특히 장치 ID에 의존하고 있다는 점을 강조했습니다. 견고하고 유연한 테스트 인프라의 중요성을 강조했습니다.

- 유연성 및 적응성

프로젝트 중간에 테스트 전략을 조정해야 하는 필요성은 유연성의 가치를 입증했습니다. 제품 관리자로서 유연해야하며, 테스트 과정 중에 발생하는 새로운 도전이나 통찰에 기반하여 접근 방식을 전환할 준비가 필요합니다.

- 반복에 대비하세요

<div class="content-ad"></div>

우리가 경험한 좌절은 제품 개발이 종종 반복적인 과정임을 상기시켜줍니다. 처음에 바로 모든 것이 올바르게 되리라 기대하는 것은 현실적이지 않습니다. 여러 번의 반복을 위한 시간을 마련하고 좌절을 실패로 보는 것이 아니라 접근 방식을 개선하고 결과를 향상시킬 수 있는 기회로 볼 중요성을 이해해야 합니다.

- 각 실험을 문서화하고 학습하기

각 테스트가 성공적이든 실패적이든 소중한 통찰을 제공합니다. 각 실험의 도전, 조정 및 최종 결과를 문서화하면 미래 프로젝트를 안내할 수 있는 지식 저장소를 구축하는 데 도움이 됩니다. 이 문서화 데이터는 다른 팀 간에 공유되어 다른 영역에서 유사한 문제가 발생하는 것을 방지할 수 있습니다.

# 결과: 보다 효과적인 온보딩

<div class="content-ad"></div>

마침내, 여러 차례의 반복 끝에 우리가 기대했던 결과를 얻었습니다. 간소화된 온보딩 프로세스로 회원 가입이 상당히 증가했으며, 사용자 경험에 있어 '더 적으면 더 좋다'는 우리의 가설을 입증했습니다. 새로운 고객도 3.7% 증가했는데, 이는 더 간단하고 집중된 온보딩 경험이 더 나은 사용자 참여로 이어질 것이라는 우리의 믿음을 입증했습니다.

이 프로젝트는 제품 개발이 거의 선형적이지 않다는 점을 선명히 상기시켜 주었습니다. 최상의 계획도 방황할 수 있고, 성공을 이루려면 끈기와 유연성, 그리고 실패로부터 배우는 의지가 필요합니다. 길이 예상보다 더 멀고 울퉁불퉁했지만, 최종 결과는 그만한 가치가 있었습니다 — 우리 사용자를 위한 더 나은 경험과 팀에게 귀중한 교훈을 얻을 수 있었습니다.

글로보에서 고객 온보딩을 간소화하는 과정 알아보기



![Boost your iOS app's visibility with this simple tip](/assets/img/2024-08-26-BoostyouriOSappsvisibilitywiththissimpletip_0.png)

안녕하세요! 여러분! 제 이름은 Sergey입니다. 저는 Futurra Group에서 iOS 팀 리드로 6년 이상 일하고 있습니다. 이 글에서는 여러분의 앱 가시성을 높이고 사용률을 향상시킬 수 있는 간단한 팁을 공유하겠습니다. iOS 앱을 더 쉽게 발견할 수 있는 간단하면서도 강력한 기술을 발견해보세요.

이 팁은 Info.plist의 kMDItemKeywords 키와 관련이 있습니다.

kMDItemKeywords는 iOS 및 macOS 시스템에서 사용되는 메타데이터 속성으로, 파일이나 문서와 관련된 키워드를 저장하는 데 사용됩니다. 이러한 키워드는 시스템 내의 파일을 검색하고 구성하는 데 사용될 수 있으며, iOS의 앱 라이브러리나 macOS의 Spotlight 및 기타 검색 도구를 통해 파일을 쉽게 찾을 수 있게 합니다.

<div class="content-ad"></div>

예를 들어, kMDItemKeywords를 사용하여 파일에 키워드를 추가하면 해당 키워드를 검색란에 입력하여 쉽게 해당 파일을 찾을 수 있습니다. 이 속성은 이미지, 문서 또는 기타 파일의 메타데이터 컨텍스트에서 종종 사용되며 분류 및 조직을 개선하는 데 사용됩니다.

이것은 Apple의 공식 문서에서는 찾을 수 없을 것입니다 (적어도 iOS에 대해서는). iOS용 앱 라이브러리에 앱이 디스플레이 이름만이 아니라 여러 이름으로 나타나도록하려면 다음 단계를 따르세요.

1. 앱의 Info.plist 업데이트:

- kMDItemKeywords라는 새 키 추가
- 타입을 문자열로 설정

<div class="content-ad"></div>

2. 키워드 설정:

- 앱을 검색할 때 사용할 대체 이름 목록을 쉼표로 구분하여 입력하세요. 이는 이전 앱 이름이나 경쟁 앱의 이름을 포함할 수 있습니다.

![Boost your iOS app's visibility with this simple tip](/assets/img/2024-08-26-BoostyouriOSappsvisibilitywiththissimpletip_1.png)

3. 변경 사항 테스트하기:

<div class="content-ad"></div>

- 중요: 변경 사항이 적용되도록단말기/시뮬레이터에서 이전 앱 버전을 제거한 후 새로 설치해주세요.
- 당신의 장치나 시뮬레이터에 앱을 설치해주세요.

## 작동 방식

저희 수학 문제 해결 앱 MathMaster를 사용 예시로 설명 드리겠습니다. 아래 스크린샷에서 저는 경쟁사 앱인 "Microsoft Math"를 검색에 입력했고, 결과를 보시다시피 검색 결과에는 해당 앱만 나타났습니다.

![매체](/assets/img/2024-08-26-BoostyouriOSappsvisibilitywiththissimpletip_2.png)

<div class="content-ad"></div>

이제 kMDItemKeywords 필드를 값 "Microsoft Math"로 추가할 거에요. 아래 스크린샷에서 보는 것처럼, 이제 "Microsoft Math" 키워드 검색 결과에 우리 앱이 나타납니다.

<img src="/assets/img/2024-08-26-BoostyouriOSappsvisibilitywiththissimpletip_3.png" />

연락처: 내 트위터, 링크드인

간단한 팁으로 iOS 앱 가시성 향상하는 방법



![LookAroundPreview](/assets/img/2024-08-26-SwiftUIMapKitLetsLookAround_0.png)

LookAroundPreview은 MapKit의 내가 가장 좋아하는 기능 중 하나입니다. 이 기능은 선택한 위치의 거리 이미지를 360도로 제공합니다.

![Street View](https://miro.medium.com/v2/resize:fit:590/1*q0NjU2OEYf0vt6bcJ9wyGw.gif)

이 글에서는 우리의 지도 앱에 이 작은 Look Around 기능을 추가하는 방법을 확인해보겠습니다.

<div class="content-ad"></div>

# 간단한 소개

LookAroundPreview를 만들고 앱에 Look Around 기능을 추가하는 두 가지 방법이 있습니다.

## Way 1!

단순히 LookAroundPreview 구조체를 사용하세요.

<div class="content-ad"></div>

우리는 이렇게 초기화할 수 있어요.

- init(initialScene: MKLookAroundScene?, allowsNavigation: Bool, showsRoadLabels: Bool, pointsOfInterest: PointOfInterestCategories, badgePosition: MKLookAroundBadgePosition)을 사용하여 초기 MKLookAroundScene을 제공하거나,
- init(scene: Binding`MKLookAroundScene?`, allowsNavigation: Bool, showsRoadLabels: Bool, pointsOfInterest: PointOfInterestCategories, badgePosition: MKLookAroundBadgePosition)에 scene을 바인딩하여 제공할 수 있어요.

## 두 번째 방법!

우리는 lookAroundViewer 보기 수정자를 사용하여 직접 Look Around 뷰어를 만들고 이를 지도에 연결할 수도 있어요.

<div class="content-ad"></div>

Look Around 뷰어와 Look Around 미리보기가 어떻게 다른가요?

미리보기는 기본적으로 해당 장소의 이미지일 뿐이에요. 미리보기를 탭하면 전체 화면 Look Around 뷰어가 열리는데, 여기서 실제로 주변을 둘러볼 수 있고, 네비게이션이 허용된다면 움직일 수도 있어요.

저는 개인적으로 즉시 전체 화면 뷰어를 열지 않는 것을 선호하고, 사이에 미리보기가 있는 것을 감사하게 생각해요. 그래서 LookAroundPreview 구조체 접근 방식을 사용해 봅시다!

# 함께 둘러봐요!

<div class="content-ad"></div>

어서 오세요!

룩어라운드 프리뷰를 만드는 방법을 알려드리겠습니다.

- 관심 있는 CLLocationCoordinate2D를 가져옵니다.
- 좌표를 사용하여 MKLookAroundSceneRequest를 생성합니다.
- 요청에서 MKLookAroundScene을 가져옵니다.
- 씬을 사용하여 LookAroundPreview를 생성하고 필요에 따라 allowsNavigation, showsRoadLabels, pointsOfInterest 및 badgePosition을 설정할 수 있습니다.

## 참고

<div class="content-ad"></div>

MKLookAroundScene은 모든 위치에서 사용할 수 있는 것이 아닙니다! 만일 둘러보기 기능이 덮지 않은 위치에 CLLocationCoordinate2D로 요청을 보내면, MKLookAroundScene은 nil이 될 것입니다.

## 예시

코드를 작성해봅시다!

사용자가 지도 피처를 탭했을 때 LookAroundPreview를 보여주는 간단한 예시를 만들어 보겠습니다.

<div class="content-ad"></div>

```swift
import SwiftUI
import MapKit

private struct LookAroundView: View {
    var selection: MapFeature
    @State private var lookAroundScene: MKLookAroundScene?
    
    var body: some View {
        LookAroundPreview(initialScene: lookAroundScene)
            .overlay(alignment: .bottomLeading, content: {
                if let title = selection.title {
                    HStack {
                        Text(title)
                    }
                    .font(.caption)
                    .foregroundStyle(.white)
                    .padding(.all, 8)
                    .background(RoundedRectangle(cornerRadius: 4).fill(.black))
                    .padding(.all, 8)
                }
            })
            .onChange(of: selection, initial: true, {
                getLookAroundScene()
            })
    }
    
    func getLookAroundScene() {
        lookAroundScene = nil
        Task {
            let request = MKLookAroundSceneRequest(coordinate: selection.coordinate)
            do {
                lookAroundScene = try await request.scene
                if lookAroundScene == nil {
                    print("Look Around Preview not available for the given coordinate.")
                }
            } catch (let error) {
                print(error)
            }
        }
    }
}

struct LookAroundBaseView: View {
    
    // Tokyo, Shibuya
    private let initialPosition = MapCameraPosition.camera(
        MapCamera(
            centerCoordinate: CLLocationCoordinate2D(latitude: 35.6615, longitude: 139.703),
            distance: 300,
            heading: 0,
            pitch: 0
        )
    )
    
    @State private var selection: MapFeature? = nil
    @State private var lookAroundScene: MKLookAroundScene?

    
    var body: some View {
        Map(initialPosition: initialPosition, selection: $selection)
            .overlay(alignment: .top, content: {
                if let selection = selection {
                    LookAroundView(selection: selection)
                        .frame(height: 256)
                        .clipShape(RoundedRectangle(cornerRadius: 10))
                        .padding()
                }
            })
            
    }
}
```

그리고 이렇게 하면 됩니다!

<img src="https://miro.medium.com/v2/resize:fit:590/1*q0NjU2OEYf0vt6bcJ9wyGw.gif" />

원래는 콜로라도 주 아스펜을 중심으로 예제를 만들려고 했는데, 거기 주변에 엄청나게 MKLookAroundScene을 제공하는 MapFeatures가 없다는 것을 알게 되었어요…


<div class="content-ad"></div>

어쨌든!

읽어 주셔서 감사합니다!

오늘은 여기까지!

즐거운 살펴보기 되세요!

SwiftUI와 MapKit을 이용한 실시간 지도 앱 만들기

스위프트로 API 호출하는 간단한 방법



<img src="/assets/img/2024-08-26-100DaysofiOSDevelopmentJourneyDay033_0.png" />

제33일째, 우리는 간단한 뉴스 리더 앱을 만들 예정인 새 프로젝트에 착수합니다. 이 앱은 사용자가 원격 서버에서 가져온 최신 뉴스 기사를 둘러볼 수 있도록 해주며, 깔끔하고 직관적인 인터페이스에서 이를 표시합니다. 이 프로젝트에서는 앱의 구조를 조직하는 데 초점을 맞추며, 탐색을 위해 UITabBarController를 구현하고, Swift의 Codable 프로토콜을 사용하여 JSON 데이터를 구문 분석하는 것에 중점을 둘 것입니다.

이 프로젝트는 외부 소스에서 데이터를 처리하고 여러 뷰로 앱을 구성하는 데 좋은 입문 자료입니다. 끝날 때까지 기본적이지만 기능적인 앱을 만들어 더 고급 프로젝트의 기초를 마련하게 될 것입니다.

## 목차

<div class="content-ad"></div>

- 설정
- 기본 UI 생성: UITabBarController
- Codable 프로토콜을 사용한 JSON 구문 분석
- 요약
- 참고 자료

## 설정

XCode에서 새 iOS 프로젝트를 생성하고 "Project7"이라고 이름을 지정합니다.

## 기본 UI 생성: UITabBarController

<div class="content-ad"></div>

- ViewController 상속 업데이트: ViewController.swift 파일을 열고 클래스를 UIViewController 대신 UITableViewController에서 상속받도록 수정하세요.
- Storyboard 수정:
- Main.storyboard를 열고 기존 뷰 컨트롤러를 UITableViewController로 교체하세요.
- 이 UITableViewController를 초기 뷰 컨트롤러로 설정하세요.
- 속성 검사기에서 프로토타입 셀 식별자를 "Cell"로 설정하고 액세서리를 "Disclosure Indicator"로 변경하고 스타일을 "Subtitle"로 조정하세요.
- Navigation 및 Tab Bar 컨트롤러에 삽입:
- UITableViewController를 UINavigationController에 삽입하세요.
- 그런 다음 UINavigationController을 UITabBarController에 삽입하세요.
- 네비게이션 컨트롤러 씬 내의 "탭 바 항목"을 선택하고 시스템 항목을 "Custom"에서 "Most Recent"로 변경하세요.
- Storyboard ID 설정: 네비게이션 컨트롤러 씬에서 Identity Storyboard ID를 "NavController"로 설정하세요.
- 테이블 뷰 준비: ViewController.swift 파일을 열고 피드를 저장할 속성을 추가하세요:

```js
private var petitions = [String]()
```

- 테이블의 행 수를 정의하세요:

```js
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return petitions.count
}
```

<div class="content-ad"></div>

- 각 테이블 행에 대한 셀 뷰를 설정하십시오:

```js
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
    cell.textLabel?.text = "여기에 제목 입력"
    cell.detailTextLabel?.text = "여기에 부제목 입력"
    return cell
}
```

- 앱 실행: 이 시점에서 앱을 실행하면 하단 탭 바를 제외하고 테이블 뷰가 비어 있습니다. 다음 단계에서 테이블을 채웁니다.

## Codable 프로토콜을 사용한 JSON 파싱

<div class="content-ad"></div>

- 청원 구조 정의: Petition.swift라는 새 Swift 파일을 생성하고 JSON 구조와 일치하도록 구조체를 정의하세요:

```swift
import Foundation

struct Petition: Codable {
    var title: String
    var body: String
    var signatureCount: Int
}
```

- JSON 응답을 위한 래퍼 생성: JSON 응답은 results 키 하위에 중첩되어 있으므로, 래퍼 구조체를 정의하기 위해 Petitions.swift라는 다른 Swift 파일을 생성하세요:

```swift
import Foundation

struct Petitions: Codable {
    var results: [Petition]
}
```

<div class="content-ad"></div>

- 청원 배열 업데이트: ViewController.swift 파일의 청원 배열을 문자열 대신 Petition 객체를 저장할 수 있도록 수정하십시오:

```js
private var petitions = [Petition]()
```

- JSON 데이터 가져오기: viewDidLoad 메서드에서 JSON 데이터 가져오기를 구현하십시오:

```js
override func viewDidLoad() {
    super.viewDidLoad()
    
    if let url = URL(string: "https://www.hackingwithswift.com/samples/petitions-1.json") {
        if let data = try? Data(contentsOf: url) {
            parse(json: data)
        }
    }
}
```

<div class="content-ad"></div>

- JSON 데이터 구문 분석: JSON 데이터를 Swift 객체로 디코딩하는 파싱 메서드를 만들어보세요:

```swift
private func parse(json: Data) {
    let decoder = JSONDecoder()
    if let petitionsJson = try? decoder.decode(Petitions.self, from: json) {
        petitions = petitionsJson.results
        tableView.reloadData()
    }
}
```

- cellForRowAt 메서드 수정: petitions 배열에서 실제 데이터를 표시하도록 cellForRowAt 메서드를 수정하세요:

```swift
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
    let petition = petitions[indexPath.row]
    cell.textLabel?.text = petition.title
    cell.detailTextLabel?.text = petition.body
    return cell
}
```

<div class="content-ad"></div>

- 앱을 실행하면 이제 파싱된 JSON 데이터가 테이블 뷰에 표시됩니다.

![image](/assets/img/2024-08-26-100DaysofiOSDevelopmentJourneyDay033_1.png)

## 요약

우리는 기능적이고 사용자 친화적인 앱 인터페이스를 만드는 기초적인 측면을 탐구했습니다. 먼저 UITabBarController를 사용하여 기본 UI를 설정하여 서로 다른 뷰 간에 쉽게 이동할 수 있도록했습니다. 그런 다음, Codable 프로토콜을 사용하여 JSON 데이터를 구문 분석하는 데 초점을 맞춰 우리 앱에서 구조화된 데이터를 처리하고 표시하는 프로세스를 간소화했습니다.

<div class="content-ad"></div>

하루를 마무리하며, 우리 앱에서 데이터를 성공적으로 가져와서 표시하는 데 성공했습니다. 이로써 향후 보다 복잡한 데이터 조작을 위한 무대를 마련하고 더 많은 기능 향상을 기대할 수 있게 되었습니다. 이 날은 Swift에서 JSON 구문 분석과 UI 설정에 대한 개념을 강화하는 데 중요했으며, 앞으로의 고급 주제에 대비할 수 있도록 준비했습니다.

## 참고 자료

https://www.hackingwithswift.com/100/33

Posts