2023년 10월 11일 수요일

ROS에대한 기본이해

By schoolhompy at 10월 11, 2023 No comments

ROS에대한 기본이해

ROS 시스템에 대한 기본 이해

ROS 시스템에 대한 기본 이해

ROS 개념

ROS(로봇 운영 체제)는 로봇 소프트웨어 개발을 위한 오픈 소스 프레임워크로, 로봇도 운영 체제도 아닙니다. ROS는 2007년 스탠포드 대학교 박사인 Eric Berger와 Keenan Wyrobek에 의해 만들어졌습니다. 그들은 로봇 하드웨어에 대한 지식이 거의 없는 소프트웨어 개발자라도 로봇용 소프트웨어를 작성할 수 있을 것이라고 기대했습니다.

ROS(로봇 운영 체제) 는 메타 운영 체제입니다.

메타 운영체제는 명확히 정의된 용어는 아니지만, 애플리케이션과 분산 컴퓨팅 자원 간의 가상화 계층을 활용해 분산 컴퓨팅 자원을 활용해 스케줄링, 로딩, 모니터링, 오류 처리 등의 작업을 수행하는 시스템이다.

ROS의 목표는 "글로벌 규모의 로봇 소프트웨어 공동 개발을 위한 환경 구축!"입니다.

오늘날 ROS Classic(ROS 1이라고도 함)에는 다양한 로봇 애플리케이션 개발을 위한 하드웨어를 다루는 풍부하고 안정적인 소프트웨어 패키지, 도구 및 튜토리얼 세트가 있습니다. ROS 모듈에는 센서 융합, 탐색, 시각화 및 동작 계획이 포함됩니다.

ROS 1은 원래 학술용으로만 개발되었으므로 이를 사용하려면 완벽한 통신 기능이 필요합니다. 그러나 현실 세계의 통신 조건은 상상만큼 완벽하지 않습니다. 특히 산업 환경에서는 더욱 그렇습니다.
대역폭, 네트워크 가용성 및 통신 범위와 같은 가변 요소는 물론 배터리 구동 모바일 로봇을 통한 트랜시버의 전력 소비로 인해 시스템의 복잡성이 크게 증가합니다. 또한 ROS 1은 단일 로봇에서만 작동합니다. 공장을 더욱 스마트하게 만들려면 여러 대의 로봇이 필요하며, 이들 로봇은 서로 협력할 수 있어야 합니다.
ROS 2는 DDS(데이터 배포 서비스)의 통신 아키텍처를 기반으로 차량 자율성을 통해 차량 관리 시스템을 분산화하여 AMR이 P2P 실시간 통신을 달성할 수 있도록 합니다.

ROS 개발 역사

2007년 스탠포드 대학의 STAIR(S Tandford AI Robot) 프로젝트에서 탄생한 Morgan Quigley
2008년 Willow Garage 인수
2010 ROS 1.0 출시
2011 터틀봇 출시
2012 첫 번째 ROScon
2013 OSRF(Open Source Robotics Foundation)가 ROS 프로젝트 인수
2014년 ROS 인디고 출시
2016 ROS 키네틱 출시
2017 ROS 2.0 아덴트 출시
2018 ROS 멜로디 출시
2020 ROS Noetic 릴리스

ROS 설계 목표 및 기능

소프트웨어 재사용률 향상
분산
포인트 투 포인트 디자인
다국어 지원
단순화된 아키텍처와 고도의 통합
테스트하기 쉬움
대규모 애플리케이션
풍부한 구성요소 툴킷
무료 및 오픈 소스

ROS = 통신 메커니즘 + 개발 도구 + 응용 기능 + 생태계

ROS 시스템 구성

노드 - 소프트웨어 모듈
노드 관리자(ROS Master) - 제어 센터, 매개변수 관리 제공
주제 - 비동기 통신 메커니즘, 메시지 전송(Message)
서비스 - 동기식 통신 메커니즘, 요청/응답 데이터 전송

