슬로워크 블로그

슬로워크에서 제가 속한 컨버전스디자인팀의 KPI는 풀스택 디자이너(Full-stack designer)되기입니다. 그래서 디자인을 제외하고 가장 관심있는 웹기획을 스터디했고, 내/외부 프로젝트 스토리보드를 제작하면서 직접적인 경험을 하고 있습니다. 이 경험을 통해 배운 스토리보드 제작 전 프리핸드 스케치의 필요성을 공유합니다.

스토리보드? 프리핸드 스케치?

1. 스토리보드

진행중인 내부 프로젝트의 스토리보드

스토리보드는 실제 작업 담당자(디자이너, 개발자, 퍼블리셔)가 업무를 수행하기 전에 이해해야 할 작업지시서로, 고객의 의뢰에 따른 머리 속의 비즈니스 모델을 표현하는 것입니다.

2. 프리핸드 스케치

진행중인 내부 프로젝트의 프리핸드 스케치

프리핸드 스케치는 말그대로 연필 등의 도구로 스케치하는 작업으로, 스토리보드 제작을 위한 사전 작업입니다. 고객의 니즈와 자신의 경험 또는 벤치마킹한 내용을 구체화해서 제작에 필요한 규칙, 범위 등을 미리 설정하여 스토리보드 작성의 완성도를 높이고 작업자(디자이너, 개발자, 퍼블리셔) 간의 원활한 의사소통을 위해 실시하는 작업입니다.

프리핸드 스케치가 효율적인 이유

1. 시간 절약

대화로 이해되지 않는 부분을 스케치를 통해 좀 더 정확하게 전달할 수 있습니다.

실제로 말로 표현할 때는 형태, 색상, 크기, 기능 등의 요소가 빠지기 때문에 같은 단어라도 작업자가 이해하는 것과 고객이 이해하는 것은 다를 수 있습니다. 그렇기 때문에 스케치 과정에서 빠르게 오점을 찾아내어 정리할 수 있고, 스토리보드 제작 시간을 단축할 수 있습니다.

2. 큰 구조 파악
제작될 산출물의 개념부터 전략과 전술 등의 핵심 주제 논의를 통해 제작되는 산출물이 왜 만들어지고 그것을 통해 고객이 어떤 핵심 서비스를 받게 되는지 등의 전체적인 서비스의 큰 그림을 스케치를 통해 전개해 나갈 수 있습니다. 이러한 생각 공유를 통해 하나의 목표 지점에 도달할 수 있습니다. 쇼핑몰 구축을 예로 들면, 기능 결정이 화면 UI/UX 구조에 많은 영향을 끼칠 수 있습니다.

검색 중심의 고객 니즈에 부합하지 않은 카테고리 중심의 홈페이지(29cm)

검색 중심의 고객 니즈에 부합하는 홈페이지(쿠팡)

29cm는 커머스와 다르게 브랜드와 스토리 중심으로 집중하고 고민하는 온라인 쇼핑몰이고, 쿠팡은 검색 중심의 쇼핑몰로 제품 판매에 포커스를 맞추고 있습니다. 만일 고객 니즈가 검색 중심의 화면(쿠팡)인데 작업 전 사전에 충분히 토론이 되지 않으면 산출물이 고객 니즈와 부합하지 않은 엉뚱한 방향(29cm)으로 흐를 수 있습니다. 개념 파악에서 결정된 사항은 서비스의 중심 뼈대이므로 중간에 변경되어서는 안 된다는 점을 협업하는 작업자 및 고객과 공유해야 합니다. 또한, 변경 사항 및 생각이 다른 부분을 최대한 빠르게 찾아내어 결정하고 진행해야 합니다.

3. 스토리텔링

스토리보드와 다르게 프리핸드 스케치는 빠르게 하나하나의 화면 구조를 정리하고 그곳에서 이뤄지는 이동 경로를 전개해 제작물의 큰 흐름을 파악하는 최적의 도구라 할 수 있습니다.

프리핸드 스케치에서는 화면의 구조뿐만 아니라 네이밍, 문구, 기능, 링크, 예상치 못한 고객의 돌발 행동 등을 정의하여 다룰 수 있습니다. 프리핸드 스케치 작업을 거치지 않은 채 바로 스토리보드 작업을 진행하는 경우가 많은데, 머리 속에 있는 혼돈의 경험을 바로 스토리보드로 제작하면 원활한 의사소통뿐만 아니라 정교한 화면설계를 할 수 없습니다.

그렇다면 프리핸드 스케치는 어떻게 하는 걸까요? 몇 가지 팁을 공유합니다.

프리핸드 스케치 제작 팁

1. 그리는 데에 너무 많은 시간을 소요하지 마세요.

예쁘게 그릴 필요가 없습니다. 상대방이 충분히 알아볼 수 있는 정도의 화면으로 주요 구조, 핵심 기능, 내용을 기재하면 됩니다.

2. 스토리를 그리세요.

화면 이동 흐름을 화살표로 그리고 다음 화면을 간단하게 연결해 나가세요. 그러면 전체적인 화면의 로직을 확인할 수 있습니다.

3. 치환, 생략을 이용하세요.

알고 있는 기능이나 개념은 생략해도 됩니다. 어차피 스토리보드를 제작할 때 정교하게 다뤄지므로 영역 표시 및 간략한 기술로 마무리하세요.

프리핸드 스케치란 머리 속에 상상하고 있는 이미지를 그림으로 제작하는 것이 아니라, 그림을 통해 점차 완성도가 높은 이미지를 만드는 것을 의미합니다. 스케치는 미래도시, 웃음짓는 사람들, 파괴된 도시 등과 같이 컴퓨터로도 표현할 수 없는 이미지를 형상화할 수 있습니다.

프리핸드 스케치가 스토리보드로 제작된 화면

이제 스토리보드 작업을 하기 전에 간단한 스케치 과정을 거쳐 보세요. 좀 더 쉽고 효과적으로 화면 기획을 할 수 있을 것입니다.

제가 속한 슬로워크 컨버전스디자인팀에서 UI디자이너를 채용하고 있습니다. 저와 함께 풀스택 디자이너로 발전할 분을 찾습니다.

아름다운가게(www.beautifulstore.org)는 지난 2016년 4월, 웹사이트를 새로운 웹사이트를 공개했습니다. 이번 웹사이트 리뉴얼(개편)은 슬로워크에서 진행하였는데요. 아름다운가게 웹사이트는 어떤 과정을 거쳐 새롭게 태어났을까요? 그 과정을 소개합니다.

아름다운가게 웹사이트 개편을 위해, 슬로워크와 아름다운가게의 담당자 간 사전 미팅을 여러 차례 진행했습니다. 기존의 웹사이트는 다양하고 많은 콘텐츠를 가지고 있었으나, 사업이 점점 커져감에 따라 메뉴 구조와 디자인 톤에 변화를 주고 사용성을 높여야 하는 상태였습니다. 이를 효과적으로 개선하고자 몇 차례 회의을 진행하였고, 시작 전 리뉴얼의 큰 방향성과 목표를 세웠습니다.

