(DAY15) 반응형, 적응형, 레이아웃, 그리드 알아보기

 

 

안녕하세요 :) 

오늘은 어제와 이어서 오토레이아웃을 활용하여 하이라키 공부를 하고 있는데요,

반응형, 적응형, 레이아웃 가이드 관련해서 공부했습니다.

 

---

 

 

 

✏️오늘의 학습

반응형/적응형, 레이아웃/그리드 알아보기

피그마  Layout guide 기능 써보기 → Grid, Columns

실습 1) 그리드 활용해서 사각형과 텍스트 넣어보기
실습 2) 마켓컬리 앱 화면 클론디자인 해보기

 

 

 

 

 

📖오늘의 핵심

매일 아침 오늘이 좋은 날이 될거라고 스스로에게 말하기

4배수 or 8배수 grid system의 중요성

 

 

 

 

"뇌를 프로그래밍해야한다. 가장 좋은 방법은 단순한 문장을 반복하는 것이다."

(멜로빈스 영상 中)

 

 

 

 

📝수업 내용 메모장

 

 

 

 

반응형과 적응형
기종에 따른 인터페이스 차이

반응형 사이트 예시
TED, 아임웹 (직접 들어가서 느껴보기)

적응형 사이트 예시 : 네이버
네이버 홈페이지 가서 화면 줄이면 '모바일 버전으로 보기' 버튼이 생김.
클릭하면 naver.com에서 http://m.naver.com으로 바뀌면서 모바일 레이아웃으로 바뀜

naver.com이랑 http://m.naver.com의 IA가 다름
메인 기능이 달라질 수 있기 때문에.



8pt grid system의 중요성
사실 글자는 8의 배수로 안맞춰도 된다.
(그렇지만 폰트 글자가 갖고 있는 고유한 높이 사이즈가 8배수면 깔끔하긴 하다.)

https://medium.com/built-to-adapt/intro-to-the-8-point-grid-system-d2573cde8632

Intro to The 8-Point Grid System

 

 

 

 

그리드
거터 gutter : 컬럼과 컬럼 사이의 간격
마진 margin : 화면 양 사이드 끝의 여백
material Design 3에도 그리드에 대한 정보가 있음.

 

피그마 Layout guide 기능
모바일 화면의 컬럼은 보통 3 ~ 5까지 있음



Apple 피트니스 화면 : 마진 20
그리드 칸 하나당 4px라고 보면 됨
마진 먼저 설정하고 컬럼 개수 파악하는게 수월함.
컬럼 타입 strech로 하기.
strech는 가운데를 기준으로 양 옆으로 늘리는 것.


레이아웃과 그리드
레이아웃 : 다양한 구성요소를 고려하여 앱 내에 정보를 시각적으로 배치하는 것
그리드 : 질서 있게 배치하기 위한 그리드 규칙, 시각적 통일성을 주기 위해 사용

---

+ 사이트 추천

미디엄 Medium https://medium.com/
닐슨노먼그룹 NN/g https://www.nngroup.com/
윗 wwit https://wwit.design/
모빈 mobbin https://mobbin.com/discover/apps/ios/latest

 

 

 

 

피그마  Layout guide 기능 파악해보기 → Grid, Columns

 

수업 내용

 

 

이론보다는 직접 화면을 보고 컬럼이 몇개인지, 마진은 얼마로 했는지 등등 직접 파악해보는 것 위주로 수업이 진행됐다.

직접 파악해보는 것이 기억에 더 오래 남고 이해가 쏙쏙 잘되는 것 같다.

 

 

 

 

실습 1) 그리드 활용해서 사각형과 텍스트 넣어보기

 

 

 

💡생각보다 딱 맞지는 않았다. 왜 안맞지...? 사실 현업에서는 잘 안쓰는게 아닐까? 하는 의문이 들긴 했다.

멘토님도 그리드를 너무 맹신하진 말고 참고용으로만 쓰라고 하셨다. 정말 참고용으로만 써야겠다는 생각이 들었다.

 

 

 

실습 2) 마켓컬리 앱 화면 클론디자인 해보기

 

 

 

💡 같은 줄의 텍스트 안에서도 정보가 바뀌는 부분(ex 사용자 이름이 들어가는 부분, 제품 가격 등등)은 나눠서 작업한다는 것을 배웠다. 어제와 이어서 계속 피그마를 활용하여 앱화면 클론디자인을 실습하고 있다. 확실히 하면 할수록 감을 잡고 있고, 점점 클론하는 퀄리티가 늘고 있다는 느낌이 든다. 다양한 앱 화면을 클론해봐야 될 것 같다는 생각이 들었다.