ROS 설치 및 초기 구성

설치 단계

설치 소스 설정
키 설정
설치(Desktop권장)
환경 변수 구성(모든 터미널 인터페이스에서 ROS 명령 사용을 용이하게 하기 위해)

ROS 공식 웹사이트 설치 가이드

wiki.ros.org/cn/ROS/Inst…

개인적으로 Docker에 설치해서 작업하는것도 권장합니다.

UX UI 디자인 차이점

By schoolhompy at 10월 09, 2023 No comments

UX UI 디자인 차이점

UX 디자인이란 무엇입니까?
UI 디자인이란 무엇입니까?
UX 디자이너는 주로 어떤 일을 하나요?
UI디자이너는 주로 어떤 일을 하나요?
UI와 UX의 주요 차이점과 유사점은 무엇입니까?
- UI와 UX의 주요 차이점:
- UI와 UX의 공통점:
UX 디자인과 UI 디자인 중 어느 쪽이 더 나은 전망을 갖고 있나요?

제품 개발 및 사용자 경험 디자인 분야에서 UX(사용자 경험)와 UI(사용자 인터페이스) 디자인은 자주 언급되는 두 가지 개념으로, 그 본질은 제품의 사용자 문제를 해결하는 것이지만 실제 작업 시나리오에서는 다양한 디자인 방향과 책임을 나타냅니다.

간단히 말하면, UX 디자인은 사용자가 제품이나 서비스와 상호작용할 때의 사용자 경험에 초점을 맞춰 로직과 프로세스 설정에 중점을 두는 반면, UI 디자인은 사용자가 직접 접촉하는 인터페이스에 초점을 맞춰 디자인 인터페이스의 모양과 레이아웃에 중점을 둡니다.

요즘에는 UX 디자인과 UI 디자인을 별도로 배치하는 회사가 많아지고 있습니다. UI란 정확히 무엇인가요? UX란 무엇인가요? UX와 UI 디자인의 차이점은 무엇입니까? 어느 포지션이 더 나은 전망을 갖고 있나요? 아직도 UX, UI 디자인에 대해 궁금한 점이 있다면 이 글을 읽어보시면 도움이 될겁니다.

UX 디자인이란 무엇입니까?

UX 디자인은 사용자 경험 디자인(User Experience Design)의 약자로 사용자 중심, 사용자의 요구, 기대, 행동을 이해하여 사용자에게 가치 있는 제품이나 서비스 경험을 창출하는 것을 강조합니다. 제품이 일관되고 쾌적하며 효율적인 사용자 경험을 제공할 수 있도록 UX 디자이너는 사용자 설문 조사, 사용자 인터뷰, 사용성 테스트 등 많은 사용자 조사를 수행하여 사용자의 문제점과 요구 사항을 이해해야 합니다. , 그리고 이러한 연구 결과를 바탕으로 제품 정보 아키텍처, 사용자 흐름 및 인터랙션 디자인 등을 개발하는 업무를 담당합니다.

UX 디자인이 무엇인지 보여주는 예입니다.

당신이 모바일 쇼핑 애플리케이션 소프트웨어를 사용하고 있고, 그 사용 목적이 필요한 상품을 빠르고 편리하게 구매하는 것이라고 가정하면, UX 디자인의 초점은 다음을 포함해야 합니다.

로그인/등록 절차: 이메일과 비밀번호만 입력하시면 됩니다.소셜 계정을 이용한 빠른 로그인도 지원합니다.간단하고 명확하게 빠르게 등록할 수 있습니다. \
제품 검색: 홈페이지 디자인에는 인기 제품과 특별 프로모션 정보가 표시되어 있으며, 스와이프하여 검색할 수 있으며 제품이 한눈에 명확합니다. \
상품 분류 및 검색 기능 : 직관적이고 효율적이며, 키워드 입력만으로 구매하고 싶은 상품을 빠르게 찾을 수 있습니다. \
장바구니에 상품 담기 : 장바구니 담기 버튼을 눌러 상품을 추가하면, 장바구니 페이지에 선택한 상품과 총 가격이 명확하게 표시되어 구매수량 확인 및 수정이 용이합니다. \
주문 결제: 신용카드, 교통카드계, 온라인 카드 결제 등 다양한 결제 방법을 지원하므로 자신에게 맞는 결제 방법을 쉽게 선택할 수 있습니다. \