기존의 아름다운가게 홈페이지

아름다운가게 리뉴얼 방향성 및 목표

1. 메인 페이지에서 다양한 콘텐츠를 노출

2. 아름다운가게의 아이덴티티 컬러를 주로 사용하여 따뜻하고 친근한 느낌 전달

3. 각 패밀리 사이트들을 메인 사이트에서도 한눈에 볼 수 있도록 구성

4. 직관적인 디자인을 통해 웹사이트 사용성 제고

5. ‘매장찾기’가 가장 중요하므로, 쉽게 사용자들이 접근할 수 있도록 단독 메뉴화

이 방향을 다음과 같이 적용하여 리뉴얼 작업을 진행했습니다.

1. 메인 페이지에서 다양한 콘텐츠를 노출

대부분 웹사이트의 메인 페이지에서는 큰 사이즈의 메인 배너를 사용하는 것이 아직까지 일반적입니다. 하지만 아름다운가게는 콘텐츠를 다양하게 보여줄 방법을 고민했습니다. 이에 따라, 메인 배너 기능을 하는 요소와 다양한 콘텐츠를 함께 노출하기로 했습니다.

초기 기획안과 (moqups 툴 사용, 관련 내용 더 보기)  실제 운영 중인 현재 메인 페이지 비교

주로 글과 사진으로 이루어진 콘텐츠 중심의 배열로 메인 페이지의 기획안이 확정되었고, 이를 기반으로 다양한 디자인 시안이 오갔습니다. 그 결과 현재 아름다운가게의 메인 페이지는 콘텐츠 위주의 생동감 있는 메인 형태를 취하고 있습니다.

2. 아름다운가게의 아이덴티티 컬러를 주로 사용하여 따뜻하고 친근한 느낌 전달

아름다운가게의 CI는 잎들이 모여 꽃이 된 형태입니다. 이 형태는 나보다 우리를 먼저 생각하고 환경을 지키기 위한 다섯 가지 실천(기증, 되살림, 윤리적소비, 자원활동, 나눔활동)의 상징으로, 나눔과 순환을 소중히 여기는 그물코정신과 되살림정신을 내포하고 있습니다. 특별히 아름다운가게의 색상인 연두색(mild green)은 생명과 환경, 미래와 희망을 상징합니다. 이 메인 색상을 웹사이트에 전면적으로 통일되게 사용함으로써 아이덴티티를 확실하게 전달했습니다.

아름다운가게 주요 컬러가 사용된 아이콘 디자인 예시

3. 각 패밀리 사이트들을 메인 사이트에서도 한눈에 볼 수 있도록 구성

아름다운가게는 여러 패밀리 사이트를 가지고 있습니다. 그 중에서도 자원활동, 나눔교육, 사회적기업센터, 인재채용 페이지는 더욱 중요한데요. 해당 페이지들이 메인 사이트와 함께 한눈에 보이면서도 접근하기 쉽도록 초점을 맞추었습니다. 상단 바에 각 패밀리 사이트들로 이동할 수 있는 탭 구조를 만들었습니다. 이를 통해 메인 사이트와 패밀리 사이트 간에 이동이 자유롭게, 또한 언제든 메인 사이트로 돌아올 수 있게 되었습니다. 또한 다른 패밀리 사이트들은 셀렉트 박스를 통해 이동할 수 있게 상단에 패밀리 사이트들을 배치해 사용성을 높였습니다.

4.  직관적인 디자인을 통해 웹사이트 사용성 제고

아름다운가게 웹사이트 리뉴얼 작업에서 가장 중점적으로 고려한 포인트는 ‘사용성을 높인다’라는 점이었습니다. 다양하고 많은 정보를 가지고 있는 사이트이기 때문에 메뉴 구조부터 디자인까지 복잡하기보다는 심플하고 간결하게 혼란을 주지 않는 것이 중요했습니다. 사이트를 이용하는 연령대와 주 사용자를 고려해 최대한 직관적이고 쉽게 사이트를 이용할 수 있도록 하는 것입니다.

이에 따라, IA(Information Architecture)를 구성할 때 사용자들이 메뉴명만 보고도 어디로 이동할지 고민하지 않고 예측할 수 있도록 메뉴명을 조금씩 변경했습니다. 변경한 사업소개 하위 메뉴명으로, 아름다운가게의 사업을 한 페이지에서 볼 수 있는 ‘사업 한눈에 보기’와 연혁을 대신한 ‘걸어온 길’ 등이 있습니다.

또한, 각 하위 메뉴가 많은 상위 메뉴에는 게이트 페이지를 두어 각 메뉴들에 대한 설명과 어느 페이지로 이동해야 내가 원하는 정보를 얻을 수 있는지 간편히 볼 수 있게 하였습니다. 각 게이트 페이지에서는 하위 메뉴들의 간단한 소개와 사진을 통해 해당 메뉴를 사용자가 인지할 수 있습니다.

5. ‘매장찾기’가 가장 중요하므로, 쉽게 사용자들이 접근할 수 있도록 단독 메뉴화

아름다운가게에서 주요한 참여 방법은 매장에 기부하거나 매장에 방문해 물건을 구입하는 것입니다. 그렇기 때문에 ‘매장찾기’ 메뉴가 사이트 내에서 가장 중요한 역할을 하게 되었습니다. 따라서 매장찾기를 메뉴 중에서도 가장 우선순위에 두어 어떤 사용자가 보더라도 쉽게 눌러보고 확인할 수 있게 유도하였습니다. 또한, 현재 내 위치를 중심으로 가까운 매장을 찾을 수 있고, 검색을 통해서도 매장을 쉽게 찾을 수 있게 했습니다. 지도 위에 매장을 위치를 바로 보여주어 정확성 또한 높였습니다. 해당 매장에 대한 자세한 정보는 팝업 창으로 뜨고 공유, 인쇄하기도 간편하게 구성했습니다. 매장찾기 메뉴를 구성하면서 사용성 테스트를 함께 진행하여 사용자가 원하는 정보와 구성을 최적으로 찾을 수 있었습니다.

아름다운가게 웹사이트 리뉴얼은 킥오프미팅부터 메인 사이트 오픈까지 10개월의 기간이 걸렸습니다. 그만큼 완성도와 사용성에 중점을 두었고, 웹사이트 리뉴얼 이벤트 진행 당시 사용성이 높아졌다는 후기를 받으며 성공적으로 운영하고 있습니다. 리뉴얼한 아름다운가게 웹사이트, 지금 방문해보세요!

UI라는 단어는 이제 전문가가 아니더라도 쉽게 들을 수 있습니다. 웹, 모바일 디자이너거나 비디자이너라도 관련 프로젝트를 준비하고 있다면 알아두어야 할 8가지 웹, 모바일 UI정보를 모았습니다.

1. UI의 9가지 상태

