inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z

홈 화면으로 시안 작업하기

아이폰 14 프로 프레임 컬럼 수

867

zgpgpz72

작성한 질문수 1

0

안녕하세요! 최근에는 모바일 프레임을 아이폰 14프로로 많이 진행하는거같은데 이 경우에는 컬럼 수와 사이즈 및 간격을 어떻게 잡아야 좋을까요?

figma 웹 디자인 모바일-디자인

답변 1

0

에릭

안녕하세요. 질문 감사합니다.

아이폰 14프로 같은 경우에는 viewport에서 width값이 393으로 나오는 것 같네요. (혹시 다르게 알고 계시면 말씀 부탁드립니다.)

주신 질문에 대해 결론부터 말씀드리자면, 절대적인 정답은 없다라고 말씀드릴 수 있습니다.

디자이너에 따라서 자신이 원하는 수치를 지정하고 컬럼 수를 정할 수 있기 때문에 본인이 원하시는 바에 따라서 진행하시면 됩니다.

다만, 제가 만약 디자인을 한다면 어땠을까를 가정했을 때를 말씀드리겠습니다. 이 역시 정답이 아닐 수 있음을 말씀드립니다.

컬럼수는 4개 또는 6개로 할 것 같습니다. 그리고 Margin값은 15px 또는 16px로 하여 어느 정도 좌우 여백을 남기도록 하고 각 컬럼의 사이즈를 정의하기 보다는 컬럼 간 간격을 15 또는 16px로 할 것 같습니다.

게시판에 이미지 업로드가 잘 안되어 스크린샷을 아래와 같이 공유드리니 참고 바랍니다. 다시 말씀드리지만, 이 부분은 참고 정도로만 하시면 될 것 같고 본인이 원하시는 바에 따라 얼마든지 조정하시면 됩니다.

4개 컬럼:

https://drive.google.com/file/d/1-kgrZpAmjaDW8KQcOB-XZG1oFNqSjC6M/view?usp=sharing

6개 컬럼:

https://drive.google.com/file/d/12aFVl9ysouHSfBzZVW3X_A2HrDcUcwOP/view?usp=sharing

감사드리고 또 궁금한 점이 있으면 말씀 주세요.

 

0

zgpgpz72

감사합니다! 아직 많이 작업을 안해봐서 감이 안잡혔는데 참고해서 저만의 스타일을 만들어 보겠습니다! :)

프레임 조정 관련

0

69

2

arrow auto 플러그인이 검색해도 안나오는데 대체할 다른플러그인 추천해주실수있을까요 ?

0

78

1

오브젝트간 간격 4px 주시는 이유가 구체적으로 궁금합니다.

0

113

0

하단바 고정

0

428

2

도형 오토레이아웃 설정

0

151

2

단락별 행간 조절

0

98

2

수강기한 연장 관련 질문드립니다.

0

91

2

24화 질문인데 도형 선택해도 layer가 안 뜹니다

0

172

3

go back to previous(이전 버전으로 가기) 가 안뜹니다

0

380

3

Auto Layout 적용이 되지 않습니다

0

407

2

SF Symbols 윈도우

0

370

2

섹션 13 질문입니다. Asset에 Toolbar가 뜨지 않습니다

0

144

2

Constraint기능에서 Top & Bottom 기능이 연동이 안되네요

0

163

2

Copy Link로 프로토타입 공유 시, 휴대폰 프레임 안보이게 하는 기능

0

328

2

프레임 크기를 조정하다가 모르는 박스를 발견했어요.

0

145

2

Style 저장하는데 Variable?

0

386

1

Text 박스 조정하는 법

0

1077

2

확장성

0

117

2

하단바 설정하는 방법

0

296

2

컴포넌트들 에셋상에서 폴더값으로 분류하는 법

0

617

4

하단바 고정시

0

941

3

섹션 12 예제 파일이 안보입니다!

0

180

2

제플린 핸드오프에 관련 질문입니다.

0

146

2

오토레이아웃

0

145

2