위의 예에서 볼 수 있듯이 쇼핑 애플리케이션은 사용자의 요구와 기대에 초점을 맞추고 등록 및 로그인 프로세스를 단순화하며 직관적인 인터페이스와 효율적인 운영을 제공하고 다양한 결제 방법을 지원하여 사용자가 쇼핑 프로세스를 빠르고 행복하게 완료할 수 있도록 합니다.

이러한 사용자의 요구에 집중하고 쾌적한 사용자 경험을 제공하는 디자인 컨셉이 UX 디자인의 핵심입니다. 이러한 우수한 사용자 경험을 통해 쇼핑 애플리케이션은 더 많은 사용자를 유치하고 사용자 유지 및 전환율을 향상시키며 상업적 성공을 달성할 수 있습니다.

UI 디자인이란 무엇입니까?

UI 디자인은 User Interface Design의 약어로, UX 디자이너가 정의한 사용자 경험을 사용자가 직접 인지하고 조작할 수 있는 인터페이스로 변환하는 데 중점을 두고 있습니다. UI 디자이너는 제품이 아름답고 사용하기 쉬우며 일관된 인터페이스 스타일을 갖도록 제품의 모양, 스타일 및 시각적 요소를 디자인하는 일을 담당합니다. 여기서는 UI 디자인이 무엇인지 설명하기 위해 쇼핑 모바일 애플리케이션 소프트웨어를 사용합니다.

홈 페이지 레이아웃: 홈 페이지의 레이아웃과 프리젠테이션은 인기 상품, 판촉 정보, 추천 상품 카테고리를 명확하게 표시할 수 있습니다. \
상품 목록: 상품 카테고리 페이지에서는 상품명, 가격, 사진 등이 목록이나 그리드 형태로 표시되어 직관적으로 상품을 찾아볼 수 있습니다. \
상품상세정보 : 상품상세페이지에는 상품설명, 사양, 리뷰 등이 합리적으로 정리되어 있으며 눈길을 끄는 장바구니나 구매버튼이 있습니다. \
장바구니 : 장바구니 페이지의 레이아웃은 간결하고 명확하며 선택한 상품과 가격이 명확하게 나열되어 있으며, 수량 수정 및 상품 삭제 기능을 제공하여 장바구니에 담긴 상품을 쉽게 관리할 수 있습니다. \
결제 페이지: 결제 페이지 디자인은 직관적이고 안전하며, 사용자가 구매 프로세스를 완료할 수 있도록 사용자가 선택할 수 있는 다양한 결제 방법을 제공합니다. \

요약하면 UI 디자인에는 홈페이지 레이아웃, 제품 목록, 제품 세부 정보, 장바구니, 결제 페이지 등과 같은 많은 측면이 포함됩니다.

UI 디자이너는 합리적인 레이아웃, 시각적 요소, 인터랙티브 디자인을 통해 직관적이고 아름답고 사용하기 쉬운 사용자 인터페이스를 제공하여 사용자가 쇼핑 과정에서 즐거운 경험을 할 수 있도록 합니다.

