ios와 Android 각 해상도와 사이즈를 다루는 단위 및 개념에 차이가 있는데 주로 화면크기, 픽셀 밀도, 디스플레이 스케일링 방식을 다루는 방식 등이 있다.
1. iOS의 해상도 개념
iOS는 Point 단위를 사용하여 레이아웃을 설계하며, 이 단위는 논리적 단위로, 픽셀 밀도(DPI)에 따라 실제 픽셀 크기로 변환 된다. 개발자가 다양한 디바이스에서 동일한 레이아웃을 구현할 수 있도록 도와준다.
‘pt’단위를 사용 (iPhone 4부터 레티나 디스플레이가 도입되어, 물리적 해상도는 그대로 유지하면서 픽셀 수가 증가)
Point 단위: iOS의 UI 요소는 디바이스의 픽셀 밀도와 관계없이 일정한 크기를 유지함. (예를 들어, 1 Point는 고해상도 기기에서 더 많은 물리적 픽셀로 매핑된다)
예시:
@1x: 1 Point = 1 픽셀 (구형 iPhone)
@2x: 1 Point = 2x2 픽셀 (iPhone Retina 디스플레이)
@3x: 1 Point = 3x3 픽셀 (iPhone Plus 및 Pro 디스플레이)
2. Android의 해상도 개념
Android는 Density-independent Pixel (dp) 단위를 사용하며 이 단위는 iOS의 Point와 비슷하지만, 좀 더 유연하다. 화면 밀도를 기반으로 다양한 범주를 제공하며, 밀도 그룹에 따라 dp를 실제 픽셀로 변환한다. android는 이외에도 화면 크기(스몰, 노멀, 라지, 엑스트라 라지)와 해상도를 조합하여 다양한 디바이스에 최적화된 레이아웃을 구현함.
px보다는 'dp'단위를 사용 (px은 화면의 전체 화면 크기와 상관없이 지정한 수치만큼 표시되는 절대적 표시 단위)
dp 단위: Android는 화면의 물리적 크기와 픽셀 밀도를 조합하여 UI를 설계
기본적으로 1dp = 1px (160dpi 기준) (고밀도 디스플레이에서는 dp가 더 많은 픽셀에 매핑된다)
예시:
mdpi: 1dp = 1px (160dpi)
hdpi: 1dp = 1.5px (240dpi)
xhdpi: 1dp = 2px (320dpi)
xxhdpi: 1dp = 3px (480dpi)
xxxhdpi: 1dp = 4px (640dpi)
3. 주요 차이점
항목
ios
Android
단위
Points (pt)
dp (Density-independent Pixels)
기준 밀도
@1x, @2x, @3x
mdpi (160dpi 기준)
밀도 계산 방식
픽셀 배율(@2x, @3x)
DPI와 매핑(dp -> px)
리소스 제공 방식
@1x, @2x, @3x 리소스 폴더
mdpi, hdpi, xhdpi, xxhdpi 등
유연성
고정된 스케일링 방식
다양한 DPI와 해상도 조합 지원
4. 디자인 고려사항
iOS: 고정된 해상도와 배율(@2x, @3x) 리소스를 준비하고, Point 단위에 맞춰 디자인.
Android: 다양한 화면 크기와 DPI를 고려하여 dp 단위로 레이아웃을 설계하고, 적절한 크기의 리소스를 mdpi, hdpi, xhdpi 등의 폴더에 분리하여 제공
5. 각 단위의 관계와 차이점
1) px (Pixel)
의미: 물리적 픽셀 단위. 화면의 실제 디스플레이 픽셀을 나타냄
특징
디바이스 해상도에 따라 값이 다르게 보일 수 있음.
화면 밀도가 높을수록 픽셀이 더 작아져 동일한 px 값이 상대적으로 작게 보임.
고정된 단위로, 크기가 디스플레이 DPI에 따라 달라지지 않음.
사용 예: 이미지 작업, 픽셀 단위로 정밀한 크기 조정이 필요할 때.
2) dp (Density-independent Pixel)
의미: 밀도 독립적인 픽셀 단위. 화면 밀도에 따라 크기를 조정하는 논리적 단위로, 안드로이드에서 주로 사용
특징
기준: 160dpi에서 1dp = 1px.
DPI에 따라 dp는 다른 수의 물리적 픽셀로 변환되며, 크기가 일관되게 유지
사용 예: UI 요소 크기 및 마진, 패딩 등 레이아웃 설계.
3) sp (Scale-independent Pixel)
의미: 글꼴 크기를 조정하기 위한 단위. dp와 비슷하지만, 사용자 설정(글꼴 크기 조정)을 반영한다는 점에서 차이가 있음.
특징
기본적으로 dp와 동일하게 동작.
사용자가 시스템 글꼴 크기를 조정하면 sp 크기도 변경됨.
예: 글꼴 크기 200%로 설정 시, 16sp는 32px로 렌더링.
접근성을 고려하여 텍스트 크기 설정에 사용.
사용 예: 텍스트 크기 (android:textSize="16sp").
4) pt (Point)
의미: 인쇄 기반 단위로, 1pt = 1/72 인치. 주로 iOS 및 웹(특히 CSS)에서 사용
특징
화면의 실제 물리적 크기를 기준으로 렌더링됨.
고정된 물리적 크기를 원할 때 사용.
iOS에서는 pt를 논리적 단위로 사용하며, 픽셀 배율(@1x, @2x, @3x)에 따라 실제 픽셀로 변환.
부모 요소에 display: flex 또는 display: grid를 설정하면 그 안의 자식 요소들이 영향을 받음
[주요 목적]
1. Flexbox (Flexible Box)
1차원 레이아웃 시스템
주로 한 방향(행 또는 열)으로 아이템을 배치하고 정렬하는 데 사용.
요소 간의 정렬과 간격 조정을 유연하게 처리.
사용 예시: 버튼 그룹 / 네비게이션 바 / 간단한 정렬
정렬 및 정돈을 위해justify-content, align-items와 같은 속성을 사용
2. Grid (CSS Grid Layout)
2차원 레이아웃 시스템
행과 열을 동시에 관리할 수 있어 복잡한 레이아웃을 쉽게 구성할 수 있음.
정밀한 레이아웃 구성이 가능하며, 페이지의 전체 구조를 설계하는 데 적합.
사용 예시:웹 페이지 전체 레이아웃 / 대시보드 디자인 / 카드형 레이아웃
grid-template-rows와 grid-template-columns로 행과 열을 정의
[자동 정렬 및 공간 분배]
1. Flex
자식 요소들은 부모 컨테이너 내에서자동으로 배치
공간 분배는 자식 요소들의 내용과 크기에 따라 결정
내용 기반(content-based)으로 작동
2. Grid
부모 컨테이너에서 정확한 행과 열 크기를미리 정의할 수 있음
각 아이템이 특정 셀에 배치되도록 설정 가능
레이아웃 기반(layout-based)으로 작동
[장단점]
1. Flex
장점:간단한 레이아웃에서 빠르고 직관적으로 사용할 수 있음.
단점: 복잡한 2차원 레이아웃에는 적합하지 않음.
사용:요소가한 방향으로 나열되고, 정렬 및 간격 조정이 필요한 경우.
2. Grid
장점:복잡한 페이지 레이아웃을 설계할 때 강력한 기능 제공.
단점: 간단한 정렬 작업에는 불필요하게 복잡할 수 있음.
사용:행과 열을 모두 관리하며, 더구조적인 레이아웃이 필요한 경우
* Flex *
Flexbox는 1차원 레이아웃 도구로, 자식 요소를 가로(row) 또는 **세로(column)**로 정렬하고, 요소 간의 간격을 쉽게 조정합니다. display: flex;를 부모 요소에 설정하여 활성화된다
display: flex; /* 플렉스 컨테이너 활성화 */
flex-direction: row; /* 가로 방향 정렬 */
justify-content: space-around; /* 가로 간격 균등 분배 */
align-items: center; /* 세로 가운데 정렬 */
gap: 10px; /* 요소 간 간격 */
display: flex와 함께 사용할 수 있는 주요 속성
flex-direction 자식 요소를 배치할 방향을 설정
row (기본값): 요소를 가로로 배치
row-reverse: 요소를 가로로 배치하되, 순서를 뒤집음.
column: 요소를 세로로 배치
column-reverse: 요소를 세로로 배치하되, 순서를 뒤집음
justify-content : 자식 요소의 가로 정렬(주 축) 방식을 설정
flex-start (기본값): 왼쪽 정렬
flex-end: 오른쪽 정렬
center: 가운데 정렬
space-between: 양 끝을 맞추고 요소 간 간격 균등
space-around: 요소 간 간격 균등 + 바깥 간격 포함
space-evenly: 요소 간 간격을 완전히 균등하게 분배
gap : 자식 요소 간의 간격을 설정
길이 값(px, %, em 등): 간격 크기 설정
align-items : 자식 요소의 세로 정렬(교차 축) 방식을 설정
stretch (기본값): 자식 요소를 컨테이너 높이에 맞게 늘림
flex-start: 위쪽 정렬
flex-end: 아래쪽 정렬
center: 세로 가운데 정렬
baseline: 텍스트 기준선을 기준으로 정렬
flex-wrap : 요소가 컨테이너를 벗어날 때 줄바꿈 여부를 설정
nowrap (기본값): 줄바꿈 없음
wrap: 줄바꿈 허용
wrap-reverse: 줄바꿈 허용, 순서를 뒤집음
* Grid *
Grid는 2차원 레이아웃 도구로, 요소를 행(row)과 열(column)에 배치하며 복잡한 레이아웃을 간단히 구현하고
display: grid;를 부모 요소에 설정하여 활성화된다.
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid; /* 그리드 컨테이너 활성화 */
grid-template-columns: 100px 1fr 2fr; /* 열 크기 설정 */
grid-template-rows: 50px auto; /* 행 크기 설정 */
gap: 10px; /* 셀 간 간격 */
}
.header {
grid-column: 1 / 4; /* 첫 번째 열부터 네 번째 열 앞까지 차지 */
background-color: lightgreen;
}
.sidebar {
grid-column: 1 / 2; /* 첫 번째 열만 차지 */
grid-row: 2 / 3; /* 두 번째 행만 차지 */
background-color: lightblue;
}
.main {
grid-column: 2 / 4; /* 두 번째 열부터 네 번째 열 앞까지 차지 */
grid-row: 2 / 3; /* 두 번째 행만 차지 */
background-color: coral;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="main">Main Content</div>
</div>
</body>
</html>
사용자 테스트(User test)와 사용성 테스트(Usability test)가 혼용되어있으며, 모두 축약되어 사용되고 있다.
1. 사용자 테스트
타겟 유저에게 아이디어가 필요하다는 것을 어떻게 확신할 수 있을까..
프로덕트의 잠재 사용자들에게 해당 아이디어가 필요한 지에 대한 근거를 찾게 해준다. 뿐만 아니라 사용자 테스트를 통해 잠재 사용자들에 대한 깊이 있는 이해가 가능해진다. (사용자의 니즈를 파악할 수 있게된다)
ex. 비오는 날 교통 체증으로 인해 택시를 잡을 수 없는 상황이라면 버스정류장/택시승강장/건물 출구로 가서 클릭 한번으로 택시를 탈 수 있는 앱이 필요한지 묻는 것. 즉, 아이디어나 앱 유용성을 테스트하는 것이다! 사람들이 앱을 어떨 때 사용하고 무엇을 필요로 하는지를 본다.
2. 사용성 테스트
사용자 테스트를 통해 아이디어의 필요성을 확인하고 프로토 타입을 제작하였는데 과연 사람들이 이 서비스를 잘 사용할 수 있는지 어렵거나 복잡하지 않을지 고민될때 사용
사용자들이 서비스를 목적에 맞게 사용할 수 있는지 알게 해줌, 사용 중 어려운 점은 없는지, 복잡하지는 않은지 테스트를 통해 알게됨으로써 서비스가 더욱 개선되고 발전되도록 즉 더 사용자 친화적일 수 있도록 도와준다.
ex. 택시잡는 앱을 사용할때 어떻게 작동되는지 어떤 로직으로 움직이는지, 어떤 부분에서 어려워하는지를 묻는것이 사용성 테스트. 즉, 앱을 사용하는 사용자가 겪는 모든 것들을 테스트하는 것이다. 오류가 발견된다면 고치고 어려운 로직을 쉽게 바꾸는 등 이용을 원활하게 하기 위해 사용.
특정 카테고리를 중점적으로 다루는 온라인 쇼핑 전문 몰을 뜻함. (ex_ 무신사: 패션 전문 버티컬 커머스)
버티컬 커머스는 한 우물을 파듯 특정 제품에 집중하여 고도의 전문성과 차별화된 서비스를 제공하는 전략이며, 다양한 종류의 상품을 취급하는 오픈마켓은 ‘수평적’이라고 할 수 있음. 버티컬 커머스와 비슷하게 쓰이는 용어로는 오프라인 시장에서는 카테고리 킬러(Category Killer)나, 한국에서는 ‘전문몰’ 등이 있음.
대상의 형태를 사실주의적으로 표현하는 기법.스큐어 모피즘은 디지털 사용자 인터페이스에서 어포던스를 나타내며, 사용자가 알고있는 개념을 사용하여 친숙하게 느껴지는 효과가 있음.
지금만큼 대중화 되지 않았던 시기에 효과적인 의미전달을 위해 사물의 생김새로 UI를 표현하는 것이 가장 직관적이어서 사용하였던 기법 (ex. 파일을 버릴 때 휴지통 아이콘을 사용함)
플랫 디자인(Flat design)
복잡한 그래픽효과를 배제하고 단순한 색상과 구성을 통해 직관적 인식이 가능한 2차원 디자인 방식. 스큐어모피즘과 비교했을 때 훨씬 깔끔하고 가독성이 뛰어나지만, 과도한 의미 함축으로 인한 접근성 문제와 디자인 간의 개성이 사라지는 문제점이 제기되었음. 구글에선 플랫디자인의 단점을 개선한 머티리얼 디자인을 발표하기도 함.
머티리얼 디자인(Material design)
빛과 그림자를 이용한 입체효과를 추가해 플랫디자인에 공간감과 입체감을 추가한디자인. 깔끔하면서 미적인 효과를 적당히 제공하여 오랜 기간동안 UI 디자인의 교과서처럼 자리잡음.
뉴모피즘 디자인(Neumorphism)
새로운 스큐어 모피즘을 말하며 가장 큰 특징으로 부드러움(soft UI)이라 할 수 있다. 그림자만을 이용하여 돌출된 영역을 표현하고 이를 바탕으로 레이아웃을 구성함.
글래스모피즘 디자인(Glassmorphism)
반투명 재질을 사용하여 오브젝트 간의 시각적 계층을 표현한 그래픽 스타일. 투명도를 사용하여 불투명한 유리효과를 낸것이 특징이다. 불투명을 강조하기 위해 배경으로 선명한 색상을 사용하는 경우가 많음. 오브젝트에 밝고 연한 테두리를 주어 경계를 명확하게 표시하고 다층 구조로 공간에 물체가 떠있는 듯한 효과를 낸다.
디자인 시스템이나 프로덕트에 따라 여러 요소를 컴포넌트로 정의하기도하고 스타일을 나눠서 쓰기도한다. 정답은 없으므로 요소의 형태를 잘 분리하고 정의해서 알맞게 잘 활용하는 것이 제일 중요하다.
모달(Modal) : 사용자가 행동을 취하기 전까지 뒤에 가려진 화면을 조작할 수 없는 것(즉, UI를 분류하는 기준 중 하나)
사용자가 원래 사용하던 화면을 잠궈 액션을 하기전까지 풀어주지 않음 → 사용자의 흐름을 방해할 수도 있으므로 최종 목적지까지 가는 시간, 비용을 줄이기 위해 모달을 줄이는 게 좋음. but 방해를 해서라도 반드시 확이해야하는 부분 or 중요한 선택이 필요한 시점에 적절하게 사용하는 것이 관건
팝업(Pop-up) : 현재 화면 위에 새로운 화면을 띄우는 것
윈도우팝업 : 새로운 브라우저 창을 띄워주는 방식(요즘은 사용하지 않는 추세)
레이어 팝업 : 현재 화면에서 컴포넌트로 만든 레이어 층을 하나 더 보여주는 개념
팝오버(Popover)(Infotip) : 아이콘 요소(Trigger)를 클릭했을 때 주위에 작게 말주머니 형태로 뜨는 컴포넌트. 주로 보조 설명을 하며 링크, 이미지,아이콘 등 다양한 요소를 사용하여 추가정보를 제공함. mouse click 인터랙션으로 작동(모바일보단 PC에서 사용, 내용이 많을 경우엔 dialog나 popup을 사용하는 것이 좋음)
툴팁(Tooltip) : 텍스트요소만 담을 수 있으며 주로 단어 또는 짧고 간결한 하나의 문장만 제공. mouse hover 인터랙션으로 작동
라이트박스(Light box) : 모달 UI를 사용하기 위해 뒤에 가려진 반투명한 층을 뜻함(같은말로 스크림Scrim, 딤드Dimmed, 딤레이어Dimlayer, 오버레이Overlay 등이 있음)
다이얼로그(Dialog) : 컨테이너 컴포넌트면서 동시에 모달 속성을 가진 컴포넌트로 사용자의 의사를 묻고 답을 얻을 때 주로 사용함(현업에서 모달은 실제 다이얼로그를 지칭할 때가 많음) 주로 요소를 감싸는 컨테이너와 그안에 헤더와 액션버튼으로 이루어져 있음. 라이트 박스 영역을 누르면 닫을 수 있음
얼럿(Alert) : 사용자에게 주의나 경고 또는 확인 등을 일방적으로 표시할 때 사용. 다이얼로그와 다르게 라이트박스를 눌러도 닫히지 않으며 사용자가 반드시 버튼을 눌러 확인하거나 직접 취소를 눌러서 닫아야함.
토스트(스낵바) : 사용자가 반드시 확인해야하지만 다이얼로그나 얼럿만큼의 중요성이 아닐 경우에 사용. 주로 사용자가 선택한 행동의 결과 또는 처리결과를 안내할 때 사용
Confirm : 사용자의 행위에 대해 true/false로 선택 가능하며 다음행동을 결정할때 사용. 사용자에게 한번더 생각하거나 취소할 여지를 줌.