UI디자인은 기존의 정적인 디자인과는 다르게 동적으로 변화합니다. 상태나 상황에 따라 여러 가지 형태로 변화합니다. 변화에 따른 다른 데이터를 표현하고, 그 표현 양식이 달라지기도 합니다. UI디지안을 할 때 UI의 9가지 상태를 가이드라인으로 삼으면 사용자를 혼란에 빠뜨리는 일을 예방할 수 있습니다.

UI의 9가지 상태 ➔ 더 읽기

2. 모바일 사용자 UX의 시작, 터치 제스처

터치스크린 기반 인터렉션의 중요성과 터치제스처의 9가지 용어를 정리했습니다. 터치제스처의 기본 정의와 용어를 이해한다면 디자이너, 개발자, 프로젝트 담당자의 소통이 명확해질 것입니다.

모바일 사용자 UX의 시작, 터치 제스처 ➔ 더 읽기

버튼색상에도 정답이 있다 ➔ 더 읽기

6. 스크롤 UI를 대체하는 방법이 있을까요?

화면을 꽉 채우는 배경 이미지와 함께 타이포그래피를 적절히 배치하는 디자인이 많아지고 있습니다. 이런 디자인에서는 스크롤을 유도하는 UI요소가 자주 보이는데요, '스크롤을 해주세요'와 같은 요소를 넣는 것은 자연스러운 콘텐츠의 이해를 방해할 수 있습니다. 스크롤 안내 요소 없이 자연스럽게 스크롤을 유도하는 방법을 알아봅니다.

스크롤 UI를 대체하는 방법이 있을까요? ➔ 더 읽기

7. 모바일웹에서 헤더를 꼭 고정해야 될까요?

모바일 웹을 서핑 하다 보면 1. 고정된 헤더, 2. 콘텐츠와 같이 스크롤 되는 헤더, 3. 하단 고정 내비게이션 (주로 앱에 많습니다.)를 발견할 수 있습니다. 제작자들은 메뉴를 쉽게 클릭할 수 있는 고정된 헤더를 선호하는데요, 어떤 방식이 더 좋을까요? A/B 테스트를 통해 얻은 인사이트를 공유합니다.

모바일웹에서 헤더를 꼭 고정해야 될까요? ➔ 더 읽기

8. 새로운 UI로써의 No-UI

새로운 기술은 그에 적합한 새로운 디자인적 접근이 필요합니다. 새로운 기술이 가져다주는 NO-UI를 이해하는 글을 읽어보세요.

새로운 UI로써의 No-UI ➔ 더 읽기

웹사이트를 제작하고 운영하면서 콘텐츠에 대한 중요성을 다시 한 번 강조하여도 부족함이 없습니다만, 좋은 콘텐츠를 보유하였더라도 이를 출판(발행)할 매체가 없다면 필요한 사람들에게 그 정보를 전달하기가 어렵습니다. 네트워크와 인터넷 기술의 발전으로 고전적인 HTML 문서를 게시하는 것부터 간편하게 스마트폰에서 업로드 할 수 있는 수많은 방법이 생겨났습니다.  

하지만 기관을 대표하는 공신력 있는 웹사이트를 제작하는 것은 단순한 SNS 페이지를 보유하는 것 이상으로 고려해야 할 사항이 많습니다. 이번 포스팅에서는 Mr.slo의 예시로 독립적인 웹사이트의 개발 및 운영에서 필수적으로 알고 있어야 할 사항에 대해 설명하도록 하겠습니다.

가상사례

A 기관의 담당자인 Mr.slo는 최근 신설된 A 기관의 온라인 마케팅 담당자로서 부임하게 되었습니다. 

<다양한 감정을 가진 Mr.slo>
출처:슬로데이 인스타그램

사회활동가로 일하던 Mr.slo는 혼자서 간단한 웹사이트를 만들어 운영해 본 경험이 있으며 자신의 블로그를 운영하고 있지만, 그저 단순한 자기 주변의 가십거리 정도를 올리는 용도로 사용 중입니다.

그에게 부여된 임무는 바로 ‘A 기관의 홈페이지(웹사이트)’를 만들어라 - 라는 것입니다. 일부의 정부 지원금과 지정기부금 단체로써 모금된 금액으로 운영되는 A 기관은 빠듯한 예산 중 일부를 할애하여 사업예산을 이미 책정해 둔 상태이고, 기관의 사업범위 중 온라인 마케팅과 관련된 부서나 협력업체 거래는 전혀 없는 상태입니다.

Mr.slo는 우선 사업진행을 위해 관련 업체를 섭외해 보기로 했습니다. '홈페이지 제작’으로 인터넷으로 검색하니 수많은 업체의 링크와 광고글, 블로그글, 까페글로 화면이 가득 차며 제각각 장점을 내세우는 문구들로 가득합니다. 몇 가지 글을 클릭해 읽어보다 도통 무슨 소린지 알 수 없는 내용을 반복적으로 읽다 지쳐 가장 위쪽에 있는 업체부터 클릭해 천천히 둘러보기 시작했습니다. 

다들 자신들의 방법론과 솔루션을 장점으로 내세우며 견적문의로 유도하는 구조 속에 몇 가지 업체의 사이트에 견적문의 글을 남깁니다.

"Q: 홈페이지 제작 견적 문의드립니다.

저희는 작은 NGO기관입니다. 현재 웹사이트는 없는 상태이며, 간단하고 심플하지만 기관을 잘 나타낼 수 있는 이미지와 추후 사업분야의 확장을 고려한 확장성 있는 형태의 웹사이트를 제작하고 싶습니다. 현재 예산은 X백만 원으로 책정되어 있습니다. 견적서와 작업일정을 알려주세요."

글을 남긴 뒤 몇 몇개 업체에서 답변 메일과 전화가 걸려왔고, 그중 몇 개의 업체로부터 최저금액과 최고금액의 차이가 10배 가까운 견적서들이 수신됩니다. 전화로 문의한 업체들은 기관의 규모와 ‘사이트맵’이 정해져 있는지, 홈페이지에서 원하는 기능들이 어떤 것인지를 물어봅니다. 그렇게 수집된 견적서들에는 50만원 부터 1000만원 까지 200배가 차이나는 가격이 적혀있습니다.  Mr.slo는 대체 이게 무슨 차이인지, 누가 사기를 치고 있는지 혼란스러운 와중에 얼마 전 S 에이전시와 웹사이트를 제작한 활동가 친구 B에게 이에 대해 문의를 하게 됩니다.

“대체 견적이 왜 이렇게 천차만별이지?"

일반적인 공산품과는 달리, 웹사이트는 기능과 구조, 그에 따른 운영 시스템에 따라 제작 및 운영에 드는 비용이 크게 달라집니다. 이를 결정하는 것은 제작하려는 웹사이트의 목적과 운영에 필요한 인적/물적 자원의 유무에 좌우됩니다.

기본적으로 고려해야 할 지점은 도메인 등록 및 연결 / 웹사이트 개발 / 웹서버 또는 웹호스팅 / 운영 및 유지보수 입니다.

<IP주소와 도메인의 동작개요>
출처:KISA, KRNIC

웹사이트 개발