UI 디자인은 그래픽 디자인의 범주에 포함됩니다… 브랜드 아이덴티티 디자인 등 경우에 따라 둘 사이에 차이가 있기는 하지만, 기본적으로 UI 디자인과 그래픽 디자인은 서로 다른 디자인 분야입니다. UI 디자인에 비해 그래픽 디자인은 포스터, 광고, 잡지, 명함, 포장 디자인 등 디지털이 아닌 제품의 디자인을 포괄하는 더 넓은 디자인 분야입니다. 그래픽 디자이너는 특정 메시지를 전달하고 관점을 표현하거나 청중의 공감을 불러일으키기 위해 보다 광범위하게 작업하고 다양한 매체로 시각적 작품을 만듭니다. 그래픽 디자인은 인쇄, 광고, 전시, 멀티미디어 등 다양한 분야에서 활용될 수 있습니다. 간단히 말해서, UI 디자인은 디지털 제품을 위한 사용자 인터페이스를 만드는 데 초점을 맞춘 그래픽 디자인의 하위 범주일 수 있습니다.

UX 디자이너는 주로 어떤 일을 하나요?

UX 디자이너는 사용자 경험 디자이너를 말하며, 사용자와 제품, 서비스 간의 상호작용 경험을 최적화하고 개선하는 일을 담당하는 전문인입니다. UX 디자이너는 제품이나 서비스와 상호 작용할 때 사용자의 느낌, 반응, 안정성에 중점을 두고 즐겁고 효과적이며 의미 있는 사용자 경험을 만들기 위해 노력합니다.

실제 디자인 작업에서 UX 디자이너는 프로토타입 도구(이를 목업설계라고도합니다.)를 사용하여 제품의 대화형 흐름과 사용자 인터페이스를 제시하는 대화형 프로토타입과 와이어프레임을 만들어야 합니다. 또한 UX 디자이너는 사용자 설문 조사 소프트웨어 및 사용자 테스트 플랫폼과 같은 사용자 연구 도구를 사용하여 사용자 피드백 및 행동 데이터를 수집하여 사용자 요구 사항을 더 잘 이해합니다.

전반적으로 UX 디자이너의 주요 책임은 다음과 같습니다.

사용자 조사: 대상 사용자와 소통하고 사용자 행동을 관찰 및 분석하며 사용자의 요구 사항과 사용 습관에 대한 심층적인 이해를 얻습니다.
정보 아키텍처: 사용자가 필요한 정보를 쉽게 찾을 수 있도록 제품의 전체 구조와 구성을 설계합니다.
사용자 프로세스 설계: 사용자가 원활하고 효율적으로 작업을 완료할 수 있도록 제품 내 사용자 프로세스를 개발합니다.
인터랙션 디자인: 인터페이스 요소, 애니메이션 효과, 반응 동작 등을 포함하여 사용자와 제품 간의 상호 작용을 디자인합니다.
사용성 테스트: 테스트 및 피드백을 통해 사용자 요구 사항을 충족하도록 제품을 지속적으로 개선합니다.

UI디자이너는 주로 어떤 일을 하나요?

UI 디자이너는 모바일 애플리케이션, 웹사이트 등 디지털 제품의 사용자 인터페이스 디자인을 담당하는 사용자 인터페이스 디자이너를 말합니다. 그들은 사용자 경험을 시각적 표현으로 변환하고 직관적이고 아름답고 사용하기 쉬운 인터페이스를 만들어 즐거운 사용자 경험을 제공하는 데 중점을 둡니다.

실제 디자인 작업에서 UI 디자이너는 주로 UI 디자인 도구를 사용하여 충실도가 높은 인터페이스 디자인을 빠르게 만들고 제품의 시각적 효과를 최적화하기 위해 이미지 편집 및 처리를 수행합니다. 또한 UI 디자이너는 아이콘, 일러스트레이션 및 기타 벡터 그래픽을 만들 때 벡터 그래픽 편집을 사용합니다. 전반적으로 UI 디자이너의 주요 책임은 다음과 같습니다.

