iOS UI 디자인 용어 스터디
최근 회사에서 iOS개발자분께서 간단하게 기획자와 디자이너에게 iOS 용어 및 개념을 설명하는 시간이 있었다. 혼동하여 용어를 사용하거나 모르는 경우가 있었기에 굉장히 도움됐다. 평소 안드로이드가 좀 더 친숙했기에, 개발자분이 설명해줬던 내용과 더불어 스스로 공부하고자 내용을 덧대어 정리해보았다.
## iOS 용어
- View
- 뷰의 구성
1. 뷰는 계층을 이룸. 계층에 속한 뷰는 부모 뷰의 영향을 받음.
2. 뷰는 상자 단위
3. 비슷한 애들은 묶는다고 생각하면 좋다.- Point vs. Pixel
- Navigation bar
- Tab bar
- Modal
- Alert vs Action sheet
- Popup
- Safe area
- Intrinsic content
- Auto layout
- Reusable view
iOS용어
1. View
화면에서 그려지는 부분들을 view라고 한다. 코드로 view를 짜다보면 시각적으로 확인하기가 힘들기 때문에, 어떻게 빌드되는지 보여주는 툴인 Interface builder라는 것이 iOS에는 존재한다. 안드로이드에서는 xml이 이와 같은 역할을 한다.
a. View의 구성
View는 사용자가 텍스트, 그래픽, 애니매이션 및 상호 작용 요소와 같이 앱에 표시되는 기본 콘텐츠를 포함한다. 뷰를 사용하면 스크롤, 삽입, 삭제 및 정렬과 같은 동작을 사용할 수 있다.
iOS에서 뷰는 계층을 이루고 있다. 그렇기에 뷰끼리 서로 영향을 끼칠 확률이 많다. 계층에 속한 뷰는 부모 뷰의 영향을 받는다.
그러므로 같이 가져갈 컴포넌트들은 박스로 모아주거나 요소들을 컴포넌트로 만들어 가이드로 전달하는 것이 좋다. (ex. 터치영역을 포함한 버튼 사이즈 등)
2. Point vs Pixel
- Point: 안드로이드의 dp처럼 외부적 요인에 자유로운 공용 단위
- Pixel: 해상도 화면별로 최소한으로 색을 표현할 수 있는 단위
예를 들어, 픽셀값이 non-retina에서는 1개가 필요하다면 retina에서는 총 4개의 픽셀값이 필요하다. 이로 인해 가로 세로가 2배가 커져 총 4배(4x)가 된다.
픽셀이 논레티나에서 레티나로 갔을 시에는 값이 반으로 줄어든다. 픽셀은 절대적인 값이기 때문이다. 그로 인해 생긴 값이 point이다. 어느 기기에서든 똑같이 보일 수 있게 만든 단위이다.
*Tip: pt의 숫자는 소수점으로 떨어지지 않고, 정수로 맞춰주는 것이 좋다.
3. Navigation Bar
네비게이션 바(Navigation Bar)는 안드로이드에서 앱 바(App Bar)와 동일하다. 위치로는 상태 바(Status bar)아래에 위치한다.
기본적으로 iOS에서 bar라는 명칭이 들어가는건 사람들에게 앱의 어느 위치에 있는지 알려주고 탐색 기능을 제공하며, 정보를 전달하기위한 버튼 혹은 요소가 포함되어있음을 뜻한다.
*Tip: 네비게이션 바는 커스터마이징이 힘들다고 한다. 왠만하면 iOS 기본 규격에 맞는 스타일대로 하는 것을 지향한다.
4. Tab Bar
앱의 맨 하단에 표시되는 것을 탭 바라고 부른다. 일반적으로 앱에서 정보를 구성하는데 탭 바를 사용한다. 안드로이드에서는 Bottom Navigation이라고 부른다.
5. Modal
Modal은 화면이 전환되는 트렌지션 중 하나이다. 화면에서 이목을 집중해야 하는 다른 화면을 위로 띄워 표현하는 방식이다. 그래서 모달은 정보의 흐름을 가지고 화면이 이동되는 것이 아닌 이목을 끌어야하는 화면에서 사용하기에 되도록 단순하고 빠르게 처리할 수 있는 내용을 표현하는 것이 좋다.
안드로이드에서는 Dialog라는 요소로 모달 사용을 정리한다. 종류는 Alert dialog, Simple dialog, Confirmation dialog, Full-screen dialog가 있다.
6. Alert vs Action Sheet
- Alert: 현재 상황에 맞는 앱이나 디바이스, 혹은 피드백에 대한 중요한 정보가 나타나는 화면이다. 최대한 간결하게 보여줘야하는 화면이다.
- Action Sheet: 액션 시트는 현재 상황과 연관되어 보여지는 2~3개의 선택지들이 보여지는 특정 스타일의 alert이며, 주로 아래에서 위로 올라오는 트렌지션을 갖고 있다. 안드로이드에서는 Bottom Sheet라고 부른다.
7. Popup
팝업(Popup)웹에서 나온 개념이다. 작은 새로운 윈도우를 띄우는 기능을 뜻하며, 모바일에서 이 용어를 쓰기에는 너무 포괄적인 개념이기에 해당 OS에 맞는 정확한 용어를 정의해서 말하는게 맞다.
8. Safe area
아이폰X가 생기면서 추가적으로 상/하단 라운드 영역이 존재하여 콘텐츠가 가려지지 않고 안정적으로 보일 수 있는 화면을 Safe area라고 부른다.
9. Intrinsic Content
해당 view가 가진 컨텐츠에 따른 크기를 말한다. 예를 들어, 이미지를 표현 할 수 있는 image view가 있다면 그 이미지의 크기가 해당 view의 intrinsic content size가 된다. 즉, 컨텐츠 사이즈에 따라 자동으로 줄었다가 커지는게 가능한 개념이다. 안드로이드에서는 wrap_content가 이와 같은 역할을 한다.
10. Auto Layout
view간의 기준점을 가지고 레이아웃이 해상도에 따라 자동으로 늘어나는 것을 뜻한다. 기기에 따른 대응을 해야한다면, 어느 부분을 늘리고 줄일건지에 대한 기준점을 세워야 한다.
11. Reusable view
화면이 안보일 때 데이터만 새로 입혀서 보여주는 view를 뜻한다. 셀이나 리스트 처럼 반복적인 형태에서 많이 사용된다.
