📌
1. 레이아웃
2. 그리드
3. 반응형 디자인

1. 레이아웃

해상도

화면의 정밀도를 나타내는 지표
스크린의 가로 픽셀 수 x 세로 픽셀 수 기준

🔗 참고

현재 스크린 점유율을 확인할 수 있다
https://gs.statcounter.com/screen-resolution-stats/mobile/worldwide/#monthly-202401-202501

점유율을 기준으로 작업할 디자인의 기준 해상도를 설정한다.

대표적으로 안드로이드는 360x800, iOS는 375x812 해상도를 사용

해상도를 선정하기 전에 제품의 성향, 컨텐츠 종류, 레이아웃 등을 고려하여 함께 협업하는 디자이너, 개발자와 논의 후 적절한 해상도를 설정한다.

다양한 해상도에 대응할 수 있는 디자인을 하는 것이 중요하다.

고정 영역과 가변 영역

디자인 요소의 배치, 해상도에 따른 여백과 요소의 크기 변화 등에 대해 고려하여 디자인해야한다.

고정 영역

해상도의 변화와는 상관없이 미리 정의한 수치값이 일정하게 유지되는 영역
ex. 좌우 여백

가변 영역

해상도의 변화에 대응하여 비율에 맞춰 확대 혹은 축소가 되는 영역
ex. 버튼, 배너

2. 그리드

디자인 레이아웃에 규칙을 부여하여 일관된 UI를 할 수 있도록 도와주는 수단

디바이스 환경에 따라 디자인 요소를 일정한 간격으로 배치하고 크기를 부여하여 체계적인 배열을 돕는다.

데스크탑, 태블릿, 모바일을 위한 반응형 디자인을 작업할 때도 용이하며 개발자와의 협업을 할 때도 편리하다.

🔗 참고 : http://gridcalculator.dk/

구성 요소

1. 컨테이너 Container

컨텐츠의 폭

모바일, 태블릿은 가로 너비가 비교적 좁기 때문에 컨텐츠의 양이 많을 경우 좌우 여백(마진)을 줄이고 컨테이너 너비를 넓게 설정한다.

정해져있지 않아 제품의 성향에 맞춰 설정

2. 컬럼 Column

단의 너비

컨텐츠를 정렬하고 배치하는 역할

컨텐츠의 양과 레이아웃에 따라 컬럼 개수를 조절한다.

💡

• 모바일 : 2 - 6 (4컬럼 주로 사용)
• 태블릿 : 6 - 12 (6-8컬럼 주로 사용)
• 데스크탑 : 12 - 16 (12컬럼 주로 사용)

3. 거터 Gutter

컬럼과 컬럼 사이의 간격

컨텐츠를 담고 있는 칼럼들 사이에 여백을 제공하기 때문에 가독성을 높이고 사용자가 컨텐츠를 쉽게 이해할 수 있도록 돕는다.

💡

• 모바일 : 8 - 16
• 태블릿 : 16 - 24
• 데스크탑 : 24 - 32

절대적인 값이 아니므로 서비스의 성격과 사용자를 먼저 고려하여 설정

4. 마진 Margin

화면의 좌우 여백

화면에서 보여줘야하는 컨텐츠의 양과 레이아웃을 고려하여 마진 설정

마진은 서비스의 모든 페이지에 일관되게 사용

💡

• 모바일 : 16 - 20
• 태블릿 : 20 - 36
• 데스크탑 : 24 - 36

3. 반응형 디자인

정해놓은 디바이스 화면 크기에 맞게 디자인과 레이아웃이 자동으로 변경되는 것

중요한 이유

1. 다양한 디바이스 사용

사용자는 다양한 디바이스를 사용하는데, 디바이스의 해상도와 화면 크기가 모두 다르다.

디바이스의 종류, 환경에 상관없이 일관된 사용자 경험을 제공하여 편리하게 이용할 수 있다.

2. 일관된 디자인

하나의 템플릿으로 다양한 디바이스에 대응할 수 있다.

디바이스의 종류에 따라 최적화된 화면을 제공할 수 있다.

3. 비용 효율화

하나의 코드 베이스로 구성되어있어 유지보수가 용이하다.

4. 컨텐츠 최적화

모든 디바이스 해상도에 맞춰 컨텐츠를 최적화하기 때문에 사용자는 텍스트와 이미지 등의 컨텐츠를 쉽게 확인하고 이해할 수 있다.

브레이크 포인트 Break Point

반응형 디자인의 레이아웃이 변경되는 지점

고려 사항

• 현재 기준 많이 사용되는 디바이스의 해상도를 파악 → 점유율 확인
• 서비스를 사용하는 주 사용자들이 어떤 해상도를 사용하는지 파악
• 화면 디자인에 필요한 레이아웃에는 어떤 것들이 있는지 확인
• 브레이크 포인트를 상세히 쪼개 사용할 수도 있지만 모든 기기에 대응하는 것은 어려우니 디자이너, 개발자가 함께 협의하여 필요한 기준을 설정하여 디자인을 진행하는 것이 좋다

💡

• 모바일 : 0 - 599
• 태블릿 : 600 - 1024
• 데스크탑 : 1024 -

12 칼럼 그리드

12 컬럼 그리드는 반응형 디자인에 최적화되어있다.

2,3,4,6 단으로 자유롭게 레이아웃을 나눌 수 있고 디자인과 개발에 최적화되어 있다.

🎙️ 느낀점

강의를 수강하고 과제까지 진행해보며 그리드가 일관된 디자인을 위한 편리한 도구라는 것을 깨달았다.

그리고 기사를 읽고 정리하는 것을 진행했는데 알고있던 스큐어모피즘과 플랫디자인의 내용이었지만 여러 관점과 내용들을 확인할 수 있어서 뜻깊은 시간이었다.
앞으로 주기적으로 진행을 할 예정이다.

내배캠을 시작한 지 한 달 가량이 지나갔고 오늘로서 또 한 주가 끝났다. 다음주에는 새로운 디자인 카타를 진행한다. 바쁘지만 의미있는 시간들을 보내고 있는 것 같아서 뿌듯하다.
9일이 늘어났기도 했고 요모조모 썸네일처럼 일단 한 주 한 주 최선을 다 하기로...! ❤️‍🔥❤️‍🔥