플랫디자인

1. 소개

• 디자인에서 깊이를 제거해 입체감을 없앤 것

2. 중심 가치

• 작관성: 추가 효과 배제
• 색상의 활용: 6~8가지 색상
  (활용 사이트: flat UI Colors)
• 간결하고 인상적인 타이포그래피: 플랫디자인 + 인상적인 문구 강조하는 빅 타이포그래피
  (예시: 러쉬)

머티리얼 디자인

1. 소개

• 디자인으로 제품의 통일성을 주는 것. 그림자 등 효과를 주기도 한다
  (예시: 머티리얼 디자인 어워드)
  (활용 사이트: 머티리얼 디자인 라이트(프레임워크) )

카드 디자인

1. 소개

• 정보 중심 사이트를 만들 때 사용

2. 장점

• 갤러리형, 포트폴리오 사이트 등에 적합
• 박스로 콘텐츠가 분리되어 많은 양의 정보 전달 가능
• 레이아웃 변경 용이
• 지나친 스크롤 줄이기 가능

3. 단점

• 카드 안의 콘텐츠가 많을 경우 적합x

4. 구현 기술

• css, 제이쿼리, 부트스트랩, 머티리얼 디자인 라이트 프레임워크
  (활용 사이트: 머티리얼 디자인 라이트(프레임워크) )
  (예시: 부트스트랩)

그리드 시스템

1. 소개

• 정보 중심 사이트를 만들 때 사용

2. 장점

• 시각적으로 안정적인 디자인
• 단순한 웹 디자인
• 내용을 원하는 대로 배치

3. 구현 기술

• 가변 그리드 레이아웃: 사이트의 너비를 픽셀이 아닌 % 로 지정
• css의 float 속성: float:left나 float:right를 사용해 좌우로 배치
• 플렉스박스
• css그리드 레이아웃

원 페이지 사이트

1. 소개

• 위 아래, 혹은 좌우로 스크롤하며 보고 싶은 내용을 찾아볼 수 있음
• 네비게이션 바도 포함
• 내용이 많지 않고 여백이 많은 사이트
• 개인 포트폴리오, 갤러리 사이트
  (예시: 제과점)

2. 구현 기술

• css, 제이쿼리 플러그인

페럴랙스 스크롤링

1. 소개

• 원 페이지 사이트에 동적인 효과를 추가한 것
• 바라보는 위치에 따라 물체의 위치나 방향이 다르게 보이는 것
• 시차 디자인

2. 용도

• 복잡한 이미지x, 텍스트 적은 사이트
• 스토리텔링 사이트 ( 예시: 오설록)
• 제품 설명 사이트 ( 예시: 휴대폰케이스)
  (예시: 19가지 사이트)
• 회사 소개 사이트 ( 예시: -)
• 광고, 이벤트 페이지 등(화려한 효과 가능)

3. 구현 기술

• 자바스크립트
• 패럴랙스 스크롤링 플러그인 (Stellar.js, ScrollMagic)
• 워드프레스용 패럴랙스 스크롤링 테마(68페이지 참고)

풀 스크린 배경과 캐러셀

1. 소개

• 배경 이미지(일러스트, 동영상, 사진, 이미지 등) 로 화면 전체를 가득 채운 웹사이트
• 풀 스크린 배경, 혹은 히어로 이미지
• 단점: 로딩 시간이 길어질 수 있음

2. 용도

• 패럴랙스 스크롤링 효과를 적용한 사이트에서 많이 사용됨
  (스크롤하거나 수직 내비게이션을 클릭하면 한 화면씩 이동함)
• 첫 화면만 풀 스크린 배경으로 설정
• 원 페이지 디자인 형태
  (스크롤, 혹은 클릭을 이용해 한 화면씩 이동할 수 있어서 유리함)

3. 풀스크린 이미지 구현 기술

• div 태그로 각 화면을 하나의 영역으로 만들고, div마다 각기 다른 풀 스크린 배경을 사용함
• 파일 확장자:
  JPEG(압축할수록 이미지 화질 떨어짐. 용량 작음) 혹은 PNG(투명배경 사용 가능. 압축해도 화질 떨어지지 않음. 용량 조금 큼) GIF(권장X. GIF는 사용할 수 있는 색상 수가 512로 제한되므로 텍스트나 아이콘, 버튼 등 간단한 그래픽 이미지에 사용됨)
• 디자인:
  단순한 배경
• 파일 퀄리티:
  화질이 좋아야 함(너비 1100~1200PX)
• CSS에 background-size속성 추가
• 제이쿼리 플러그인(배경이미지를 슬라이드쇼로 표현)
• backstretch.js 플러그인 혹은 vegas 플러그인

풀스크린 비디오 디자인

1. 소개

• 회사 홍보, 혹은 제품 광고가 필요한 사이트에서 주로 사용
• 동영상을 끝까지 보기 위해 사람들이 머물기 때문
• 모바일 기기에서는 이미지만 사용( 동영상 사용 불가 )
• 예시: 안테나 뮤직

2. 구현기술

• 파일 확장자: mp4, webM, Ogg
  (mp4는 버전에 따라 사용이 불가능할 수도 있으며, 그 외 파일은 인코딩 프로그램으로 변환해야 함)
• 제한: 재생시간 20~30초, 크기는 5mb 이하
• 멈춤 기능: 제이쿼리로 구현
• 파일 용량이 클 경우: 유튜브나 비메오 등에 올려놓고 연결해서 사용 가능
• video 태그 사용
• 효과 주고 싶다면: 자바스크립트 혹은 제이쿼리 플러그인(tubular 플러그인)

고스트 버튼

1. 소개

• 테두리 및 배경이 투명하고 희미해서 버튼이 아닌 것처럼 문서 배경이 드러나는 버튼
• 간단한 텍스트와 라인으로 버튼 구현하므로 만들기 쉬움
• 배경 이미지 잘못 선정할 경우 버튼 보기 힘듬

캐러셀

1. 소개

• 여러가지 중요한 정보를 슬라이드로 보여줌
  (예시: 지마켓)
• 정지 기능, 직접 화면을 넘길 수 있는 네비게이션 기능을 넣어두어야 함

2. 장점

• 눈에 가장 잘 띄는 공간에 여러 내용 배치 가능

3. 주의사항

• 첫 번째 내용은 가장 중요하고, 사용자에게 유익한 정보
• 케러셀이 아닌 곳에도 캐러셀 내용 두기

4. 구현 방법

• 제이쿼리 플러그인