웹 브라우저가 인식할 수 있는 언어 또는 프로그램으로 웹사이트를 만들어 내는 일련의 과정으로 해당 분야에 지식이 있는 전문인력이 그 역할을 수행합니다. 일반적으로 개발작업은 투입인력과 투입시간에 비례하여 산정되며 복잡하고 어려울수록 비용이 증가합니다. 개발 단계는 개략적으로 ‘요건분석 > 기획 > 설계 > 디자인, 프로그램 개발 > 검수 > 납품’의 단계로 진행됩니다. 이 단계 중 기획-설계 부분에서 구축하려는 웹사이트가 가진 성격과 요구되는 기능/디자인의 요소를 정확하게 커뮤니케이션 하는 것이 중요합니다. 단순히 '있으면 좋겠다' 라는 생각으로 기능이나 페이지를 추가할 경우, 개발에 추가되는 비용뿐만 아니라 이를 운용함에도 물리적 비용뿐만 아닌 시간과 인적자원이 투입됨을 유념하여야 합니다. 

정해진 가격을 제시하는 아주 저렴한 웹사이트를 제작하는 업체의 경우, 본인들이 보유하고 있는 플랫폼 또는 무료로 제공되는 플랫폼 구조 속에 기관에서 제공되는 이미지(주로 로고나 활동사진)와 텍스트를 입수한 뒤 액자에 사진을 넣듯이 정해진 틀에 내용을 채워 넣는 식으로 작업이 이루어집니다. 필연적으로 제작에 필요한 기간 역시 짧은 편이며, 단순히 기관/단체의 연락처와 하고 있는 일 정도를 대외적으로 알리는 용도로는 부족함 없이 사용할 수 있습니다. 다만, 정해진 틀 이상의 작업을 고려하여 제작되지 않았으므로 추후 확장성에 매우 제한적인 단점이 있습니다.

웹호스팅
개발된 웹사이트가 언제나 사용자가 접근할 수 있도록 상시 전원과 인터넷 네트워크에 연결된 컴퓨터, 즉 웹 서버에 위치해야 합니다. 물론 집이나 회사에 서버를 설치하고 유지할 수 있으나 전원유지에 필요한 전기요금과 방열/방습 등 환경적인 요인, 그리고 정전 등의 불가피한 상황에서도 정상적인 서비스가 유지될 수 있는 웹서버/호스팅 업체의 서비스를 이용하는 것이 일반적입니다. 소규모 웹사이트의 경우 1대의 웹서버 자원을 모두 사용하지 않고 호스팅 업체에서 제공하는 서버의 일부 용량과 회선을 임대하는 월간 지불방식을 주로 이용합니다.

<충격과 공포의 구글 IDC 센터에서 서버를 관리중인 엔지니어>
출처: 구글 데이터센터

자료를 저장할 수 있는 용량인 HDD용량과, 하루 전송량이 제한된 경우 일일 트래픽(업로드+다운로드 합산)을 주의하여 계약해야 합니다. 저렴한 호스팅 서비스 중 일부는 제공되는 일간 트래픽 용량이 적어 웹사이트에서 제공할 콘텐츠가 대용량 자료일 경우 수 명이 여러 차례 다운로드 했을 때 일일 트래픽을 소진하는 시점부터 자정까지 해당 일의 웹사이트 접속이 차단되는 경우가 발생할 수 있습니다. 호스팅 계약 시 트래픽을 계산하는 기준이 보통 일 3Gbyte 와 같이 용량 단위로 측정이 되는데, 간단히 3Mbyte의 영상을 1000번 조회(또는 다운로드)했을 때 3000Mbyte = 3Gbyte 용량을 사용한다고 볼 수 있습니다. 이러한 방식을 고려하여 제공하려는 콘텐츠의 종류와 용량을 미리 파악하여 서비스를 선택합니다.

운영 및 유지보수 

개발이 완료된 웹사이트가 웹호스팅을 통해 사용자에게 상시 제공되도록 설정된 이후에 실질적인 웹사이트의 운영 시 발생할 수 있는 추가적인 작업에 대한 필요성과 웹사이트의 기능이 불가항력적인 이유로 인해 정상적으로 작동하지 않을 때 이를 위해 투입되어야 하는 물적/인적 자원 소요를 말합니다. 작은 기관과 단체의 경우 내부에 웹을 위한 별도의 디자인 인력이나 운영을 위해 교육된 개발자 인력이 부재한 경우가 대다수이므로 이에 대응하기 위해 허용된 자원범위 안에서 월간/연간 필요한 소요를 미리 산정한 뒤 이를 수행하는 것을 약속하는 형태로 유지보수의 계약이 이루어집니다. 

인지해야 할 점은 하자보수와 유지보수의 차이점입니다. 웹 개발계약서상에 약속한 기능과 형태가 정상적으로 구현되지 않았을 경우 이를 수정하는 작업은 통상 계약서에 명기된 하자보수 기간에 무상으로 제공되고, 계약 시 약속된 범위 이외의 필요기능이나 수정사항이 발생했을 경우에는 별도의 유지보수의 개념으로 취급되어 이에 대한 비용을 필히 염두에 두어야 합니다. 이러한 점 때문에 웹사이트의 개발 착수 전 사이트의 목적성에 대한 명확한 정의와 함께 이를 뒷받침할 수 있는 요구기능에 대한 정의와 분석, 그리고 그에 적합한 기능에 대한 개발요구가 선행되어야 합니다.

정리하며
웹사이트란 단순하게 보자면 정보를 담는 그릇과 같지만, 그 정보를 담고 효율적으로 전달하기 위해 디자인적인 요소뿐만 아니라 기술적 요소와 운영의 전략 등 많은 부분이 유기적으로 연결된 복잡한 구성체입니다. 다음 포스팅에서는 제한적인 자원을 기반으로 한 운영 목적에 따라 웹사이트를 구현하는 방식과 플랫폼을 선택하고, 이를 사용하는 방법에 대하여 알아보도록 하겠습니다.

더 읽기 > 우리 홈페이지, 어떻게 만들어 활용할까? 1편

            우리 홈페이지, 어떻게 만들어 활용할까? 2편

by 물범 발자국

웹사이트의 95%는 텍스트로 이루어져 있다고 합니다. 여러분이 읽고있는 이 글 또한 웹에 적용된 타이포그래피라고 할 수 있을텐데요, 사이트 방문자가 콘텐츠를 잘 읽고 목적지를 쉽게 찾아갈 수 있도록 하는 웹에서의 타이포그래피는 인쇄물에서의 그것보다 더 중요하다고 해도 과언이 아닐 것입니다. 웹 디자이너가 적용할 수 있는 웹 타이포그래피 요소와 디자인 팁을 소개합니다.

다양한 폰트의 선택, 미세한 활자의 조정이 가능해 디자이너의 창의성을 발휘할 수 있는 인쇄 작업과는 달리 웹에서 완벽한 타이포그래피를 구현하기에는 한계가 있습니다. 그럼에도 불구하고, 다양한 스타일의 웹폰트와 CSS의 출연으로 그래픽툴을 이용하지 않고도 웹상에서 훌륭한 타이포그래피를 구현할 수 있게 되었습니다. 웹에서 좋은 타이포그래피를 구현하는 방법을 디자인의 원리와 요소를 통해 알아보겠습니다.