시각적 디자인: 제품 외관의 아름다움과 일관성을 보장하기 위해 색상, 아이콘, 글꼴 등을 포함하여 제품의 전반적인 시각적 스타일을 만듭니다.
인터페이스 레이아웃: 정보가 명확하게 표시되고 이해하기 쉽도록 제품 인터페이스의 레이아웃과 레이아웃을 디자인합니다.
아이콘 디자인: 사용자의 작업 효율을 높이기 위해 인식하고 이해하기 쉬운 아이콘을 디자인합니다.
대화형 효과: 인터페이스 요소에 대한 애니메이션 효과를 만들어 사용자 경험과 인터페이스 피드백을 향상합니다.
UI 사양: 다양한 인터페이스에서 제품 일관성을 보장하기 위해 UI 디자인 사양 및 스타일 가이드를 개발합니다.

UI와 UX의 주요 차이점과 유사점은 무엇입니까?

UX와 UI의 차이점

앞선 소개를 통해 UI(User Interface)와 UX(User Experience)가 상호 연관되어 있지만 분명히 다른 디자인 분야라는 점을 누구나 쉽게 이해할 수 있을 것입니다.

UI와 UX의 주요 차이점:

다양한 정의 UX 디자인은 사용자 경험에 초점을 맞춰 제품과 상호 작용할 때 사용자의 감정과 만족을 강조하는 반면, UI 디자인은 사용자 인터페이스의 모양과 레이아웃에 중점을 두고 사용자 경험을 시각적 형태로 변환하는 방법에 중점을 둡니다.

UI 디자인: UI는 디지털 제품(예: 모바일 애플리케이션, 웹사이트 등)에서 사용자와 제품 간의 대화형 인터페이스를 의미합니다. 색상, 아이콘, 버튼, 타이포그래피 등 인터페이스의 시각적 성능에 중점을 두고 직관적이고 아름답고 사용하기 쉬운 인터페이스를 제공합니다.
UX 디자인: UX는 제품이나 서비스와 상호 작용할 때 사용자가 느끼는 감정, 지각, 인지, 행동 등을 포함한 포괄적인 경험을 의미합니다. 사용자가 제품이나 서비스를 사용할 때 즐거운 경험을 할 수 있도록 사용자의 느낌, 반응, 만족에 중점을 둡니다.

설계의 관점이 다릅니다. UX 디자이너는 제품의 전반적인 아키텍처와 사용자 흐름에 더 중점을 둡니다. 그들은 사용자 요구를 이해하고 제품이 이러한 요구를 충족하는지 확인해야 합니다. UI 디자이너는 세부 사항에 주의를 기울이고 인터페이스의 시각적 성능과 미관성에 중점을 둡니다.

UI 디자인: 인터페이스 요소의 스타일과 레이아웃은 물론 대화형 요소의 디자인과 반응 동작을 포함한 시각적 표현과 인터페이스 디자인에 중점을 둡니다.
UX 디자인: 제품이나 서비스가 즐겁고 효과적이며 의미 있는 사용자 경험을 제공할 수 있도록 사용자 조사, 정보 아키텍처, 사용자 프로세스 디자인, 상호 작용 디자인 등 다양한 측면을 다루는 사용자 경험의 포괄적인 최적화에 중점을 둡니다.

다양한 책임: UX 디자이너는 주로 사용자 조사, 정보 아키텍처 및 상호 작용 디자인을 담당하고, UI 디자이너는 주로 시각 디자인, 인터페이스 레이아웃 및 아이콘 디자인을 담당합니다.

UI 디자이너: 좋은 시각적 경험을 제공하기 위해 디지털 제품의 인터페이스 모양을 디자인하는 일을 담당합니다. 인터페이스가 아름답고 사용하기 쉽도록 사용자 인터페이스의 레이아웃, 색상, 아이콘, 글꼴 등에 중점을 둡니다.
UX 디자이너: 사용자와 제품 또는 서비스 간의 상호 작용 경험을 최적화하는 일을 담당합니다. 그들은 사용자의 요구, 행동 및 심리에 중점을 두고 사용자 연구, 정보 아키텍처, 사용자 프로세스 디자인 및 기타 작업을 통해 즐겁고 효과적이며 의미 있는 사용자 경험을 만듭니다.

