웹사이트 기획 단계에서 가장 핵심 사항은 사용자의 요구와 기업의 목표의 교차점을 찾아내는 것이다. 기업이 웹사이트를 통해서 바라는 목표( 판매, 고객 전환, 회원 가입 등)를 확실히 하고, 타깃 오디언스와의 인터뷰나 조사를 통해 사용자의 만족도, 불편한 지점을 확인하는 것이 선행되어야 한다. 디자인을 바꾸면 웹사이트가 확 좋아질 거라고 기대하고 “look & feel”에 초점을 맞추고 진행하는 경우가 있는데, 종종 문제점은 디자인이 아닌 경우가 많아서 디자인을 바꾼다고 원래의 문제가 해결되지는 않는다.
웹사이트를 만들 때 반드시 고려할 항목 중 하나가 검색엔진 최적화(Search Engine Optimization, 이하 ‘SEO’)라는 건 누구나 아는 사실이다. 아무리 멋지고 유익한 콘텐츠가 가득 담긴 사이트가 있다 한들 세상에 알려지지 않으면 없는 거나 다름없기 때문이다. 그렇지만 막상 어디서부터 어떻게 적용할까 하는 문제는 생각만큼 그렇게 간단하고 쉬운 문제는 아닌 듯하다.
디자이너가 웹 사이트를 기획할 때 고려되어야 하는 필수 조건이기도 하다. 흔히들 쉽게 프로토타입으로 접근하려 하지만 숙련된 디자이너라면 이미 많은 경험을 통해 SEO를 고려한 치밀한 디자인 과정으로 접근한다.
아래는 Sparkle 앱에도 검색엔진 최적화를 위한 모든 준비가 되어있는 것을 알 수 있다. 디자인 과정을 거친 뒤 최종적으로 검색에 어떻게 노출되어야 효과적인지를 고려하여 설정하게끔 정리되어 있다. 하나하나 살펴보면서 알아보도록 하자.
Sparkle 페이지 세팅 항목
사이트 설정(Site Setting)
이 섹션에는 웹 사이트 주소 및 웹 사이트 언어가 포함된다. 이 주소는 검색 엔진 및 공유에 중요한 정보이다.
검색 엔진은 검색자의 언어와 일치하는 페이지를 찾으므로 웹 사이트를 여러 언어로 번역하는 경우 여기에 각각의 추가 언어를 추가할 수 있다. 그러면 특정 언어로 사이트의 각 페이지에 주석을 달 수 있다. 여러분의 사이트가 지원하는 다른 언어의 해당 페이지, 추가된 각 언어에 대해 기본 링크 또는 공통 사항을 모든 페이지 주소에 표시해야 한다.
웹 사이트를 완성한 후 첫 번째 단계는 검색 엔진을 통해 검색하는 것으로 요청하도록 인덱싱을 시작할 수 있도록 하는 것이다. 여기에서 주요 검색 엔진의 웹 마스터 섹션에서 제공하는 코드를 복사/붙여넣기 할 수 있다.
서비스 제공 웹 사이트 기본 설정
검색 엔진(Search Engine)
검색 엔진은 소위 “sitemap.xml”이라는 파일을 사용할 수 있다. 이 파일은 검색 엔진 bot에게 사용 가능한 파일이 무엇인지 정확하게 알려주는 파일이다. 웹 사이트에서 이것은 로봇이 볼 수 있는 것과 볼 수 없는 것을 알려주는 “robots.txt” 파일과 짝을 이룬다. 이 설정 창은 Sparkle이 파일을 생성하도록 지시한다. 그러면 파일을 “인덱싱”된 페이지를 세부적으로 제어할 수 있다. 색인 생성(검색 가능) 및 “아카이브”(나중에 사용하기 위해 저장됨)를 검색 엔진에서 검색한다.
검색 엔진 메타데이터 자동 완성검색 엔진별로 인증 처리하여 SEO 유입 유도
사이트 아이콘
파비콘(favicon)이라고도 하는 웹 사이트 아이콘은 사이트와 연결되어 다른 위치에 표시되는 이미지이다. 브라우저에 따라 다르며, 예를 들어 Safari는 주소 표시 줄, 웹 사이트 주소 옆 및 기록 메뉴에서 페이지 제목 옆에 표시한다. Google 크롬은 페이지 제목 옆의 브라우저 탭에 표시한다. 모바일 사파리는 새 탭 페이지의 최근 웹 사이트 그리드에 표시한다.
필요한 모든 크기로 조정될 단일 정사각형 이미지를 선택하거나 각 아이콘을 선택하여 개별 아이콘을 제어할 수 있다.
또한 Safari는 고정 탭과 MacBook Pro Touch Bar에 대한 특정 아이콘을 지원한다. 이 아이콘은 마스크로 사용되며 SVG 형식의 벡터 파일이어야 한다. 설정 페이지에서는 고정된 탭과 터치 막대에서 SVG가 어떻게 보이는지 정확하게 미리 볼 수 있다.
웹 브라우저는 일반적으로 웹 사이트 아이콘이 자주 변경되지 않는다고 가정하므로 매우 오랫동안 아이콘을 유지(캐시)한다. 이런 이유로 Sparkle의 실시간 미리 보기 서비스는 웹 사이트 아이콘을 표시하지 않는다. 웹 사이트 아이콘을 변경하면 브라우저의 웹 사이트 아이콘 캐시를 지워야 한다. 돌아오는 사이트 방문자는 브라우저의 아이콘 캐시가 만료된 후에 새 아이콘을 볼 수 있다. 이 아이콘 캐시는 만료되거나 수개월 후에 나타날 수 있다.
파비콘 자동 처리
이미지
이 설정 창을 사용하면 생성된 이미지가 지원해야 하는 화면을 선택할 수 있다. @2x는 최신 휴대전화 및 태블릿과 같이 모든 iPhone 4 이상, @3x는 iPhone 6+, 6s+ 및 7+와 같은 휴대전화에서 사용할 수 있는 매우 높은 해상도이다.
@2x 및 @3x asset을 생성하면 더 큰 이미지와 방문자가 사용하는 네트워크 대역폭을 희생시키면서 웹 사이트가 더욱 생생해진다. 사이트를 볼 때 이미지를 전송한다.
WebP 형식 옵션은 Sparkle의 추가 이미지를 생성하는 WebP 형식의 이미지 압축 포맷을 사이트에 각 이미지, 현재 Chrome 및 모바일 Chrome에서 지원된다.
Sparkle은 최신 브라우저가 적절한 해상도 이미지만 다운로드하도록 페이지 코드를 생성하므로 디스크 또는 웹 호스트는 사이트가 매우 클 수 있으며 일부 이미지만 일부 방문자가 사용한다.
추가 이미지 크기 및 형식은 웹 사이트 게시 시간 및 웹 사이트 디스크의 크기에만 영향을 미치며 실제로 사이트 방문자가 페이지를 다운로드할 시간은 이미지 품질, 속도 또는 둘 다를 향상시킨다.
디바이스에 최적화를 위한 이미지 해상도 처리
공유(Sharing)
이 창에서 기본 체크 박스를 활성화하면 주요 소셜 네트워크에서 공유하는 데 필요한 OpenGraph 메타 데이터를 생성할 수 있다. Facebook, Linkedin, Pinterest 및 텔레그램, 슬랙 등의 인앱 공유가 가능하며, 여러분의 사이트가 트위터와 호환되도록 몇 가지 추가 메타 태그가 페이지에 추가된다.
이 설정을 사용하면 각 페이지의 페이지 설정에 선택적으로 공유의 표지 이미지가 될 이미지를 포함할 수 있으며, “카드”. 예를 들어 페이지 설정과 해당 Facebook 카드가 있다. (페이스북 개체 디버거 테스트)
대표 소셜 공유를 위한 세팅본문 내용과 제목 그리고 대표 이미지를 포함하여 카드 디자인 자동완성
Google 애널리틱스
Google 애널리틱스 계정이 있는 경우 애널리틱스 제어판에 있는 식별자를 입력하여 웹 사이트에서 사용자 추적을 활성화할 수 있다. 방문자 프로필 옵션을 사용하면 방문자 식별 정보가 수집되는 익명 모드 또는 추적 모드에서 GA를 실행할 수 있다. 후자는 개인 정보 보호 동의/쿠키 법에 영향을 미친다.
“개인 정보 정책 추가”는 Google의 개인 정보 취급 방침이 포함된 텍스트 요소를 생성하며 Google 웹 로그 분석 사용자는 사이트에 추가하기로 동의하게 되는 것이다.
이 패널에 입력된 정보는 사이트 방문자가 직접 볼 수는 없으며 “구조화된 데이터”로 저장된다. 검색 엔진이 읽고 로컬 검색 결과에서 검색 순위를 향상시키는 데 도움이 되며, 검색 엔진에 웹 사이트의 “카드” 요약이 표시되어 검색 결과에서 눈에 띄는 경우도 있다.
로컬 비즈니스 설정
기타
텍스트 안티 에일리어싱(Anti-Aliasing)은 브라우저에 텍스트가 표시되는 방식에 영향을 미치지만 모바일 장치에서는 지원하지 않는다. Color/subpixel – 안티 에일리어싱은 작은 글꼴 크기에서 가독성을 향상 시키지만 Grayscale은 안티 에일리어싱 된 텍스트보다 더 화려해 보인다. 이 효과는 특히 어두운 배경에 밝은 텍스트(예: 검은색에 흰색)에서 확인할 수 있다. Color/subpixel – 안티 에일리어싱은 일반적으로 애니메이션과 호환되지 않으므로 애니메이션이 있는 페이지는 Color/subpixel – 안티 에일리어싱을 사용하여 과장된 텍스트에서 시각적으로 변경된다. Grayscale 애니메이션이 있는 얇은 텍스트, 애니메이션의 지속 시간, 그리고 과장된 텍스트로 되돌아간다. 이것은 바람직하지 않으므로 Sparkle의 기본값은 Grayscale 텍스트 안티 에일리어싱이 이상적이다.
텍스트 프레임을 벗어나는 텍스트를 숨기면 Sparkle의 레이아웃이 캔버스 편집에 가능한 한 정확하고 가능한 한 가깝게 유지된다.
스크롤이 필요하지 않은 페이지에도 항상 볼 수 있는 세로 스크롤 막대를 추가하면 페이지가 가로로 튀는 것을 방지할 수 있다. 혼합된 길이의 페이지 간에 전환할 때, 이 옵션은 시스템에 수직 스크롤 막대가 있는 경우에만 표시되며 터치 포인팅 장치가 있는 경우에는 그렇지 않다.
아래는 웹 UI 구성과 인터랙션 개념의 이해를 돕고자 웹 디자인을 위한 심플한 툴인 스파클(Sparkle) 사용 가이드를 소개 한다.
Page Setup
각 페이지에는 기본 설정이 필요하다. 첫 번째 팝업은 페이지 유형을 지정한다. 새 사이트를 시작하면 첫 페이지가 “Home page(홈 페이지)”로 설정되고 다른 페이지는 “Regular Page(일반 페이지)”로 설정된다.
두 번째 필드는 페이지 제목이다. 기본적으로 Sparkle은 접두어 “페이지”뒤에 프로그래시브 번호가 붙은 페이지의 이름을 지정한다. 사용자는 이것을 바꿔야한다, 그것은 검색 엔진 관련성에서 매우 중요하기 때문이다. 페이지 제목을 클릭하여 변경할 수 있으며, 페이지 제목은 브라우저에 페이지 및 책갈피 이름으로 표시되며 검색 엔진에 자동 노출된다.
세 번째 필드인 페이지 파일 이름은 대부분 웹 사이트 설정 방법에 대한 세부 정보이지만 검색 엔진에 단서를 제공한다. 뿐만 아니라, 웹 사이트의 첫 페이지는 일반적으로 “index.html”이라고한다. 첫 페이지의 파일 이름은 변경할 수 없다.
Regular Page(일반 페이지)는 기본적으로 페이지 제목에서 파일 이름을 가져 오지만 “사용자 정의 파일 이름”을 클릭하고 페이지 이름을 입력하여 새 파일 이름으로 사용자 정의 할 수 있다.
기본 정보를 완성하기 위해 설명 및 키워드는 소위 말하는 “페이지 메타 태그” 정보의 내용을 검색 엔진 및 기타 로봇 리더기가 페이지 설명으로 사용하는 경우가 있다.
페이지를 퍼블리싱하려고 할때 제외하도록 선택한 경우에 페이지를 편집하고 페이지를 연결할 수 있으며 페이지는 미리보기에서 작동하지만 페이지를 최종 퍼블리싱 할 때 관련 데이터(assets)을 내보낼 수 없으며 페이지에 대한 링크 정보가 적용되지 않는다.
페이지 설정 값
검색 엔진 메타 데이터 생성을 사이트 설정에서 재정의 할 수있는 페이지 설정, 추가 섹션을 전역 설정으로 적용할 수 있다. 디자이너는 소셜 미디어에 공유되는 경우, 추가 적으로 현재 페이지의 커버 이미지를 등록하여 공유되는 소셜 매체를 통해 표시할 수 있다.
페이지 정렬은 윈도우가 레이아웃보다 클 때 페이지 레이아웃이 브라우저에 표시되는 방법을 제어하며 기본값은 센터이다.
페이지의 배경은 Built-in patterns의 Custom patterns, 또는 동영상(Youtube, Vimeo, from Disk)으로 채울 수 있다. 비디오 옵션을 사용하면 전체 창 크기로 확장되는 비디오 배경을 사용할 수 있다.
색상을 선택하려면 둥근 원을 클릭하면 사전 정의 된 색상 견본과 함께 색상 선택 도구가 나타난다. 색상 설정에 대한 자세한 내용은 확인 컬러 페이지를 참고한다.
Managing Pages
새 페이지를 추가하려면 페이지 외곽선 하단의 + (더하기) 버튼을 클릭한다. 새 페이지 또는 페이지 모음 인 섹션을 추가 할 수 있다.
페이지 추가 및 삭제
페이지 추가하기 :
페이지, 섹션 및 메뉴 : 섹션은 여러가지 용도로 사용될 수 있으며, 계층적으로 복잡한 페이지 작업이나 Onepage 작업에 유용하다.
개인 정보 보호 페이지 : 세팅에서 설정 가능하며, 자동 생성된다.
기존 페이지 가져오기 : 코딩 환경이 아니므로 완벽한 코드를 가져올 수 없다. 하지만 단순한 갤러리 형식과 같은 이미지 중심의 페이지는 유사하게 가져올 수 있다.
Editing Content
여러 요소에서 애니메이션을 사용할 수 있다. 애니메이션은 스크롤링과 동기화되지 않고 스크롤링에 의해 트리거된다. 페이지가 로드 될 때 애니메이션 요소가 뷰에 있으면 즉시 트리거된다.
Text : 텍스트 블록을 추가
Box : 박스 추가
Wide box : 브라우저 창만큼 넓게 미리 설정된 상자를 추가
Image : 이미지 추가
Gallery : 이미지 갤러리를 추가
Map : 구글 지도를 추가
Video : 동영상 요소를 추가
Audio : 오디오 요소를 추가
Menu : 메뉴 추가
Button, Text Input, Checkbox and Radio button : 폼 요소 또는 동작 버튼을 추가
Embed : 타사 웹 사이트에서 제공하는 코드를 추가
Twitter widget : 트위터 타임라인이나 트위터 페이지 링크를 추가
Facebook widget : 페이스북의 공유 버튼 또는 페이지 링크를 추가
Animation
여러 요소에서 애니메이션을 사용할 수 있다. 애니메이션은 스크롤링과 동기화되지 않고 스크롤링에 의해 트리거된다. 페이지가 로드 될 때 애니메이션 요소가 뷰에 있으면 즉시 트리거된다.
애니메이션 설정
Fade : 효과 설정
Move Up : 전환 값
Duration : 지속 시간
Delay : 지연 시간
Repeat : 반복 시간
Page bottom offset : 요소가 나타날 때와 비교하여 애니메이션이 트리거되도록 스크롤해야하는 오프셋 값이다. 하단 오프셋을 0으로 설정하면 요소 상단이 표시되는 즉시 애니메이션 트리거가 실행되지만, 약간 지나면 애니메이션을 자연스럽게 표현할 수 있다.
Links
Sparkle의 On Click 메뉴를 사용하면 Text, Image, Button, Menu 항목 또는 Group에 링크 나 동작을 추가 할 수 있다. 기본적으로 메뉴는 “아무 작업도하지 않음”으로 설정되지만 다음 중 하나로 설정할 수 있다.
On Click 이벤트 관리자
Do Nothing : 아무 작업도하지 않음
Go to Page in This Website : 이 웹 사이트의 페이지로 이동
Go to External Link : 외부 링크로 이동
Open Email : 이메일 열기
Call Phone Number : 전화번호로 통화
Download file : 파일 다운로드
The Font Panel
스파클이 제공 한 목록으로 600 개 이상의 웹 글꼴을 설치 가능하며, 구글의 웹 폰트 프로젝트 및 시스템 글꼴을 사용하거나 자신의 웹 글꼴을 Sparkle에 추가 할 수도 있다. 글꼴 패널은 글꼴 메뉴에 표시된 글꼴을 제어하는 데 사용되며, 원하는 글꼴 카드 오른쪽 위에있는 + 버튼을 눌러 열 수 있다.
폰트 관리자
여기에서 사용 가능한 모든 글꼴이 표시되고 활성화 된 글꼴은 모서리에 녹색으로 표시된다. Google의 webfont 색인에서 제공되는 글꼴을 클릭하면 자동으로 다운로드되고 즉시 활성화된다. 사용시 Google에서 제공하는 웹 글꼴이 개인 정보 보호 및 성능을 위해 웹 사이트에 포함된다.
시스템 폰트 설정
Sparkle은 일반적으로 사용되는 글꼴에 대한 글꼴 스택을 미리 정의 했으므로 패널을 사용하여 기본 제공 글꼴을 조정해야한다. 예를들면 Georgia는 Sparkle에 표시되고 Mac 시스템에서는 가장 많이 사용된다. 그러나 Windows 또는 Linux에서 실행되는 브라우저에서는 조지아가 설치되지 않을 가능성이 높으므로 브라우저는 Times 또는 Times New Roman를 사용한다.
마지막으로 사용자 정의 웹 글꼴 창을 사용하여 로컬 시스템에서 웹 글꼴을 추가 할 수 있다. 웹 사이트에서 사용할 때 글꼴 파일은 사이트의 일부로 포함된다. 이 창을 통해 각 글꼴 패밀리에 대해 여러 가중치를 입력 할 수 있으며 단일 글꼴로 그룹화된다.
Sparkle은 TTF, OTF, WOFF 또는 WOFF2 형식의 글꼴을 허용하여 필요한 웹 표준 형식을 내부적으로 생성한다.
웹 디자인을 위한 레이아웃 흐름(Flow)은 페이지를 통해 사용자를 안내하는 행위이다. 모든 사이트는 어떤 형태의 흐름이 있지만 일부는 다른 것보다 매우 효과적이다. 효과적인 흐름은 색상(Color), 요소의 크기(Size), 타이포그래피(Typography) 및 이미지(Image)와 같은 레이아웃과 직접적인 관련이 없는 속성을 포함하여 웹 디자인의 모든 측면을 취하게 된다.
흐름(flow)
스크린샷에서 볼 수 있듯이 페이지를 자연스럽게 읽는다. 사용자가 모든 콘텐츠를 볼 가능성이 높고 중요한 정보를 놓칠 가능성이 적기 때문에 좋은 예제이다.
2, 3, 4, 5 및 6 지점에서 볼 수 있는 다음 섹션으로 방문자의 주의를 끌기 위해 이미지를 사용했다.
인쇄술을 사용하면 3, 7, 8 및 10과 같이 다음 섹션으로 사용자를 안내할 수 있다.
수평 적색 선은 왼쪽에서 오른쪽으로 자연스러운 읽기 순서를 만드는 섹션을 정의하는 데 도움이 된다.
정렬(Alignment)
정렬은 좋은 흐름을 만드는데 도움이 된다. 옆의 예제에서 볼 수 있듯이, 정렬은 전반적인 흐름에서 중요한 역할을 한다. 정렬은 자연스러운 순서에 기여하여 내용을 쉽게 읽고 읽을 수 있게 하기 때문이다.
이를 파악하는 가장 좋은 방법은 현재 사용되는 가장 일반적인 그리드 시스템이 있는 그리드 시스템을 사용하는 것이다. 예제에서 사용한 960 그리드 시스템이다.
“아름다움은 보는 사람의 눈”이라는 글귀처럼 효과적인 웹 디자인은 웹 사이트 디자이너가 아니라 웹 사이트 사용자가 판단한다. 웹 사이트의 유용성에 영향을 미치는 많은 요소가 있으며 형식(모양이 좋음)뿐만 아니라 기능(사용하기가 쉽다)에 관한 것이다.
잘 설계되지 않은 웹 사이트는 실적이 저조하고 Google 애널리틱스의 가장 부적절한 측정 항목 (예 : 이탈률이 높고 사이트에 머문 시간이 짧으며 방문당 페이지가 낮고 전환율이 낮을 때)이 있다. 그래서 좋은 웹 디자인은 무엇일까? 아래에서는 웹 사이트를 예술적으로 기쁘게 하고, 사용하기 쉽고, 매력적이며, 효과적으로 만들어 줄 상위 10가지 웹 디자인 원칙을 탐구해본다.
1. 목적(Purpose)
좋은 웹 디자인은 항상 사용자의 요구를 충족시킨다. 웹 방문자가 정보, 엔터테인먼트, 상호 작용 유형을 찾고 있거나, 아니면 비즈니스 또는 거래하고 있거나? 웹 사이트의 각 페이지에는 분명한 목적이 있어야 하며 가능한 가장 효과적인 방법으로 웹 사이트 사용자의 특정 필요를 충족시켜야 한다.
2. 커뮤니케이션(Communication)
방문자의 궁극적 인 목적은 정보를 얻는 것이고 웹 사이트가 방문자를 효율적으로 알릴 수 있다면 대부분 웹 사이트에서 더 많은 시간을 보낸다. 방문객들과의 원활한 의사 소통을 위해 유용한 트릭은 헤드라인과 하위 헤드라인을 잘 활용하고 와플을 자르기(cutting the waffle) 기법과 긴 뾰족한 문장이 아닌 bullet points를 사용하여 정보를 체계화하는 것이다.
3. 서체(Typefaces)
일반적으로 Arial 및 Verdana와 같은 Sans Serif 글꼴은 온라인으로 읽기 쉽다 (Sans Serif 글꼴은 장식적인 마무리가없는 현대적인 글꼴). 온라인에서 쉽게 읽을 수있는 이상적인 글꼴 크기는 16px이며 최대 3가지 글꼴을 사용하여 디자인을 간소화한다.
효과적인 웹 디자인을 위한 타이포그라피 가이드
4. 색상(Colors)
잘 고안된 색상 표는 사용자 경험을 향상시키기 위해 먼 길을 갈 수 있다. 보완 색상은 균형과 조화를 만든다. 텍스트와 배경에 대비되는 색상을 사용하면 쉽게 읽을 수 있다. 생동감 넘치는 색감은 감정을 조성하므로 드물게 사용되어야 한다 (예 : 버튼/buttons 및 행동 요청/call to actions). 마지막으로, 여백(white space) / 안보이는 면(negative space) 공간은 웹 사이트에 현대적이고 깔끔한 느낌을주는 데 매우 효과적이다. (참고. 보이는 면/positive space, 안보이는 면은 보이지는 않지만 의미나 형태를 가진 면을 의미한다. 착시적 형태라고도 한다.)
안보이는 면(negative space) & 보이는 면(positive space)을 응용하여 디자인된 로고웹 스타일 가이드를 위한 색상 가이드
5. 이미지(Images)
천 마디 말보다 사진을 통해 말하고 웹 사이트에 적합한 이미지를 선택하면 브랜드 위치를 파악하고 타겟 고객과 연결하는 데 매우 효과적이다. 고품질의 전문 사진이 없다면 스톡 사진을 구입하여 웹 사이트의 모습을 조정해 보거나, 인포그래픽(infographics), 비디오 및 그래픽을 사용하는 것이 가장 잘 쓰여진 텍스트보다 훨씬 효과적으로 소통 할 수 있다.
웹 페이지에 이미지 적용 사례
6. 네비게이션(Navigation)
네비게이션은 사람들이 행동을 취하고 웹 사이트를 쉽게 돌아 다니는 것이 얼마나 쉬운지를 보여준다. 효과적인 탐색을 위한 논리적 방법으로는 논리적 페이지 계층 구조(logical page hierarchy), Breadcrumbs(빵 부스러기) 사용, 클릭 가능한 버튼(Buttons) 디자인, 사용자가 세 번의 클릭으로 찾고있는 정보를 찾을 수있는 ‘세 번의 클릭 규칙(three click rule)’을 따르는 것 등이 있다.
네비게이션 적용 사례
7. 그리드 기반 레이아웃(Grid based Layouts)
웹 페이지에 무작위로 콘텐츠를 배치하면 어수선한 외관이 엉망이 될 수 있다. 그리드 기반의 레이아웃은 내용을 섹션(Sections), 열(Columns) 및 상자(Boxes)로 배열하여 균형 잡힌 느낌을 보여주며 보다 나은 웹 사이트 디자인으로 유도할 수 있다.
웹 페이지에 그리드 적용 사례
8. F & Z 패턴 디자인(F & Z Pattern Design)
눈 추적 연구(Eye tracking studies)에 따르면 사람들은 컴퓨터 화면을 “F & Z” 패턴으로 스캔한다고 한다. 사람들이 보는 대부분의 부분이 화면의 상단과 왼쪽에 있으며 화면의 오른쪽이 거의 보이지 않는다고 한다. 시청자의 시각적 흐름을 강요하려는 것이 아니라 효과적으로 디자인 된 웹 사이트는 독자의 자연스러운 동작과 중요도 (왼쪽에서 오른쪽, 위에서 아래로) 순으로 정보를 표시한다.
F 패턴의 원리3 개의 웹 사이트에 대한 사용자의 눈 추적 연구 결과의 히트맵(heatmaps 또는 Visual path)이다. 사용자가 가장 많이 보인 영역은 빨간색으로 표시되며, 노란색 영역은 보기가 적고 파란색 영역이 가장 적게 표시된다. 회색 영역은 반응이 없는 곳이다.F 패턴과 Z 패턴의 비교
9.로드 시간(Load Time)
일반적으로 많은 사람은 오래 걸리는 웹 사이트를 싫어한다. 페이지 로드 시간을 보다 효과적으로 만드는 팁에는 이미지 크기(크기 및 배율) 최적화, 사용되는 코드를 CSS 또는 JavaScript 파일 (HTTP 요청 감소) 및 HTML, CSS, JavaScript (로드 시간 단축을 위해 압축됨) 축소 등이 있다.
10. 모바일 친화적(Mobile Friendly)
이제는 여러 화면 크기의 여러 기기에서 웹 사이트에 액세스하는 것이 일반적이므로 웹 사이트가 모바일 친화적인지 여부를 고려하는 것이 중요하다. 웹 사이트가 모바일 친화적이지 않은 경우 반응형 레이아웃으로 다시 작성하거나 (즉, 웹 사이트가 다른 화면 너비로 조정 됨) 전용 모바일 사이트 (모바일 사용자 전용으로 최적화 된 별도의 웹 사이트)를 만들 수 있다.
본질적으로 어떤 것도 한 지점에서 다른 지점으로 선형 이동하지 않는다. 실제로, 물건이 이동할 때 가속하거나 감속하는 경향이 있다. 우리의 뇌는 이러한 종류의 모션을 예상하므로 애니메이션을 만들 때 이러한 모션을 활용해야 한다. 자연스러운 모션은 앱 사용자에게 편안한 느낌을 주고 전반적인 사용 환경을 개선해 준다. – Paul Lewis(Paul is a Design and Perf Advocate)
easing은 애니메이션을 자연스럽게 만든다.
UI 요소에 대해 ease-out 애니메이션을 선택한다.
짧게 유지할 수 있는 경우를 제외하고 ease-in 또는 ease-in-out 애니메이션을 피한는 것이 좋다. 최종 사용자에게 굼뜬 느낌을 줄 수 있기 때문이다.
전통적인 애니메이션에서 느린 시작 후 가속하는 모션을 ‘slow in’이라고 하고 빠른 시작 후 감속하는 모션을 ‘slow out’이라고 한다. 웹에서는 각 모션에 대해 ‘ease in’ 및 ‘ease out’이라는 용어를 주로 사용한다. 두 모션이 조합된 경우는 ‘ease in out’이라고 한다. easing은 실제로 애니메이션을 더욱 부드럽고 편안한 느낌이 들게 만드는 프로세스이다.
1. 선형(linear) 애니메이션
easing을 사용하지 않은 애니메이션을 선형이라고 한다. 시간 경과에 따라, 값이 균일하게 증가하며, 선형 모션을 사용할 경우, 로봇처럼 부자연스러운 느낌을 주므로 사용자가 불편함을 느낄 수 있다. 일반적으로, 선형 모션을 피하는 것이 좋다.
2. Ease-in 애니메이션
Ease-in 애니메이션은 ease-out 애니메이션과 반대로 느리게 시작했다가 빠르게 끝난다. 이러한 종류의 애니메이션은 무거운 돌이 떨어지는 것처럼 느리게 시작하고 낮은 쿵 소리와 함께 빠르게 지면을 때린다. 하지만 상호작용 관점에서 ease-in은 갑작스럽게 끝나기 때문에 약간 부자연스러운 느낌이 들 수 있다. 실제 세상에서 움직임은 단순히 갑자기 멈추는 것이 아니라 감속하는 경향이 있기 때문이다. 또한 ease-in은 시작 시 굼뜨게 움직이는 듯한 잘못된 효과로 인해 사이트나 앱에서 반응 인지에 부정적 영향을 미칠 수 있다.
3. Ease-out 애니메이션
Easing out은 선형보다 더 빠르게 애니메이션을 시작하며 마지막에 감속한다. Easing out은 빠른 시작으로 애니메이션에 반응 효과를 주면서도 마지막에 자연스러운 감속 효과를 나타내기 때문에, 일반적으로 사용자 인터페이스 작업에 가장 적합하다.
4. Ease-in-out 애니메이션
Easing in 및 easing out은 차량의 가속 및 감속과 유사하며, 적절히 조합하여 사용하면 easing out만 사용하는 것보다 더욱 드라마틱한 효과를 제공할 수 있다.
ease-in은 애니메이션을 더디게 시작하기 때문에 애니메이션 기간을 지나치게 오래 설정하지 않는 것이 효과적이다. 일반적으로 300-500ms 사이의 임의 값이 적합하지만, 정확한 값은 프로젝트의 느낌에 따라 상당히 달라진다. 그러나 느린 시작, 빠른 중간, 느린 종료로 인해 애니메이션의 대비가 증가하여 사용자에게 만족감을 줄 수 있다.
5. Ease In Back 애니메이션
Ease In Back 은 애니메이션이 초기 키프레임 값을 지난 다음 끝에 도달함에 따라 가속되는 경우이다. 이것은 애니메이션에 바운스를 만들어 관객을 준비시키고 주요 액션을 강화하는 예측 액션 역할을 한다. 천천히 Ease In과 매우 유사 하게 Ease In Back는 개체를 보기에서 부드럽게 전환하는 데 적합하다.
6. Ease Out Back 애니메이션
Ease In Back 의 반대이다 . 애니메이션은 빠르게 시작한 다음 느려지고 종료 키프레임의 값을 지나간다. 이렇게 하면 기본 동작에 대한 부드러운 종료 전환을 만드는 정착 역할을 하는 애니메이션에 바운스가 생성된다. Ease Out 과 유사하게 Ease Out Back 은 개체를 보기로 이동하는 데 적합하다.
7. Ease In And Out Back 애니메이션
애니메이션이 초기 키프레임 값을 초과할 때 천천히 시작한 다음, 속도가 느려지고 끝 키프레임 값을 초과하기 전에 빠르게 가속된다. 이것은 최종 상태 이전에 리바운드 모션과 함께 시작, 빠른 모션에서 예상되는 바운스를 만든다.
컬러, 실볼, 그림 문자, 이모티콘, 배지, 로고, 아이소타이프, 길 찾기 장치 등 생각이나 의미를 나타내는 모든 것이 아이콘이다. 아이콘은 정보와 지시 사항을 전달한다. 가령 의료, 여행, 브랜드 등 수많은 분야에서 아이콙이 쓰인다. 아이콘은 우리가 사람들에게 알리고자 하는 모든 것을 표현할 수 있다. 아이콘은 화장실의 위치를 안내해 주고, 우리가 선호하는 브랜드를 상징하고, 다음 행선지를 가리킨다. 그렇다면 아이콘의 형태와 기능, 예술과 과학을 통해 그 원리와 비결을 밝히고, 디자이너가 이 단순하고도 비밀스러운 언어를 다룰 때 빠지기 쉬운 함정과 문제가 무엇인지 파악하고 해결할 수 있게 돕는 방법을 찾아보자. – 펠릭스 소크웰(세상을 사로잡는 아이콘은 어떻게 디자인되는가 서문 중에서~) –
아이콘이란?
아이콘의 기능
아이콘 만들기
좋은 아이콘의 기준
플랫폼 아이콘 가이드라인
아이콘 디자인의 10가지 실수
질의응답
내가 기획한 앱/웹의 아이콘을 아래의 가이드에 맞게 디자인하기 아래의 참고 링크를 중심으로 각 플랫폼에 맞는 아이콘을 디자인하여 진행중인 미세먼지 프로젝트에 적용하여 본다.
1단계 : 미세먼지앱에 사용되는 아이콘을 기획하고 2단계 : Sketch 또는 InVision Studio를 사용하여 24px 또는 32px 그리드에 벡터 아이콘을 디자인한다. 3단계 : 디자인된 결과물을 최종 SVG 파일로 export 시킨다.
Imagery란 오감에 호소하는 언어와 기술에 사용되는 문학적 용어이다. 디자이너가 냄새, 시력, 맛, 촉감 또는 청각에 호소하도록 무언가를 기술하려고 하면 Imagery를 사용한다. 디자이너가 비교를 사용하여 감각에 호소하기 때문에 종종 Imagery는 직유 또는 은유와 같은 다른 문학적 장치를 기반으로 구축된다. 사전적 의미로는 ‘언어에 의하여 마음속에 생성되는 이미지군(image 群)’.
기능 / Role
전달 내용 / Subject matter
품질 / Image qualities
아래 슬라이드 자료 3번째 항목은 동영상이므로 위의 내용을 참고한다.
질의응답
1. 여러가지 자료가 무수히 많은 것 같은데, 정작 필요한 정보는 없는 경우가 발생하는 이유는 무엇일지 생각해보자.
2. 웹을 통한 이미지 라이브러리 자료 관리를 통해 프로젝트 진행 과정에서 효율적으로 사용되고 있는지 또는 라이브러리를 모든 분야, 카테고리, 기능별로 구분하여 활용하고 있는지 생각해보자.
한 연구에 따르면 사용자 인터페이스의 70%는 다른 사람과 의사 소통하는 가장 좋은 방법으로 타이포그래피에 의존한다고 한다.
타이포그래피는 사용자 인터페이스에서 중요한 역할을하며, 타이포그래피 디자인을 개선하는 것은 UI와 UX를 개선하는 중요한 단계이다.
사용자 중심 디자인은 전자 책 또는 블로그 테마 디자인과는 다르다. 비록 유형 중심 디자인의 원리가 여전히 기술을 적용하고 있지만 UI에서 더 나은 타이포그래피를 위한 8가지 규칙이 있다.
1. Hierarchy
콘텐츠를 효과적으로 전달하기 위한 가장 중요한 기술 중 하나는 타이포그래피 계층을 사용하는 것이다.
2. Font Choices
잘 알려진 안정된 소스 중에서 선택한다.
Sans-Serif 또는 Serif 는 안전한 선택이다.
다양한 크기에서 잘 작동하는 서체를 선택하는 것이 중요하다.
3. Text Sizing
상대단위와 절대단위
[ 절대단위 ] cm : 센티미터 mm : 밀리미터, cm 의 1/10 pc : 1pc 는 12 pt pt : 12pt 는 16px in : 1in 2.54cm
[ 상대단위 ] px : pixel, 모니터에 따라서 상대적인 크기를 갖음 em : font-size, 일반적으로 해당 폰트의 대문자 M의 너비를 기준으로 함 ex : x-height, 해당 폰트의 소문자 x의 높이를 기준으로 함 % : 브라우저 기본 글꼴 크기를 100% 하고 상대적 크기를 나타냄
4. Text Aligned
5. Line Spacing
6. Letter Spacing
헤드라인과 같은 더 큰 유형의 크기는 글자 간격을 더 엄격하게 하여 가독성을 높이고 글자 사이의 간격을 줄인다. 문자 크기가 작을수록 글자 간격이 좁아 가독성이 향상될 수 있다.
7. Color & Contrast
화면에서 본문 텍스트를 검은색 대신 어두운 회색으로 만드는 것을 고려하자. 화면은 종이보다 대비가 더 심하므로 전체 대비로 읽기가 더 어려워진다.
8. White Space
음수 공간(Negative Space)이라고도 하는 여백은 디자인 구성에서 요소 사이의 영역을 의미한다. 여백이 균형이 맞지 않으면 사본을 읽기가 어렵다.
