구글에 'iOS 디자인 가이드'를 치면 수만 개의 글이 나옵니다. 하지만 정작 Figma를 켜고 나면... 막막해지기 시작합니다.
그리고 머리가 터지는 질문이 오기 시작합니다
"iPhone 15로 작업해도 되나요?"
"2배수랑 3배수가 도대체 왜 필요한가요?"
"안드로이드 개발자님이 말하는 dp는 또 뭐죠?"
,
,
,
제가 iOS, AOS 둘 다 서비스를 기획하고 와이어 프레임을 그리기 위해 여기저기 인터넷 뒤지고 다니면서 헷갈렸었던 점, 그리고 신입이라면? 가장 헷갈려 할 만한 핵심 개념부터 실무 표준까지 오늘 포스팅으로 정리할 예정입니다!
각 내용은 출처가 명시되어 있으니 더욱 깊은 정보를 원하신다면 링크를 클릭해 주세요 👍
[기초] 신입이라면 반드시 알아야 할 '지옥의 실무 용어'
용어를 모르면 개발자와의 대화 자체가 불가능합니다. 딱 4가지만 기억하세요.
- 배수 (Scale): 화면의 선명도를 결정하는 단위입니다. 1배수에서 작업한 디자인을 실제 폰에서는 2배, 3배로 뻥튀기해서 보여줘야 깨지지 않습니다.
- 해상도 (Resolution): 화면에 들어가는 픽셀의 개수입니다. 물리적인 폰 크기가 같아도 해상도가 높으면 더 많은 배수가 필요합니다.
- 핸드오프 (Handoff): 완성된 디자인을 개발자가 코딩할 수 있게 '에셋(이미지, 아이콘 등)'과 '수치'를 넘겨주는 과정입니다. (Zeplin이나 Figma의 Inspect 기능을 주로 씁니다.)
- 어포던스 (Affordance): "이 버튼은 누를 수 있게 생겼다!"라는 직관적인 힌트를 주는 설계입니다.
Figma 세팅 표준: 어떤 기종으로 시작할까?
무조건 최신 폰이 정답은 아닙니다. 17pro max가 가장 좋아 보여! 하는 선호도도 표준 세팅이 될 수 없습니다
가장 대중적이면서 하위 호환이 쉬운 기준 기종(Base Device)을 선택해야 합니다.
| 구분 | iOS (Apple) | Android (Google) |
| 기준 기종 | iPhone 13 & 14 | Android Large |
| 프레임 사이즈 | 390 x 844 px (292.5pt x 633pt) | 360 x 800 px |
| 기본 단위 | pt (Point) | dp (Density-independent Pixel) |
| 배수 작업 | @2x, @3x (레티나 대응) | xhdpi, xxhdpi (다양한 밀도 대응) |
💡 왜 390px 인가요?
과거엔 375px(iPhone 8~11)이 기준이었으나, 현재는 390px 점유율이 가장 높습니다. 너무 큰 화면(Pro Max 등)에서 작업하면 작은 폰에서 레이아웃이 깨질 위험이 큽니다.
예전에는 작게 만들어서 배수 작업을 했었는데, 지금은 피그마에서 프레임 만들 때 모바일, 웹 프레임 사이즈가 종류별로 정말 많이 나와 있기 때문에, 실제 작업 전 프로젝트 매니저와 개발자들이랑 상의를 해야 합니다.
사실 프로덕트 디자이너 책임급 아니면 이걸로 디자인을 해라~ 라고 지시가 내려오겠지만, 회의에서 배수 작업, 기본 단위만 알고 들어가도 이 신입 뭘 좀 아는군ㅋ 이라는 인상을 받기 좋습니다
근데 레티나가 뭐예요?
레티나 대응은 애플의 고해상도 디스플레이(레티나 디스플레이)에서 이미지가 깨지거나 흐릿하게 보이지 않도록 고화질 이미지와 적절한 픽셀 처리를 적용 하는 웹/앱 디자인 및 개발 기법입니다
📍 'Retina Scale' 핵심 요약
1. 1x (pt) 영역: 디자인의 기준
- 우리가 Figma에서 그리는 10pt 크기의 정사각형은 모든 기기에서 동일한 '논리적인 크기'를 가집니다. 디자인은 항상 이 1배수(1x) 상태에서 진행합니다.
2. 2x (@2x) 영역: iPhone 표준 해상도
- 과거 iPhone 모델이나 현재의 표준형 모델(@2x)에서는 1pt 공간을 채우기 위해 **2x2=4개의 실제 픽셀(20px)**이 사용됩니다. 따라서 에셋을 추출할 때 2배 크기가 필요합니다.
3. 3x (@3x) 영역: Pro 및 최신 모델 해상도
- iPhone Pro 시리즈와 같은 고해상도 모델(@3x)에서는 1pt 공간에 **3x3=9개의 실제 픽셀(30px)**이 촘촘하게 박힙니다. 훨씬 선명한 화질을 구현하기 위해 3배수 에셋이 필요합니다.
📍 1도 모르겠다면, PT to PX converter를 이용하자
pt랑 px... 정말 어려운 개념입니다 저도 머리에 힘을 주고 있지 않으면, 가끔 까먹어요 그럴 땐 pt to px converter를 이용하시면 됩니다 1pt = 1.33 px 정도인데, 이걸 피그마에서 계속 계산하고 있을 순 없으니, 아래의 사이트에서 변환하여 쓰도록...
iOS vs 안드로이드: 실무 컴포넌트 한눈에 비교
플랫폼마다 부르는 이름이 다릅니다. 기획서에 이름을 잘못 쓰면 전혀 다른 결과물이 나옵니다. 특히나 내가 모든 것을 다 해야 하는 디자이너의 경우 웹도, iOS,도 AOS도 나의 몫인 경우가 있어서 못 박고 넘어가는 게 편합니다
| 화면 요소 | iOS | Android | 핵심 차이점 |
| 하단 메인 메뉴 | Tab Bar | Navigation Bar | iOS > 아이콘 위주, AOS > 텍스트 병행이 많음. |
| 하단에서 올라오는 창 | Action Sheet | Bottom Sheet | iOS > 선택지 나열 AOS > 기능 확장 |
| 상단 타이틀 영역 | Navigation Bar | Top App Bar | iOS > 타이틀 중앙 AOS > 좌측 정렬 |
| 중앙 팝업창 | Alert | Dialog | iOS > 확인/취소 중심 AOS > 복잡한 입력 능 |
출처
⭐ 개발 협업을 위한 '수치 설계' 규칙 ⭐
신입이 가장 많이 실수하는 영역입니다. 개발자는 디자인 파일의 수치를 보고 코딩합니다.
① pt(Point)와 dp(Density-independent Pixel)의 이해
물리적 크기는 같은데 픽셀 개수가 다른 기기들을 위해 만든 '논리적 단위'입니다.
- 디자인은 무조건 1배수(1x)에서 합니다. (390px 프레임 안에서 작업)
- 개발자가 수치를 볼 때 10pt든 10dp든 똑같이 10이라는 숫자로 인식하게 환경을 만들어줘야 합니다.
② 탭 타겟(Tap Target): "내 손가락은 마우스가 아니다"
사용자의 손가락은 픽셀보다 훨씬 큽니다.
- 최소 44x44pt의 클릭 영역을 확보하세요.
- 버튼이 작아 보여도, 실제 투명한 터치 영역(Hit Area)은 크게 잡아야 이탈률을 막을 수 있습니다.
💡 실무 주의사항: 탭 타겟(Hit Area)?
만약 버튼 안의 아이콘이 24px이라면, 버튼 전체의 투명한 영역(Padding 포함)을 반드시 44px로 잡아서 넘겨야 합니다.
그래야 개발자가 "아, 클릭 영역이 44구나"라고 인지하고 코딩합니다. 영역이 너무 작으면 사용자가 버튼을 눌러도 반응이 없어 짜증을 유발하거든요.
💡 출처 및 참고 데이터:
- Apple HIG: "Ensure all interactive elements are at least 44x44 pt."
- Google Material Design: "Touch targets should be at least 48x48 dp."
- Nielsen Norman Group: "Mobile UI: Avoid Small Targets" (실제 사용자 클릭 정확도 연구 데이터 기반)
피그마에서 코드 뽑기
만약 좌측 사진처럼 리본 모양의 컴포넌트를 뽑았다면, 개발자가 Dav Mode로 가져갈 수 있습니다!
옛날에는 이게 무료였던 것 같았었는데... (우측에 css, html 정보 제공했었던 걸로 기억해요) 지금은 유료래요
📌 iOS 기준은 pt 라고 했는데 px 로 적힌 까닭
Q: 아이폰 디자인 기준은 pt인데, 왜 Figma에서는 px로 작업하나요?
A: Figma나 Sketch 같은 디자인 툴은 픽셀 기반 툴이기 때문입니다. 실무에서는 1pt = 1px로 치환하여 1배수(1x) 해상도에서 디자인합니다. 이렇게 작업해야 기기별 배수(@2x, @3x) 대응이 훨씬 수월해지며, 개발자와 수치 소통을 오류 없이 할 수 있습니다.
🚩가이드는 '제약'이 아니라 '안정성 있는 디자인'의 뿌리!
Figma 키트를 그대로 복사해 쓰는 것은 누구나 할 수 있습니다. 하지만 "왜 이 사이즈로 작업했는지", "왜 이 컴포넌트 명칭을 써야 하는지" 논리적으로 설명할 수 있는 기획자와 디자이너는 드물어요
(저도 공부할 때 애먹었음 사실 굳이 알 필요까진 없잖아? 싶었던 나)
표준 가이드를 지키는 것만으로도 팀원끼리의 원활한 소통과 나중에 수정이 생겼을 때, 효율적으로 작업할 수 있는 가능성이 절반 이상 상승합니다. 내가 만든 버튼이 소수점으로 끝나는 것보다, 딱 떨어지는 숫자인 게 나도 수정하기 쉬운 것처럼요
이 글이 도움이 되셨나요? 다음에는 실제 Figma에서 '디자인 시스템(Design System)'을 구축하는 기초 방법론에 대해 다뤄 보도록 하겠습니다...
'UI' 카테고리의 다른 글
| 피그마 프로토타입) 5초 만에 만드는 원형 스핀(Spin) 애니메이션 구현 (0) | 2026.01.12 |
|---|---|
| 애플이 사랑한 그 디자인, 글래스모피즘 카드 UI 1초컷 제작법 공개 (0) | 2025.12.26 |
| 피그마! 3초 컷으로 자글자글 "그레인" 넣기 (4) | 2025.12.14 |
| POV: 디자이너의 더미 데이터 산더미, 'Content Reel'로 1초 컷 (광속 퇴근) (0) | 2025.12.05 |
| 핀터레스트 말고, 레퍼런스 어디에서 찾아요? (2) (4) | 2025.11.26 |