앱 및 웹 기술의 UI 기술에 대하여
- MAC & iOS
- 2023. 1. 25.
iOS : AutoResizing, AutoLayout, SwiftUI, UIKit
iOS 의 선언형 UI 로는 Swift UI 가 있다.
가장 일반적인 것은 스토리보드를 이용하는 것.
스토리보드로 하는 것을 숙지했다면 iOS 에서 기본 제공하는 코드로만 UI 짜는 방법을 학습하면 된다.
그리고 스냅킷 같은 써드파티는 검색하면서 컨셉 알아가면서 사용하면 된다.
스토리보드 vs 코드 vs 스냅킷... 이런 쉐어는 거의 3:3:3 으로 비슷하다. 프로젝트 별로 사용 여부에 따라 따라가면 된다.
스토리보드를 아예 안 쓸 수도 있고 화면전환만 안쓸 수도 있고 오토레이아웃을 안 쓸 수도 있고 모든 것이 선택사항이다.
스토리보드를 안쓰면 코드 타이핑 할 때 마다 디자인이 화면에 반영이 안되서 보고 싶을 때마다 빌드해서 실행시켜야 할까?
안드로이드는 코드로 레이아웃 짜면 바로 디자인 화면에 반영되서 좋은데... 스위프트 UI 를 좀 사용하면 (프리뷰...) 코드로 짤 때도 UI 미리보기가 가능하다고 한다.
오토레이아웃이라는 레이아웃 방식이 아래의 안드로이드 진영의 레이아웃 방식과 비교해서도 더 좋아 보이기도 한다.
웹 진영의 FlexLayout 보다도 좋아 보인다. iOS 쪽도 FlexLayout 이라는 React Native 용으로 페북에서 만든 yoga 를 사용한 플렉스 레이아웃 용 라이브러리도 존재한다. 뭐든 선택사항이다. 플러터 쪽도 위젯방식인데 이 위젯도 플렉스 레이아웃 방식과 유사하다.
우선은 iOS 쪽은 오토레이아웃이 가장 기본적인 레이아웃 방식이므로 이를 사용하여 코드로도 UI 를 만들 수 있도록 하는 것이 중요하다.
iOS 의 화면 갱신. DispatchQueue.main 이 초당 60 프레임으로 화면을 매번 갱신하고 있다. 즉 16.6666...ms 마다 갱신한다.
그래서 GCD main 큐에서 sync 한 작업을 길게 하면 화면이 버벅이게 된다.
UIKit =>
CALayer (Core Animation Layer) => OpenGL, CoreGraphics => GPU
https://babbab2.tistory.com/53
ios 의 uikit 의 컨트롤들은 어떻게 화면에 갱신이 되나요?
렌더링 엔진: UIKit은 내부적으로 Quartz Core(CALayer)를 사용하여 렌더링을 처리합니다. CALayer는 화면에 그래픽을 그리고 애니메이션을 수행하는 역할을 합니다.
레이아웃 계산: UIKit은 화면에 표시되는 뷰들의 위치와 크기를 결정하기 위해 레이아웃 시스템을 사용합니다. 이 시스템은 뷰의 계층 구조를 기반으로 하여 뷰의 프레임을 계산하고 정렬합니다.
그리기: 뷰의 내용이나 배경을 그리기 위해 UIKit은 그래픽 컨텍스트(Graphics Context)를 사용합니다. 그래픽 컨텍스트는 뷰의 CALayer에 그래픽 요소를 그립니다. 그리기 작업은 화면에 실제로 보여지기 전에 메모리에서 수행되며, 갱신된 그래픽은 CALayer에 저장됩니다.
애니메이션: UIKit은 뷰의 애니메이션을 처리하기 위해 Core Animation을 사용합니다. 애니메이션은 뷰의 프로퍼티(예: 위치, 크기, 투명도 등)를 변경하여 부드러운 모션 효과를 제공합니다.
화면 업데이트: 모든 뷰와 레이어가 그려지면 UIKit은 최종적으로 화면에 결과를 렌더링합니다. 이 과정에서 CALayer의 컨텐츠가 실제 화면에 표시되고 사용자는 갱신된 내용을 볼 수 있습니다.
UILabel 의 text 에 값을 넣었을 뿐인데 어떻게 화면에 변경된 값이 보여지는건가요?
UILabel의 text 속성에 값을 설정하면, UIKit은 내부적으로 다음과 같은 프로세스를 거쳐서 변경된 값이 화면에 보여집니다.
텍스트 값 변경: UILabel의 text 속성에 새로운 값을 할당합니다. 이 값은 레이블에 표시될 텍스트 내용입니다.
레이아웃 재계산: UILabel은 내부적으로 자동으로 레이아웃 재계산을 수행합니다. 이는 UILabel의 크기가 변경될 수 있으므로, 텍스트의 길이와 레이블의 크기를 고려하여 새로운 텍스트에 맞게 레이아웃을 조정합니다.
텍스트 그리기: UILabel은 내부적으로 Core Text를 사용하여 텍스트를 그립니다. Core Text는 고급 텍스트 렌더링 엔진으로서 텍스트의 스타일, 폰트, 줄 간격 등을 고려하여 텍스트를 그립니다.
화면에 렌더링: 텍스트가 그려지면 UIKit은 해당 UILabel의 CALayer에 텍스트를 렌더링한 내용을 업데이트합니다. 이때, CALayer에 변경된 그래픽 내용이 저장됩니다.
화면 갱신: 화면은 일정 주기마다(대개는 60프레임/초) 갱신됩니다. 화면 갱신 주기에 따라 UIKit은 뷰 계층 구조를 통해 변경된 CALayer의 그래픽 내용을 화면에 표시합니다. 변경된 UILabel의 CALayer가 실제로 화면에 보여지며, 사용자는 변경된 텍스트 값을 볼 수 있습니다.
즉, UILabel의 text 값을 변경하면 내부적으로 레이아웃 계산, 텍스트 그리기, 그리고 화면 갱신이 이루어져서 변경된 값이 실제 화면에 표시됩니다.
Android: ConstraintLayout, LinearLayout, RelativeLayout, FrameLayout, TableLayout, ListView, GridView
9 patch
안드로이드의 선언형 UI 방식으로는 Jetpack Compose 가 있다.
Flutter: Widget, Row, Colum
ReactNative: FlexLayout
React: CSS (Responsive, %, flex, table, relative, absolute, fixed, margin, padding...), html DOM
ReactNative 와 React 의 화면 갱신.
가상 DOM
하나의 화면을 표현하기 위해서 여러개의 리액트 요소가 트리구조로 구성된다. (리액트 요소 트리, object 구조임)
jsx 코드가 객체 형태인 리액트 요소 트리로 구성된다.
프로그램 화면은 여러가지 이벤트를 통해서 다양한 모습으로 변화를 하는데 하나의 리액트 요소 트리는 시간에 따라 변화하는 화면의 한 순간을 나타낸다. 리액트에서 데이터 변경에 의한 화면 업데이트는 렌더 단계 와 커밋 단계 를 거친다.
렌더 단계는 실제 DOM 에 반영할 변경사항을 파악하는 단계이고 커밋 단계는 파악된 변경 사항을 실제 DOM 에 반영하는 단계이다.
렌더 단계에서는 변경 사항을 파악하기 위해서 가상 DOM 을 사용한다. 가상 DOM 은 리액트 요소로부터 만들어지고 리액트는 렌더링을 할 때마다 가상 DOM 을 만들고 이전의 가상 DOM 과 비교를 한다. 이는 실제 DOM 의 변경 사항을 최소화하기 위한 과정이다.
리액트 요소 트리가 실제 DOM 으로 만들어지기 위해서는 모든 리액트 요소의 타입 속성값이 문자열이어야 한다. ('div', 'h1', ... 과 같이.)
Counter 라는 컴포넌트 함수가 사용되었다면 우선 type 에 Counter 가 들어가더라도 그 다음으로 펼쳐지면 결국 type 이 문자열로 된 리액트 요소 트리가 된다. 가상 DOM 은 UI 에서 변경된 부분을 빨리 찾기 위한 개념이므로 이러한 과정에서 type 이 Counter 인 리액트 요소 트리 정보도 기억하고 있고 렌더링 효율성을 위해 이용한다. 이도 가상 DOM 의 일부라고 할 수 있다. 이와 같이 모든 리액트 요소의 타입 속성값이 문자열이 되어 실제 DOM 으로 만들어질 수 있는 리액트 요소 트리를 가상 DOM 이라 한다. 최초의 리액트 요소 트리로부터 가상 DOM 을 만들고 이전 가상 DOM 과 비교해서 실제 DOM 에 반영할 내용을 결정하는 단계를 렌더 단계라고 한다.
리액트는 화면을 업데이트할 때 이전의 가상 DOM 과 현재의 가상 DOM 을 비교해서 변경된 부분만 실제 DOM 에 반영한다.
렌더 단계는 ReactDOM.render 함수를 직접 호출하거나 또는 컴포넌트 내부에서 상태(state)값 변경 함수를 호출해서 시작될 수 있다.
현재까지는 ReactDOM.render 함수에 의해서 시작된 렌더 단계를 살펴보았고 상태값 변경 함수에 의해 수행되는 렌더 단계의 경우는 다음과 같다. render 함수가 실행되면서 최초의 렌더 단계가 실행되고 이렇게 만들어진 가상 DOM 이 실제 DOM 으로 만들어진다.
사용자의 버튼 클릭으로 컴포넌트의 상태값이 변경이 되었다면 두번째 렌더 단계가 실행이 되고 새로운 가상 DOM 이 만들어진다.
이때 이전의 가상 DOM 과 비교해서 변경된 부분만 실제 DOM 에 반영이 된다.
* 선언형 UI 란? mvvm, 컴포넌트는 액션 + 상태
플러터, React, SwfitUI, JetpackCompose 처럼 UI 를 선언형으로 구성하고 상태를 두어 상태의 변화가 UI 에 갱신을 하도록 해준다.
결국 mvvm 을 고도화 하면 선언형 UI 방식이 되는 것. 현재 기준 swift 의 경우 ios15 나 16 이상으로 올려야 SwiftUI 를 사용할 수 있기 때문에 호환 문제도 좀 있고 또한 UIKit 의 많은 기능을 아직 SwiftUI 가 모두 반영하고 있지 못하기 때문에 UIKit 에 mvvm 을 직접 구현하는 방식으로 하는 것이 최선의 방법으로 보인다. 과거방식이라고 표현해야할 지 모르겠지만 MVC 방식으로 구현하는 것은 안드로이드의 경우 xml 이나 코드로 UI 를 구성하고 Activity 가 그 객체가 되는데 이 액티비티가 결국 ViewController 의 역할이 되고 따로 데이타 부분은 Model 로 만들어 이벤트와 상태에 따라 VieController 인 Activity 쪽에서 적절히 다루어 UI 에 반영하거나 하는 식이 된다. iOS 의 경우도 거의 동일하게 xib 이든 스토리보드이든 코드로든 UI 구성하고 ViewController 가 그 객체가 되고 이 ViewController 에서 말 그대로 이벤트와 상태에 따라 모델이 필요하면 Model 을 만들고 적절히 처리하여 UI 에 반영하거나 하는 식이 된다. 결국 Activity, ViewController 부분에서 그냥 다 처리하고 모델로 생각되는 부분을 Model 로 따로 빼서 처리하는 방식이라고 보면된다. mvvm 의 경우 viewmodel 이라는 것을 추가하는데 이 viewmodel 이 뷰의 상태라고 보면 된다. UI 컴포넌트라는 것은 액션 + 상태 로 구성되어 있는데 이 중 상태이며 MVC 에서는 뷰컨트롤러에서 상태를 변경하여 반영하는 작업을 직접 했다고 치면 mvvm 에서는 vm 의 변화가 곧 UI 의 변경이 되어 MVC 의 ViewController 부분에서 코드가 복잡해질 수 있는 단점을 보완한 것이다.
In case of Animation (애니메이션) ...
About Navigation (화면이동) ...
[ UXUI 컴포넌트들 종류 참고 ]
https://lookerstudio.google.com/visualization
...
[ 웹 ]
네이버 토스트 UI
https://ui.toast.com/tui-auto-complete
시멘틱 UI
그리드뷰
https://www.ag-grid.com/react-data-grid/
그래프
토스트
https://fkhadra.github.io/react-toastify/introduction
Calendar
Carousel
Slide
Form
포틀릿
react-draggable
react-resizable
react-grid-layout
...
[ 모바일 ]
SideBar
TabBar
Navigation
Carousel
TableView
'MAC & iOS' 카테고리의 다른 글
| iOS 앱 소유권 이전 (1) | 2023.07.20 |
|---|---|
| OS (0) | 2023.07.20 |
| 재은씨 실전편 (0) | 2022.09.04 |
| 재은씨 기본편 (0) | 2022.09.04 |
| 모바일 앱 개발에 대하여 (0) | 2022.08.28 |