2/24 TIL

박세진·2025년 2월 24일

디자인 카타

나의 생각

겉보기엔 같지만 다른 의도를 가지고있음.
A는 은행 업무 자체를 지원중, B는 은행 서비스를 오프라인으로 간편하게 제공하고있음.
조금 더 구체적으로 따지자면 A는 한 은행에 대한 많은 정보와 모든 것을 제공하고있으며,
B같은 경우는 다양한 은행의 간단한 시스템(조회,입금,출금)을 간편하고 손쉽게 다룰 수 있는 것이다.
B같은 경우는 간단한 시스템을 사용하기에는 편하지만 자세한 카드 정보를 다루기엔 A가 더욱 더 적합하다.
또한 은행 UI를 설계할 경우 직관적이고 일관된 디자인으로 통일해야 사용자가 편하게 찾을 수 있으며,
개인정보 보호에 관한 UI도 고려해볼 사항이다(숨김 기능 등)
참고 아티클 : https://brunch.co.kr/@sundayoff/72

오늘 학습한 내용

레이아웃과 그리드 시스템

레이아웃

레이아웃은 특정 영역 안에 텍스트, 이미지, 여백 등 디자인 요소를 시각적으로 배치하는 것

다양한 해상도에 맞게 일관된 디자인을 해야한다.

일관된 디자인을 하기위해선 고정과 가변 영역을 잘 설정해야한다.

디자인된 화면이 생각과 다르게 개발되는 경우

디자이너는 다양한 해상도를 고려하여 크기와 요소 등 다양한 디자인을 미리 예측해서 디자인

그리드

그리드는 정보와 요소를 체계적으로 배치하고, 시각적으로 통일된 디자인을 할 수 있도록 도와줌.

디자인 레이아웃에 동일한 규칙을 적용하여 일관된 UI를 할 수 있게 도와줌

desktop, tablet, mobile 반응형 디자인 작업 시 해상도 대응이 용이해질 뿐만 아니라 개발자와 디자이너의 원활한 커뮤니케이션을 도움.

그리드의 4가지 요소에 대해 알아보기

1. 컨테이너(Container)

컨텐츠의 폭을 뜻함

컨텐츠 너비 값은 정해져 있지 않아요. 제품이나 서비스 성향에 따라 설정
mobile, tablet의 경우 가로 너비가 좁기 때문에 콘텐츠 양이 많을 경우 마진을 줄이고 컨테이너 너비를 넓게 설정
desktop은 가로 너비가 넓기 때문에 자유롭게 설정

2. 컬럼(Column)

단의 넓이를 의미.
콘텐츠를 정렬하고 배치하는 역할을 함.

Mobile : 2~6 (4컬럼을 주로 사용)
Tablet : 6~12 (6~8컬럼을 주로 사용)
Desktop : 12~16 (12컬럼을 주로 사용)

3. 거터(Gutter)

컬럼(column)과 컬럼(column) 사이의 간격을 의미해요.

Mobile : 8~16
Tablet : 16~24
Desktop : 24~32

4. 마진(Margine)

화면의 좌우 여백의 너비
마진에 따라 콘텐츠의 너비(컨테이너)가 정해지기 때문에 마진 값을 정하는 것은 중요

Mobile : 16~20
Tablet : 20-36
Desktop : 24~36

이런 요소들을 생각하여 반응형 디자인을 하면 좋은점.

다양한 디바이스 사용

일관된 디자인

비용 효율화

콘텐츠 최적화

브레이크포인트(breake point)란?

반응형 디자인에서 레이아웃이 변화되는 지점

대표적으로 사용하는 브레이크 포인트

mobile : 0~599
tablet : 600~1024
desktop : 1024~

이제껏 실습한 내용들로 내일은 클론 디자인의 규칙을 찾고 컴포넌트 및 클론 디자인을 만들면서 연습해볼 예정이다.
항상 4의배수 기억하면서 디자인!!!!!!!!!!!