타이포그래피의 요소, 웹에 적용하기 

Hierarchy(계층)

신문이나 잡지 등의 인쇄 매체에서 텍스트를 보여줄 때는 일련의 계층 구조가 필요합니다. 웹도 마찬가지입니다. 가독성이 좋은 웹페이지는 중요도에 따라 헤더와 서브타이틀, 본문, 링크 등이 시각적으로 구조화되어 시각적으로 안정감을 줍니다. 웹에서의 텍스트 계층은 글꼴의 크기 차이를 두는 것 외에도 굵기, 컬러, 기울임, 폰트 선택 등으로 적용할 수 있습니다. 타이틀과 본문을 구분지어주는 기본적인 역할부터 중요도에 따라 콘텐츠를 나누어 사용자들이 잘 읽을 수 있도록 도와줍니다. 

계층이 명확한 컨텐츠 구조는 사용자가 어디에서부터 어떠한 방식으로 글을 읽어가야 하는지 안내해 줍니다.

Contrast(대비)

흰 배경에는 블랙 계열의 컬러를 사용하고 헤드라인과 본문의 텍스트 크기의 차이를 두는 것 모두 대비라는 요소를 적용한 것입니다. 일반적으로 배경과 텍스트 색상의 강한 대비는 가독성을 높여줍니다. 

크기와 컬러의 '대비'는 컨텐츠의 가독성을 높여줍니다.

하지만 지나친 대비는 오히려 사이트의 분위기를 해치고 텍스트 요소간의 결합을 흩뜨리며 가독성을 떨어뜨립니다. 흔히 블랙과 화이트의 강렬한 대비가 가독성을 높여준다고 생각하기 쉽지만, 빛을 내는 스크린에서의 이러한 강한 대비는 오히려 눈에 피로감을 줄 수 있습니다. 때문에 본문의 컬러는 완전한 블랙이 아닌 진한 회색 계열의 컬러를 사용하는 것이 좋습니다. 

컬러 

웹에서의 컬러는 시선을 유도하고 사용자들이 콘텐츠를 그룹화 해 읽을 수 있도록 도와주는 중요한 요소입니다. 전체 사이트의 분위기와 사용자의 행동까지 유도하는 웹에서의 컬러 선택은 그만큼 중요하다고 할 수 있을텐데요, 그렇다면 웹에서의 글꼴 컬러 선택은 어떻게 하는 것이 좋을까요?

1. 텍스트의 가독성을 위해 배경과 글꼴 요소간의 충분한 컬러의 대비를 부여합니다.

2. Less is more - 제한된 컬러의 사용은 콘텐츠를 더욱 돋보이게 해 줍니다.

3. 온,오프라인 컬러 시스템 통일 - 브랜드 로고 및 아이덴티티 컬러를 적용하면 사용자들에게 일관된 시각적 메시지와 통일감을 줄 수 있습니다. 때문에 브랜드에 사용된 컬러 시스템을 토대로 Main, Sub, Point컬러를 텍스트에 조화롭게 적용하는 것이 좋습니다. 