UI와 UX의 공통점:

UX/UI 가 엄연히 다른 작업임에도 불구하고 유저 환경에 가장 가까운 요소이기 때문에 작업시에 일부분 공통점을 가지게 됩니다. 이러한 공통점때문에 의외로 많은 회사들이 UX/UI 를 하나의 작업이라고 잘못 판단하고 UX 설계자에게 UI 디자인작업까지 하도록 요구하거나 그 반대로 요구하는 경우가 종종 있습니다.

타겟 사용자는 일관성이 있으며, UI 및 UX 디자인은 사용자 중심으로 사용자 요구 사항을 충족하고 사용자 경험을 향상시키는 데 중점을 둡니다. 인터페이스를 디자인하든, 경험을 최적화하든, 사용자 기대에 부응하는 제품 경험을 제공하려면 대상 사용자의 요구와 심리를 깊이 이해해야 합니다.
협업 UI 디자인과 UX 디자인은 상호 연관되어 있으며, 우수한 사용자 인터페이스는 좋은 사용자 경험을 기반으로 해야 하며, 사용자 경험의 구현은 우수한 인터페이스 디자인과 분리될 수 없습니다. 따라서 UX 디자이너와 UI 디자이너는 일반적으로 사용자 조사 결과가 인터페이스 디자인 구현과 일치하는지 확인하기 위해 긴밀하게 협력해야 합니다.
사용자 중심의 UI와 UX 디자인은 모두 사용자 중심으로 사용자 요구를 충족하고 사용자 경험을 향상시키는 데 중점을 둡니다. 인터페이스를 디자인하든 경험을 최적화하든, 이는 사용자 기대와 행동을 기반으로 해야 합니다.

UX 디자인과 UI 디자인 중 어느 쪽이 더 나은 전망을 갖고 있나요?

전망 측면에서 볼 때, UX 디자이너이든 UI 디자이너이든 개발 전망은 실제로 꽤 좋습니다. 디지털 제품이 지속적으로 등장하면서 사용자 경험과 인터페이스 디자인이 점점 더 중요해지고 있으며, 기업과 조직은 이 두 분야에 대한 투자에 점점 더 많은 관심을 기울이고 있습니다.

UX 디자이너는 제품 개발 초기 단계에서 중요한 역할을 합니다. 우수한 사용자 경험은 사용자 충성도를 높이고, 사용자 만족도를 높이며, 제품 평판 확산을 촉진할 수 있습니다. 따라서 심층적인 사용자 연구 역량과 사용자 중심의 디자인 컨셉을 갖춘 UX 디자이너에 대한 선호도가 높습니다.

UI 디자이너는 우수한 사용자 경험을 시각적 성능으로 변환하는 역할을 담당하며, 이는 제품의 아름다움과 사용 편의성에 직접적인 영향을 미칩니다. 매력적인 인터페이스는 사용자의 끈적임과 사용 의욕을 높여 제품의 시장 경쟁력을 높일 수 있습니다. 따라서 시각 디자인과 크리에이티브에 능숙한 UI 디자이너도 시장에서 선호되고 있습니다.

따라서 UX 디자이너이든 UI 디자이너이든 지속적인 학습과 기술 향상을 바탕으로 성장하는 이 분야에서 성공할 수 있는 기회가 있습니다. 훌륭한 UI 디자이너, UX 디자이너가 되고 싶다면 개인적인 관심과 재능은 물론, 디지털 제품 디자인 분야에 대한 열정과 더 나은 취업 기회를 갖고 계속 열심히 공부하고 실천하는 것이 관건입니다.

KMM IOS COMPOSE ALPHA

By schoolhompy at 10월 08, 2023 android, compose, ios, Jectpack, KMM No comments

KMM IOS COMPOSE ALPHA

iOS용 Compose Alpha가 공식적으로 출시

