Do it! 프런트엔드 웹디자인 입문 요약-1

Do it! 프런트엔드 웹디자인 입문 요약-2 : https://fusionit.tistory.com/30

1. 반응형 웹 개념

다양한 기기에 반응하는 웹. 크기회전에따라 UI변경

1. 살짝 수정 패턴(Tiny Tweak): 글자이미지크기만
2. 유동형 패턴(Mostly Fluid): 여백줄이기->수직쌓기
3. 컬럼 드롭 패턴(Column Drop): 좁아지면 컬럼이 아래로 떨어짐.
4. 레이아웃 이동 패턴(Layout Shifter): 컬럼 순서가 바뀌거나 화면에서 일부 요소를 감춤.
5. 캔버스 밖으로 패턴(off Canvas): 남는 것을 화면 밖으로 보냄

만드는 법

• 미디어 쿼리: 기기별 CSS 파일 다르게 지정 mediaqueri.es
• CSS 프레임워크: 부트스트랩

2. 플랫 디자인

입체감 제거, 꾸밈 최소화, 단순화. 스큐어모피즘의 반대.

*스큐어모피즘: 실제 사물 본 떠 디자인에 반영.

플랫 디자인 법칙

• 직관성: 부연설명 없이 탭하도록 유도.
• 그림자 깊이 반사 입체감 배제/지양.
• 아이콘: 테두리 X, 단순 사각, 텍스트 이미지 오버레이.
• 6~8가지 색상. flatuicolors.com
• 간결하고 인상적인 빅 타이포그라피.

머티리얼 디자인

플랫 디자인을 받아드리면서 구글의 철학이 더해진 구체적 디자인 법.

• 가상의 빛으로 평면에 깊이나 반사 효과. 입체느낌 줌.
• meterial.io
• https://design.google/library/
• 머티리얼 디자인라이트 프레임워크 getmdl.io

카드형 디자인(카드 UI)

• 카드형식 컨테이너에 담아 표시, 카드에 테두리.
• 정보량에 따라 카드 크기 자유롭게 조절.
• 정보 중심의 사이트.
• 목록으로 만들 수 있는 사이트 일 때 좋음.
• 예: 핀터레스트, 페이스북.
• 장점: 스크롤 최소화.
• 단점: 지루함. 내용이 많으면 한 번에 보기 힘들고 카드를 일일히 열어봐야 함.
• 부트스트랩. 머터리얼 디자인 라이트의 카드 컴포넌트 이용 가능.

3. 반응형 웹 그리드 레이아웃 디자인

그리드 시스템

• 960 그리드 시스템, 1200 그리드 시스템: 화면 너비 960px 1200px
• 12 컬럼 그리드, 16 칼럼 그리드, 24칼럼 그리드
• 960/12컬럼 한 컬럼당 80px 사이 마진. 10px 이면 컬럼당 60px.
• Design Grid Overlay 크롬확장프로그램 사이트별 그리드 확인 가능.

그리드 만드는 법

1. 가변 그리드 레이아웃
   • 화면 너비 고정 후 표시 너빗값 지정(백분율 이용)
   • 너비에 따라 그리드 크기가 바뀜
2. CSS float 속성 사용 그리드 레이아웃
   • 왼쪽/오른쪽으로 이어붙이기
   • 속성 완전 숙지해야해서 불편
3. 플렉서블 박스 사용 그리드 레이아웃
   • 수평이나 수직 중 하나를 기본 축 지정
   • 순서 줄바꿈 위치 지정 가능
   • 채우도록 너비나 높이 지정 가능
4. CSS 그리드 레이아웃
   • 플랙서블 보완 수평 수직 모두 넘어서서 배치 가능

4. 원페이지 사이트

원페이지 사이트

• 화면 스크롤 하나로 내용이 끊기지 않고 표시되는 방법
• 내비게이션
• 리액트

패럴랙스 스크롤링

• 시차 디자인
• 스크롤 할 때 요소들이 움직이거나 다른방향으로 움직이거나 동작시간을 다르게 함.
• 스토리텔링 사이트, 제품 설명 사이트
• 적용된 워드프레스 무료 테마: Moesia, Alizee, Hemingway, OneEngine, Bootstrap Parallax

그외 책에 없는 것

• 스티키
• 스냅 스크롤

5. 풀 스크린 배경과 캐러셀

히어로 이미지: 사이트 성격 한눈에 알아볼 수 있도록 배치하는 큰 이미지

풀 스크린 배경

• 각 화면마다 풀 스크린: 패럴랙스 스크롤링 효과 적용한 사이트에서 많이 사용
• 첫 화면만 풀스크린
• 내용이 한 화면씩 바뀌는 경우 적합
• 느린 환경 / 구형 브라우저 접속 많거나 표시할 내용이 많을 땐 부적합

1. 이미지 풀스크린 배경
2. 동영상 풀스크린 배경
   • 모바일에서는 캡쳐 이미지로
   • 로딩되는 동안의 포스터 이미지 제공
   • 오디오는 제거
3. 고스트 버튼: 배경이 투명하고 희미한 버튼(2019년도 기준 트렌드)

캐러셀: 수화물 벨트, 회전 목마

• 회전하여 마지막에서 다시 처음으로 연결
• 자동 스크롤
• 중요한 순서대로
• 유익하여 사용자 시선을 끌 수 있는 내용.
• 내비게이션

6. 타이포 그래피: 활자 디자인

1. 타이포그래피 법칙(W3C)
   • 텍스트와 배경은 적절히 대비. WCAG 적합성 레벨.
   • http://www.w3c.or.kr/Translation/WCAG20/
   • https://webaim.org/resources/contrastchecker/
2. 빅 타이포그래피: 단순, 조화, 가독성
3. 웹 폰트

• 세리프: 획 돌출
• 산세리프: 세리프 없는 고딕 형태

출처: 고경희(2019), Do it! 프런트엔드 웹디자인 입문, 서울:이지스퍼블리싱(주)