브랜드의 컬러 시스템을 적용한 웹사이트 (http://www.heungkuklife.co.kr/)

크기

텍스트의 역할과 중요도에 따라 달라지는 크기는 어떠한 요소를 강조하거나 그 반대의 경우를 위해 사용됩니다. 강조를 위한 너무 큰 크기의 사이즈도, 너무 작은 사이즈도 시각적인 균형을 깨트립니다. 때문에 보기 좋은 헤드라인과 본문 글꼴의 적당한 크기 차이를 두어 구성하면 시각적 안정감을 돕습니다. 일반적으로 타이틀에 사용되는 글꼴의 크기는18px ~ 32px, 본문에 사용되는 사이즈는 12px~16px 정도이며, 웹에서 잘 읽을 수 있는 최소 폰트의 사이즈는 13px, 0.813em라고 합니다. 

비율(Scale)

우리가 보는 웹페이지에는 다양한 크기의 텍스트가 적용되어 있습니다. 타이틀과 본문 등을 적당한 비율의 크기로 배치한다면 콘텐츠를 더욱 짜임새 있게 구성할 수 있습니다. typescale은 1.618이라는 황금비율을 포함한 다양한 비율을 적용해 폰트 크기를 비교해 볼 수 있는 사이트입니다.

http://type-scale.com/

행간(line-height), 자간(letter-spacing)

인쇄물과 마찬가지로 웹에서의 행간과 자간은 본문의 가독성에 중요한 역할을 합니다. 어느 정도의 줄간격은 가독성을 더욱 높여줍니다. 특히 폰트의 크기가 작을수록 자간을, 내용이 많은 문단일수록 행간을 늘여주는 것이 좋습니다. 너무 좁은 줄간격도, 넓은 줄간격도 좋지 않으며 폰트 사이즈의 150%이상의 행간은 읽기 좋은 본문을 만들어줍니다. 

참고글 - 웹디자인에서의 자간과 행간에 관한 고찰 

어떠한 폰트를 선택할까?

Less is More

모든 종류의 시스템폰트를 웹에 적용할 수는 없지만 '돋움체, 굴림체' 등 웹상에서의 폰트 선택이 제한적이었던 과거에 비해 다양한 웹폰트를 사용할 수 있게 되었는데요, 과연 웹페이지에서 많은 웹폰트를 적용한 화려한 디자인이 과연 좋은 디자인일까요? 좋은 웹사이트는 한 가지 폰트로도 위에 언급한 '대비'요소를 통해 크기와 두께, 색상의 변화만으로 사이트 전체에는 시각적 통일성과 안정감을 주고, 사이트의 무게는 더욱 가볍게 만듭니다.

이미 검증받은 폰트 선택, 절반은 성공!

오랜 역사와 대중성 있는 폰트는 그 자체로 가독성과 조형성을 갖추고 있습니다. 명조, 고딕이 들어간 웹폰트가 널리 사용되는 이유 또한 가독성이 높기 때문입니다. 다양한 굵기의 서체를 지원하는 Adobe의 본고딕 또한 깔끔하고 뛰어난 가독성 때문에 많은 사이트에서 이용되고 있습니다.

타이틀과 본문에 어울리는 폰트 선택.

같은 크기에서 가독성이 더 우수한 폰트가 있을까요? 헤더와 본문 등 각 영역에 어울리는 폰트는 따로 있습니다. 일반적으로 세리프(Serif)글꼴은 본문에 작은 크기로 적용되었을 때 뭉개지는 현상이 있는데요,(예외로, Georgia같은 폰트는 크기가 작을 때 더 좋은 가독성을 보입니다.) 때문에 폰트가 어떤 영역에 적용되는지에 따라 적합한 폰트를 선택해야 합니다.

'명조(Serif)는 본문이 아닌 타이틀에 크게 적용되었을 때 웹에서 더 우수한 가독성을 보입니다.

영문과 한글의 조화 

한글 웹폰트에 비해 영문 웹폰트는 선택 폭이 넓습니다. 한글과 영문을 함께 사용할 때, 한글 웹폰트로도 영문을 쓸 수는 있지만, 사이트의 심미적인 부분을 좀 더 고려한다면 영문 웹폰트를 독립적으로 사용하기도 합니다. 적용 명조체에는 세리프 서체, 고딕체에는 산세리프 서체가 잘 어울립니다. 사이트의 성격과 분위기에 맞는 한글과 영문의 조합은 시각적 통일성을 높입니다.

나눔고딕 + Lato 

나눔명조 + PT Serif 

좋은 타이포그래피는 웹사이트가 전달하는 메시지를 돋보이게 해 주며 명확하게 내용을 전달 해 줍니다. 웹에서의 타이포그래피 활용를 통해 방문자들이 더 머물고 싶은, 즐겨찾는 사이트를 디자인 하는 데 도움이 되길 바랍니다.

출처 : Smashing Magazine, tutsplus, typecast

by 소금쟁이 발자국

이 글은 디자인 에이전시 Digital Telepathy의 "7 Signs Your Website Design Is Bad for Business" 글을 "홈페이지 방문자 수를 늘리기 위한 7가지 팁"이라는 제목으로 번역하고 일부 수정하여 작성하였습니다.

하루에도 수십 개의 홈페이지가 개발됩니다. 살펴보면 비슷한 형태와 구성의 웹사이트들을 많이 볼 수 있습니다. 왜 그럴까요? 각 회사의 특징이 다를 텐데 말이죠. 다양한 프로젝트를 진행하면서 접하는 여러 클라이언트의 요구는 이렇습니다. 다양한 콘텐츠를 웹사이트 메인에 모두 드러내 주세요. 그렇다면 그 콘텐츠를 방문자가 다 읽어보고 클릭할까요?

"(사용자를) 생각하게 하지마!" 도서에는 이런 내용이 있습니다. 제작자는 사이트가 "훌륭한 작품"이 되기를, 아니면 적어도 '제품 안내책자'정도는 되기를 꿈꾸지만, 사용자는 우리가 만든 페이지를 "시속 95km로 달리는 차 안에서 보는 광고판"에 가깝다고 인식합니다. 그리고 실제 방문자가 페이지에 머무는 시간은 단 몇 초에 불과합니다."

(사용자를) 생각하게 하지마! 도서 후기 보러 가기>

그럼 방문자가 머무는 짧은 시간에 어떻게 흥미를 유발하고 결론적으로 다시 찾아오게 할까요? 홈페이지 방문자를 늘리는 7가지 팁을 살펴봅니다.

1. 회사의 장점이나 제공하는 서비스가 드러나는 맞춤 페이지를 만드세요.

서두에 짧게 언급하였듯이 회사마다 특징이 있지만, 그 특징을 잘 표현하지 못하는 경우가 많습니다. 서비스, 제품, 영업방식, 사내문화, 소통 등 각 회사의 특징에 집중하여 그 콘텐츠가 잘 드러나도록 집중하는 것이 중요합니다. 그럼 방문자들에게도 그 회사의 스토리가 잘 전달되며, 더 설득력 있게 다가갈 수 있습니다.

"okdork" 홈페이지 

방문자의 행동을 이끄는 부분에 초점을 맞춰 사용자에게 명료하게 다가갑니다

2. 뉴스레터 구독 버튼을 적절한 위치에 배치하세요. 

페이스북이나 트위터 사용자의 피드에 노출되기가 점점 더 어려워지고 있는데요. 그런 의미에서 사용자에게 직접 다가갈 방법은 이메일주소 입니다. 홈페이지에서 흔히 볼 수 있는 뉴스레터 구독 버튼은 페이지 맨 아래에 위치시킨다면 위험합니다. 좀 더 매력적인 문구와 함께 적절한 위치에 뉴스레턴 구독 버튼을 위치시킨다면 더 많은 사용자의 이메일 주소를 얻을 수 있습니다.  

 "Digital Telepathy 홈페이지"

상단메뉴에 "구독하기"를 위치시켜 신청률을 높입니다

 "Digital Telepathy 홈페이지"

서브페이지 하단에 "구독하기 버튼"을 노출하여 신청률을 높입니다

3. 픽셀의 디테일보다 사용자를 위한 프로세스 개선에 집중하세요.

보통 웹 디자이너들은 1pixel의 차이에 예민한 경우가 많습니다. 하지만 외적인 부분에 불필요하게 집중한 나머지 다른 것을 놓치는 경우가 종종 있습니다. 화면에 그려지는 것보다 중요한 건 구조와 기능의 프로세스입니다. 

4. 단일페이지에서는 한 가지에만 집중하세요. 

보통 의뢰받은 일을 할 경우 많이 접하는데요. 클라이언트의 요구는 보통 이렇습니다. 

-구매가 많이 일어나도록 해주세요.

-구독자를 늘려주세요.

-팔로워 수를 늘려주세요.

-브랜드 스토리를 잘 보여주세요. 

웹사이트를 구축할 때 드는 비용을 생각하면 많은 콘텐츠를 함께 노출하여 이익을 만들어내는 건 당연합니다. 한 가지 초점에 집중하고 나머지는 버린다는 것이 매우 어렵기도 하고요. 하지만 많은 콘텐츠가 동시에 노출된다면 방문자는 복잡한 사이트라 여겨 금방 다른 곳으로 빠져나갈 수 있습니다. 처음은 어렵겠지만, one page, one goal을 생각하며 진행하는 건 어떨지요. 

5.랜딩페이지를 활용하세요. 

랜딩페이지(Landing Page)란 검색엔진, 광고 등을 경유하여 접속하는 사용자가 최초로 보게 되는 웹페이지를 말합니다. 그럼 좋은 랜딩페이지의 기준은 무엇일까요?

-홈페이지와 같은 메인 내비게이션은 삭제해주세요. (사용자가 최대한 그 페이지에 오래 머물도록 )

-광고에 사용된 단어를 랜딩페이지와 일치시킵니다. (만약 광고에서 슬로워크 버닝데이가 많이 쓰였다면 랜딩페이지 타이틀은 슬로워크 버닝데이 단어를 매치시킴으로써 해당 페이지에 잘 도착했다는 느낌을 주세요)

- 소셜 미디어 공유 버튼을 노출하세요. (더 많은 이용자에게 전달되도록)

좋은 랜딩페이지를 만드는 방법 더 보기 >

6. 모바일 환경을 고려해 주세요. 

모바일 유저 중 60%는 모바일기기로만 웹사이트에 접속합니다. 그만큼 모바일을 위한 페이지 구성 또한 중요합니다. 현재는 모바일에 대부분의 기업이 반응형 웹을 이용하여 최적화하지만 아직 기능적으로 구현이 부족하거나 UX 적으로 많은 실험이 오가는데요. 그만큼 모바일이 중요함에 따라 이제는 웹이 기준이 아닌 모바일을 기준으로 웹을 구현하는 방식도 필요한 시대입니다. 

7. 검색엔진 최척화를 고려해주세요.

검색엔진 최적화를 SEO(Search engine optimization)라고 부릅니다. 말 그대로 검색에 잘 노출되도록 최적화하는 것을 말합니다. 프론트엔드 부분에서 많이 고려되는 부분으로 최적화 하기 위한 다양한 방법이 있습니다. 중요한 이름이나 콘텐츠, 링크를 표시할 때는 이미지가 아닌 텍스트를 사용한다거나, 이미지에는 ALT 속성값을 주어 읽히도록 하는 등 다양한 방법이 있습니다. 더 자세한 사항은 구글에서 공유한 SEO에 최적화하기 위한 가이드를 참고해주세요. 

SEO에 최적화하기 위한 12가지 팁>

구글 검색엔진 최적화 기본 가이드 보러가기>

알려드린 방문자를 늘리는 방법은 7가지이지만, 지키기 위해선 많은 집중과 노력이 필요합니다. 가장 중요한 점은 회사의 핵심에 초점을 맞춰 홈페이지를 세워나가는 것이라 생각합니다. 

출처 : Dtelepathy

> 더 읽기: 웹사이트 블로그 방문자 통계 및 분석, 구글애널리틱스란?

              보기 좋고, 읽기 좋은 이메일을 만드는 4가지 방법

by 종달새 발자국

인류의 역사에서 콘텐츠는 어디에선가, 누군가로부터 늘 제작되어 왔고 이는 구전을 통해, 종이와 활자를 통해, 그리고 매체를 통해 전달되어져 왔습니다.

인터넷 역시 디지털화되거나, 디지털을 기반으로 생산된 정보가 오가는 매개로써 급속한 기술의 발전에 힘입어 손쉽게 정보를 습득할 수 있는 주요한 통로로 자리매김 하였고, 이러한 특징들로 인해 현재 기관이나 단체 그리고 개인에 이르기까지 누구나 인터넷을 이용해 자신이 생산한 콘텐츠를 전달하거나, 타인의 콘텐츠를 조회할 수 있게 되었습니다.

지난 글 '우리 홈페이지 어떻게 만들어 활용할까 1편'에 말씀드린 바와 같이 여기에서 말하는 웹사이트는 그 자체로서 의미 있는 콘텐츠를 담고 있는 웹페이지들이 일련의 장소에 일목요연하게 모여 제공되는 곳입니다. 이번 포스팅에서는 온라인 콘텐츠의 성격과 순환구조, 특징에 따른 자원목록화 방법에 대해 설명하겠습니다.

1. 콘텐츠

콘텐츠의 사전적 의미는 어떤것의 속에 든 것들, 내용물, (책의)목차, 내용 및 주제 등과 같은 뜻을 내포하고 있습니다. 본 포스팅에서 논하고자 하는 콘텐츠의 의미는 컴퓨터에서 취급하는 정보를 규정하는 것으로, 각종 유·무선 통신망을 타고 흐르는 정보를 통칭합니다. 지상파 방송에 필요한 문자, 음성, 화상 등의 방송정보와 컴퓨터 네트워크로 교환되는 교육용 소프트웨어, 게임소프트웨어, 영화 등 모든 종류의 정보가 이에 포함됩니다. 최근에는 방송과 컴퓨터 통신의 융합화 추세에 따라 ‘디지털화’된 모든 정보를 뜻하게 되었습니다. 좀더 세부적인 접근으로 웹 콘텐츠는 위에서 나열한 것들이 인터넷을 매개로 하여 취급되는 정보들을 말하며, 인터넷에 접근할 수 있는 단말기를 통해 제공되는 모든 형태의 디지털 콘텐츠를 말합니다.

2. 웹 콘텐츠의 순환구조

웹 콘텐츠는 생산,유통,확산,재생산의 순서로 순환하며 유지됩니다. 이는 구전으로 전해지는 '이야기'와 크게 다르지 않지만, 확산의 속도가 이전과는 비교할 수 없이 빠르다는 차이가 있습니다. 

<콘텐츠 순환개요도>

1. 생산

웹사이트의 운영자 또는 사용자가 웹서비스가 제공되는 플랫폼 또는 DB, 서버 등에서 콘텐츠를 작성/개발/업로드 등 일련의 행위를 통해 인터넷으로 본인 또는 타 사용자가 이용하거나 조회할 수 있는 형태로 제작/가공합니다. 

2. 유통

생산된 웹 콘텐츠가 해당 웹플랫폼으로 '직접' 접근한 사용자에게 제공되고, 의도에 적합하게 이용됩니다. 유통단계에서는 제공되는 정보의 권한을 부여하여 특정 사용자 그룹이나 대상에게 차별적으로 제공될 수 있습니다. 통상 일반적인 웹사이트나 플랫폼은 회원가입과 사용자 계정을 통해 접근 권한을 조정하며, 플랫폼의 성격에 따라 접속할 수 있는 경로나 IP대역을 제한적으로 운용하는 인트라넷(폐쇄적 네트워크)이 있습니다.

3. 확산

생산된 웹 콘텐츠가 유통될 때, 1차 사용자의 특정한 행위(스크랩, 트랙백, 전문/부분 인용, 다운로드 후 업로드 등)을 통해 최초 생산된 웹 플랫폼을 거치지 않는 다른 경로를 통해 2차, 3차 이하 사용자의 의도에 적합하게 제공됩니다. 웹 상에 게시되는 콘텐츠의 경우 일반적으로 제공 플랫폼이나 시스템에 별도의 조치가 없을 때 확산되는 것을 막기가 어렵습니다. 따라서 해당 콘텐츠의 중요도에 따라 명시적이고 법리적인 저작권 정책을 적용(예: CC 저작권 표시) 하는 것을 고려해야 합니다.

4. 재생산

확산된 웹 콘텐츠를 접한 사용자 또는 타 웹서비스의 운영/이용자 등이 해당 콘텐츠를 기반으로 하여 유사하거나 변조된 새로운 콘텐츠를 생산할 수 있습니다. 이 때 기존 원본 콘텐츠의 출처를 밝혀 원본 소스로 유입시키기도 하지만, 보통 콘텐츠에서 핵심내용이나 본인이 원하는 부분을 변조하거나 조합하여 새로운 콘텐츠로 생산해 활용됩니다. 또한 기존 콘텐츠에 대한 피드백 또는 리뷰들이 그 자체로 다른 사용자에게 유용한 새로운 콘텐츠가 되기도 합니다. 

인터넷 상에서 다수에 의해 다양한 콘텐츠로 재생산 된 <Grumpy Cat>
출처 : Grumpy Cat Official Facebook Page

웹 콘텐츠는 몇가지 특징이 있습니다. 스스로 잉태하거나, 자라나지 않습니다. 제작자(사용자 또는 운영자)에 의해 생산되며, 생산된 콘텐츠는 유통을 위해 웹서버 내 공간이나 데이터베이스(DB)에 저장됩니다. 유행에 뒤처질 수 있으나 수명을 다해 사라지지 않습니다. 데이터가 유효하지 않게되는 순간(물리적/논리적인 이유로 사용자가 더는 엑세스 할 수 없게 되는 순간)까지 해당 위치에 존재하게 됩니다. 또한 체계적인 관리를 한다면 다용도로 사용 가능한 자원이 되지만, 단순히 양적으로 접근할 경우 원하는 정보를 찾는 사용자를 혼란스럽게 만들 수 있습니다. 

대부분의 기관 및 단체가 웹사이트를 제작하고, 보유하려는 의도가 위의 특징과 일치하지 않는 경우가 많습니다. 개인사용자나 회사의 경우 보유하고 있는 자원을 뚜렷한 목적성에 의해 인터넷 상에서 제공하고자 웹사이트를 구축하지만, 일반적인 기관 및 단체의 경우 '우리도 하나쯤 있어야 하지 않을까' 내지 '다른 곳이 운영하고 있으니까' 라는 의도로 웹사이트를 제작하려는 경우가 이에 해당합니다. 

웹 콘텐츠는 스스로 생성되지 않기 때문에, 그저 웹사이트를 만들어 공개해 둔다고 해서 활성화되지 않습니다. 오히려 중요한 것은 웹사이트를 개설한 이후부터입니다. 해당 웹사이트에서 취급하고, 제공해야 할 콘텐츠들을 면밀히 검토하여 효율적인 방법으로 사용자에게 제공되기를 기대해야 합니다. 웹에 공개되는 콘텐츠는 어떠한 방식으로든 사용자에게 저장될 수 있으며, 법적인 절차로 이를 규제하는 방법 외에는 퍼져나가는 것을 막을 수 있는 기술적인 방법이 극히 제한적입니다. 또한 사용자가 원하는 정보를 찾아 들어왔을 때 이를 놓치지 않고 올바른 정보를 제공하는 것이 가장 중요합니다. 이를 위해 필요한 것이 보유 콘텐츠 감사입니다.

아래 양식을 참고하여 보유 콘텐츠를 감사하고, 분류하여 보관하면 추후 온라인 사업이나 내부 이슈로 인한 정보확인 시 큰 도움이 될 것입니다.

콘텐츠_감사양식.xlsx

정리하며

정돈된 양질의 콘텐츠는 빠른 유속의 인터넷의 흐름 속에서 무서운 속도로 퍼져나갈 수 있습니다. 그 흐름을 효과적인 통로로서 배치하고 보유한다면 사업의 목표달성을 위한 큰 힘이 될 것입니다. 다음 포스팅에서는 실제 기관에서의 사례를 들어 독립적인 웹사이트의 개발 및 운영에서 필수적으로 알고 있어야 하는 것들에 대한 설명을 이어나가도록 하겠습니다.

더 읽기 > 우리 홈페이지, 어떻게 만들어 활용할까? 1편

           우리 홈페이지, 어떻게 만들어 활용할까? 3편

by 물범 발자국

세로형 내비게이션이란? 

웹사이트의 콘텐츠 항목을 볼 수 있는 메뉴 내비게이션은 일반적으로 가로형과 세로형이 있습니다. 현재 슬로워크의 내비게이션은 상단에 가로로 보이는 가로형 내비게이션입니다. 흔히 접할 수 있는 방식이죠. 그럼 세로형 내비게이션은 무엇일까요. 세로형은 브라우저 영역을 기준으로 왼쪽 위 기업 로고 아래 수직 배열로 정렬되는 구조를 말합니다. 일반적으로 가로형 내비게이션이 많이 쓰이지만, 스크롤로 제어하는 원 페이지 구조가 등장하면서부터 이에 적합한 세로형도 많이 볼 수 있게 되었습니다.

세로형 내비게이션 메뉴 활용법 

1. 단일 페이지 레이아웃을 활용하여 상하로 동작하도록 만들어주세요.

단일페이지란 반응형 웹에 따라 사용되는 구조인데요. "One page", "Full page" 라고 불리며, 서브페이지로 이동 없이 한 페이지에 보이는 형식으로 사용자에게 스크롤을 유도합니다. 단일 페이지 구성처럼 콘텐츠 양이 적을수록 세로형 내비게이션이 유리합니다.    

jorgerigabert.com : 단일 페이지로 구성되었으며, 왼쪽 메뉴를 하나씩 클릭할 때마다 페이지가 상하로 움직입니다.

2. 2차 메뉴는 3~4단으로 구성하여 같은 시선의 흐름을 유지하세요.

그럼 콘텐츠 양이 많은 사이트는 어떻게 사용하면 좋을까요? 맥도널드 영문 사이트를 예로 들어봅시다. "FOOD"메뉴에 마우스를 가져가 보면 2차 메뉴가 오른쪽으로 펼쳐집니다. 펼쳐진 2차 메뉴의 각 콘텐츠는 3단으로 나뉘며 상하로 정렬됩니다. 즉, 1차 메뉴와 2차 메뉴를 보는 시선이 상하로 동일한 사용자 경험을 제공합니다.

mcdonalds.com: 2차 메뉴의 각 콘텐츠는 3단으로 나뉩니다. 상하로 정렬되어 1차 메뉴와 2차 메뉴를 탐색하는 시선이 상하로 같습니다.

3. 메뉴명은 명료하고 단순할수록 잘 읽힙니다.

세로형 내비게이션을 구성할 때 가장 중요한 부분으로 메뉴의 높이가 세로로 무한대로 길어지면 곤란합니다. 이유는 해상도가 낮은 컴퓨터의 웹 브라우저 뷰포트에서 전체 메뉴가 한눈에 보이지 않기 때문이죠. 이처럼 웹사이트 디자인 전 IA(Information Architecture) 설계, 즉 메뉴구조를 정의하는 작업은 매우 중요합니다. 세로형뿐만 아니라 모든 메뉴구조에서 정보를 효율적으로 압축하여 제시하는 것이 가장 중요합니다. 좋은 메뉴명을 붙이는 방법은 지난 블로그 글 '클릭을 유도하는 이름 붙이기'에서도 다뤘습니다.

edmedu.com : 이번에 슬로워크 웹 개발실에서 리뉴얼한 ed:m에듀케이션의 웹사이트입니다. 세로형 내비게이션을 적용하였고 메뉴명은 짧고 명확하게 만들었습니다. 사용자가 볼 때 쉽게 이해 가능하며 지칭할 수 있습니다. 

세로형 내비게이션 메뉴를 활용하는 방법은 더 많을 텐데요. 분명 비주얼보다는 적절한 콘텐츠와 직관적인 메뉴구조로 정확하게 설계된 웹사이트가 오래도록 남을 수 있습니다. 웹사이트 내비게이션의 메뉴명만 읽어 보아도 어떤 용도의 사이트인지 이해 가능하다면 사용자가 원하는 정보를 찾기 위해 모든 콘텐츠를 확인하여야 하는 번거로움이 줄어들 것입니다. 그럼 조금 더 현명한 웹사이트를 만들 수 있지 않을까요?

참고 : webdesignledger

by 종달새 발자국