다시 멜로빈스 영상을 보면서 하루를 시작하게 되었다!
어떻게 하루를 시작해야 하는지 딱 알려준 영상이었다

“하루를 ‘좋은 날이 될 거야’라고 말하며 시작해라.”
“뇌는 좋은 것이 들어가야 좋은 것이 나온다.”

즉 좋은 날이 될 것이라고 생각하면서, 하루를 시작한다면 정말 좋은 하루가 될 것이라는 것 😚

UI 심화 개념

반응형과 적응형

반응형 (Responsive, One size fits all)

: 하나의 레이아웃이 화면 크기에 맞춰 자동으로 변형되는 방식

컨텐츠 양은 동일, 여백이 늘어나거나 줄어듦
화면이 좁아지면 컨텐츠들이 아래로 떨어지는 구조
특정 브레이크포인트(breakpoint)마다 디자인 변화가 일어남

적응형 (Adaptive, Made to measure)

: 화면 크기별로 미리 별도의 레이아웃을 설계하여 적용하는 방식

화면이 줄어들어도 같은 레이아웃이 변형되지 않음
디바이스 종류/사이즈에 맞춰 별도의 레이아웃을 제공
IA(Information Architecture) 설계가 화면 크기에 따라 달라짐

그리드 시스템 (Grid System)

8배수 그리드: 픽셀 단위가 깔끔하게 맞아떨어짐 (반픽셀 현상 없음)
4배수 그리드: 더 작은 단위로 세밀한 디자인 가능

마진(Margin) → 바깥여백
거터(Gutter) → 컬럼 사이의 여백

느낀 점
html과 css를 배울 때랑 비슷하게, 디자인을 코딩하듯 체계적으로 하는 느낌이었다. html 로 div 나누고 css로 스타일 입히는 느낌~~ 결국 실제 구현은 코드 기반이기 때문에 개발까지 고려하며 하는 것이 UI 디자인임을 알았다 ‼️

과제

1. 수업시간에 학습한 웹 페이지 제작 (Auto layout)

느낀 점
가장 기본 섹션을 알 수 있는 부분인 것 같다. 화면을 구성하기 전 저엉어엉말 처음으로, 마진과 거터, 몇 콜론인지 정하고 시작하니 이후 클론할 때도 편리했다!

2. 컬리 클론

느낀 점
오토 레이아웃...!! 쓰면 쓸수록 익숙해지고 편리했다.
위에도 말했지만 코딩하는 느낌...~~~!!!
클론하면서도 어떻게 섹션을 나누었는지, 계층은 어떻게 나누었는지 느껴져서 재미있었다.

3.앱 래퍼런스 찾고 클론해보기

느낀 점
한정적인 모바일 화면에서 끊임없는 세로 스크롤보다, 하나하나 섹션을 두고 가로로 스크롤 할 수 있게 구성하는 방식이 많이 사용되고 있다는 것을 느꼈다! 위의 컬리도 그렇고, 이번에 클론한 f1도, 인스타그램, 넷플릭스 모두 같은 방식의 구성이었다! 하나하나 화면을 채워나가는게 넘 재미있다 ㅎㅎ

회고

그리드를 통한 화면 설계가 단순한 픽셀 단위 맞추기가 아니라, 디자인도 결국 구현될 코드와 맞닿아 있다는 점을 느낄 수 있었다. 배웠던 전공을 보고 이 커리큘럼을 시작한 건 맞지만, 어떻게 사용할 수 있는지는 잘 생각하지 못했는데 컴퓨팅적 시각? 사고?가 도움이 많이 되는 것 같다. 오늘 정말 좋은 하루였다~~ 👍

#디자인도_코딩하듯이