iOS용 Compose Alpha가 공식적으로 출시

iOS용 Jetpack Compose Multiplatform이 드디어 공식적으로 알파 지원을 출시했습니다.

https://github.com/JetBrains/compose-multiplatform-ios-android-template/#readme

이제까지는 IOS는 주로 도메인의 미지니스 로직에서만 사용하였는데요.
이제 UI부분에서도 사용할수 있게 되어 갑니다.
compose-jb는 공식적으로 compose-multiplatform으로 이름이 바뀌었고 템플릿 프로젝트는 다양한 플랫폼에 제공되었습니다.

또한, iOS 지원에 이어 compose-multiplatform1.4.0 버전이 출시되었는데 , 즉 iOS를 경험하고 싶은 분들은 1.4 버전에서 사용해 보아야 하며 ,Android Studio Flamingo 새 버전과 마찬가지로 본격적으로 시작될 예정입니다. JDK 17을 지원합니다.

이제 공식적으로 Kotlin을 사용하여 유사한 iOS UI를 작성할 수 있으며 Swift-UI와 유사한 개발 경험을 가질 수 있습니다. (잘가. 복잡한 XML). 기존 Compose 프로젝트를 iOS 애플리케이션으로 보다 쉽게 컴파일하여 UI를 구현할 수도 있습니다.

현재 iOS 지원은 아직 알파 단계로, 베타 단계에 이르지 못한 경우 API 및 호환성에 일부 변화가 있을 수 있으나, 정식 출시된 버전에서는 이미 동일한 Kotlin 코드를 사용하여 컴파일하는 경험을 하실 수 있습니다.

KMM(Kotlin Multiplatform Mobile)은 원래 iOS 플랫폼을 지원하고, Compose Multiplatform은 KMM을 기반으로 구축되었기 때문에 블루투스, 카메라 등 iOS 네이티브 API를 지원하는 데에는 큰 문제가 없을 것이며, 동시에 이제 임베디드[MKMapView 와 같은 기본 UI 보기 도 지원됩니다 .

CocosPods 등이 사용가능한 환경(주로 맥) 에서 빌드가 가능하며 이러한 환경체크를 검사는 KDoctor를 이용하여 가능합니다.
, KMM에서 필요한 명령줄 도구이므로 KDoctor를 먼저 brew install kdoctor설치 해야 하며 동시에 KDoctor는 빌드 환경이 정상적인지 여부도 감지할 수 있습니다.

다음으로, compose-multiplatform-ios-android-template 을 사용하면 Compose Multiplatform 프로젝트에 androidApp, iosApp, shared라는 세 가지 모듈이 포함됩니다. 여기서 shared는 이름에서 알 수 있듯이 공유 Kotlin 모듈입니다.

현재 Android 스튜디오의 iOS 시뮬레이터에서 Compose Multiplatform을 실행하려면 iosApp 실행 구성을 선택 해야 하며 주로 해당 실행 대상을 선택해야 합니다.

실제 컴퓨터에서 실행해야 하는 경우 먼저 iOS 개발자 계정이 있어야 하며 Xcode에 로그인해야 합니다.

귀하의 계정에서 정보를 얻으십시오TEAM_ID
Xcode에 등록된 iOS 장치인 실제 컴퓨터에 연결합니다.

또한 터미널에서 실행하여 kdoctor --team-ids자연스러운 팀 ID 목록을 얻을 수 있습니다.

당연한 얘기지만 Apple 개발자 등록이 되어 있어야 됩니다.

iOS를 실행하기 전, 위에서 언급한 설정이 필요하며TEAM_IDiosApp/Configuration/Config.xcconfig , 파일 아래의 설정을 열고 TEAM_ID안드로이드 스튜디오에서 프로젝트를 다시 열면 iosApp실행 중인 구성에서 등록된 iOS 디바이스를 확인할 수 있습니다.

iOS용 Compose Multiplatform이 공식적으로 출시되는 날을 기대해 보겠습니다.

Android Jet Compose JankStats

By schoolhompy at 10월 07, 2023 No comments

Android Jet Compose JankStats

Android Jetpack Compose JankStats

Android Jetpack Compose JankStats

Android Jetpack Compose 를 사용하다 보면 UI가 화면 싱크타임에 걸쳐지게 되어 제대로 그려내지 못하는 경우가 있습니다. 이를 Jank라고 하는데 JankStats 라이브러리를 이용하면 Compose에서 이러한 JankStats를 개발로그에 출력하고 결과보고서를 작성해 줌으로서 개발자가 UI를 좀더 개선할수있도록 도와줍니다.

Jank 는 일반적으로 애플리케이션 성능 저하를 의미하며, 이로 인해 프레임 손실, UI 애니메이션 중단, 사용자 경험 저하 등 이 발생할 수 있습니다.

새로운 JankStats 라이브러리는 개발자가 삭제된 렌더 프레임에 대한 보고서(“버벅거림”)를 포함하여 앱 UI의 성능 문제를 추적하고 분석하는 데 도움이 됩니다.

JankStats는 기존 Android 플랫폼 API(FrameMetrics)를 기반으로 구축되었지만 API 레벨 16과 호환됩니다.

사용법은 https://developer.android.com/topic/performance/jankstats
에 있습니다.

Build에 아래와 같이 추가합니다.

dependencies {  implementation "androidx.metrics:metrics-performance:1.0.0-alpha03"  }

subprojects { 
	tasks.withType(org.jetbrains.kotlin.gradle.tasks.KotlinCompile).configureEach { 
	kotlinOptions {if (project.findProperty("myapp.enableComposeCompilerReports") == "true") { 
		freeCompilerArgs += ["-P","plugin:androidx.compose.compiler.plugins.kotlin:reportsDestination=" + project.buildDir.absolutePath + "/compose_metrics"] 
		freeCompilerArgs += ["-P","plugin:androidx.compose.compiler.plugins.kotlin:metricsDestination=" + project.buildDir.absolutePath + "/compose_metrics"]}
		}
	} 
}

그리고 그래이들 빌드를 아래처럼 수행합니다.

 ./gradlew assembleRelease -Pmyapp.enableComposeCompilerReports=true --rerun-tasks

빌드를 하게되면 build 하위에 compose_metric 이라는 폴더가 생가고 xxx_release-classes.txt, xxx_release-composables.csv,xxx_release-composables.txt,xxx_release-module.json,이 생성되고 각 콤포져블 함수에 대새 Restatable과 Skippable 이라는 태그가 붙게됩니다.
Skippable을 늘림으로서 불필요하게 화면 갱신이 되지않도록(도넛홀효과) 하는게 UI개선의 핵심입니다.

{ 
"skippableComposables": 64, 
"restartableComposables": 76, 
"readonlyComposables": 0, "totalComposables": 76 
}

Activity 에서는 다음과 같이 사용할수가 있습니다.

val jankFrameListener = JankStats.OnFrameListener { frameData -> 
Log.v("JankStatsSample", frameData.toString()) 
}
jankStats = JankStats.createAndTrack(window, listener)  jankStats.isTrackingEnabled = true


// 특정 화면에서의 Jank인지 구분하기 위해서는 PerformanceMetricsState.Holder 를 이용합니다.

@Composable 
fun rememberMetricsStateHolder(): PerformanceMetricsState.Holder {
  val viwe = LocalView.current
  return remember(view) {
    PerformaceMetricsState.getHolderForhierarchy(view)
  }
}

// 화면의 Composable에서 사용할때는 키를 지정해서 구분합니다. 
@Composable
fun JankyScreen() {
  val holder = rememberMetricsStateHolder()
  val key = "screenName"
  LaunchedEffect(holder) {
    holder.state?.putState(key, "JankScreen")
  }
  JankRaiseColumn()
}