고품질 스토리 보드 작성을 위한 필수 도구

전문 웹 기획자라면 한번쯤 웹 스토리 보드를 작성하면서 그래픽오브젝트를 매번 그리는게 비효율적이라는 것을 알기에 기존에 만들어 놓은 샘플들을 나만의 PPT 페이지에 모아 놓고 가져다가 사용하는 경우가 많다.

이러한 불편한 점을 한번에 해소해줄 획기적인 프로그램이 있으니 스토리 보드를 작성을 조금이라도 하는 사용자라면 강력히 구매를 검토해 볼 필요가 있다.

파워목업 : http://www.powermockup.com

stencil-library

이렇게 웹 스토리 보드를 그릴 때 좀 더 높은 완성도를 낼 수 있을 뿐 아니라 필요한 대부분의 템플릿을 기본적으로 제공하는 PPT의 플러그인 PowerMockup(파워목업)프로그램이 있어서 소개한다.

아래는 주요 기능에 대해서 홈페이지에서 제공하는 설명을 번역한 것이다.

수백종이 넘는 아이콘과 스텐실

stencil-library-thumb

파워목업의 스텐실 라이브러리는 광범위한 종류의 웹사이트 제작에 필요한 엘리멘트(구성요소) 템플릿을 제공한다. 예를 들어 버튼, 텍스트 박스, 메뉴, 텝, 테이블 등등

기본적으로 파워 포인터에서 제공하는 기능을 이용해 얼마든지 사용자가 편집할 수 있으며 제작된 스텐실 라이브러리를 단순히 파워 포인트 화면으로 끌어다 놓기면 하면 되는 쉬운 사용방법을 제공한다.

빠른 검색 제공

instant-search-thumb

빠른 즉석 검색을 제공하고 있어 원하는 스텐실을 아주 쉽게 찾을 수 있다. 타자를 치는 순간 파워 목업이 자동으로 필터링된 결과를 보여주게 되며 더해서 동의어 검색도 가능하다.

예를 들어 input이라고 입력하면 Text box와 Text Area도 같이 검색되어 나타난다.

당신만의 스텐실과 카테고리 제작

custom-stencils-thumb

파워 목업은 당신이 제작한 스텐실을 라이브러리에 저장하기를 제공한다. 간단히 새로만든 쉐입을 선택하고 “Add Stencil”만 선택하면 자신만의 커스텀 스텐실이 된다. 또한 가저오기와 내보내기를 통하여 스텐실을 다른 사용자와 공유 하거나 관리할 수도 있다.

스마트 스텐실

smart-stencils-thumb

파워목업은 또한 당신이 윈도우 스텐실의 크기를 조절할 때 연결된 윈도우 타이틀 영역의 크기를 조절해주는 등 스마트한 기능을 제공할 뿐만 아니라 당신이 텝바에 텝이 추가되거나 체크박스에 상태값이 변경되는 작업을 할 때 알아서 비율을 조정한다.

파워목업의 유용한 점

와이어 프래임 작업에 있어서 매우 편리한 기능 제공

powermockup-features-thumb

  • 그룹핑이나 정렬등에 있어서 강력한 기능제공
  • 스토리 보드나 인터렉티브 프로토 타입 제작시 효과적인 프리젠테이션과 에니메이션 가능
  • PDF, PNG, EMF를 포함하여 다양한 버전의 파일을 내보내거나 가져오기 지원
  • 마스터 페이지 기능을 제공하기에 재사용 가능한 템플릿 페이지로 구성 가능
  • MS Office 관련 프로그램과 자연스러운 연동 지원

또한 가장 강력한 이점으로서 전세계에 가장 범용적으로 사용되고 있는 MS OFFICE 부가 프로그램으로 어떠한 직종의 사용자와도 무리없이 사용가능하다는 것이다.

Works with PowerPoint 2007, 2010 and 2013

파워목업은 PowerPoint 2007, 2010, 2013(32비트와 64비트)을 단 한번의 인스톨만으로 지원한다.

powermockup-compatibility-thumb

price

청중을 사로잡는 프리젠테이션 오픈 기법

5 killer ways to open up your next presentation

from Big Fish Presentations

통계를 보았을때 관객의 주목을 일끌어낼 수 있는 시간은 60초 이내라고 합니다.
따라서 가장 처음에 하는 말(오프너)로 관객의 주목을 이끌어 내는 핵심 요소라는 것을 알고 효과적으로 전달하는 방법을 아는 것이 매우 중요하다는 사실을 알 수 있습니다.
이를 통해 발표자는 관객의 주목을 이끌어 내고 당신이 전달 하고자 하는 메세지가 훨씬더 잘 전달 된다는 사실을 확실합니다.
그럼 어떠한 방법으로 관객의 주목을 이끌어 낼 수 있을까요?

1. STORIES

누구나 스토리에는 관심있어 합니다. 왜냐하면 모두가 자신만의 스토리를 가지고 있기 때문입니다.
자신만의 스토리를 전달함으로서 관객은 당신에 대해서 개인적인 수준까지 더 인지하게 됩니다.
단지 당신이 말하고자 하는 이야기와 연관되어 있다면 더 효과적이라는 사실만 기억하시기 바랍니다.

David Lynch & Donovan "Catching The Big F...

2. QUESTIONS

오늘은 어떠세요? 같은 간단한 질문이라도 관객이 당신이 전달하고자 하는 메세지를 더욱 받아 들이기 쉽게 만듭니다. 더구나 질문은 관객이 당신이 어떻게 주제를 풀어나갈지 스스로 생각 하게 만듭니다.
따라서 이 방식은 주제에 대해서 인지 할수 있게 하는 매우 효율적인 방법입니다.

Question

 

3. QUOTES

전문가나 유명인의 말이나 생각을 테마나 일반적인 주제에 대해서 전달하기전에 인용 하는 것은 상당히 유용한 방법입니다. 이를 통하여 관객은 지혜를 얻게됨과 동시에 당신의 주제에 대해서 집중하게 됩니다.
확실히 해야 할 것은  당신이 인용한 문구가 당신의 주제와 어떤관계가 있는지 설명이 필요합니다.

quote

4. STATICTIS

통계를 바로쓴다면 당신의 주제에 대해서 아무 분명하게 보여주게 됩니다.
중요한것은 매우 분명하고 정확하며 관련있는 데이타이여야 한다는 것입니다.
정확한 통계자료는 당신의 메세지를 확실하고 부정할수 없으며 믿을수 있는 내용으로 만들어 줍니다.
데이타는 단순히 당신의 프리젠테이션을 믿을만한 내용으로 만드는 것이 아니라 당신이 앞으로 전달하고자 하는 내용을 신뢰하는 내용으로 바꾸어 줍니다.

DWEN Funding infographic

5. JOKES

Governor Arnold Schwarzenegger, R-Calif., joke...

Governor Arnold Schwarzenegger, R-Calif., jokes with the Marines at the booth. He does his best to visit the Marines’ booth each year. (Photo credit: Wikipedia)

유머를 사용하는 것은 매우 강력하고 효과적인 방법으로 관객을 환기시기고 편하게 당신의 메세지를 더 쉽게 받아 들일수 있게 해주게 합니다.
주의 할 점은 유머는 휘발성이 아주 강하며, 잘못된 유머의 사용은 유머를 전혀 하지 않은 것보다 더 나쁜 결과를 초래할 수 있다는 점입니다.
그리고 타겟 관객이 수용할수 있는 범위의 유머를 사용해야 한다는 것도 기억하기 바랍니다.
위에 열거한 방법들을 다음 프리젠테이션때 사용해서 당신의 관객들을 Prepare, engage, control, entertain 해보세요.
이 방법만이 100% 정답은 아니며 상황에 따라 더 나은 방법은 있을수 있습니다. 이러한 방법들을 익혀서 더 자연스럽고 유연하고 발표를 하시기 바랍니다.

RWD 샘플 사이트

반응형 웹으로 개발된 사이트들 리스트

glitch

dustinsenos

clearairchallenge

trentwalton

owltastic

buildguild

dolectures

320andup

sasquatchfestival

cognition

interim

ribot

sweethatclub

sleepstreet

cohenspire

electricpulp

adifferentdesign

teixido

colly

stephencaver

hicksdesign

alistapart

porcupine

3200tigres

bakery

tileabl

visuadesign

teegallery

calebacuity

naomiatkinson

staffanstorp

About the

구글에서 제공하는 나눔고딕 웹폰트 사용하기

홈페이지 제작시나 워드 프레스 같은 CMS 툴을 사용하다보면 영문에 최적화된 테마를 미리보기로 보고 골랐을때와 실재 적용했을때 한글폰트로 인해 예쁘게 보이지 않아 폰트를 바꿀 수 있는 방법을 찾게 됩니다.

웹에서는 한글이나 MS워드 프로그램처럼 PC에 설치된 폰트를 마음대로 적용할수가 없는데 이때 사용할 수 있는 방법이 두가지가 있습니다.

하나, 폰트를 이미지로 작업해서 올린다.

둘, 원하는 폰트를 웹폰트로 만들어 CSS에서 적용하여 사용한다.

첫번째 방법은 원하는 모든 폰트를 웹에서 사용가능하지만 텍스트 대신 이미지 텍스트로 모두 도배할 수도 없고(성능이나 접근성 측면에서도 권장하지 않습니다) 또한 사용전에 저작권을 미리 확인 하여 사용해야 하는 이슈도 있습니다.

두번째 방법은 웹폰트를 만들거나 이미 만들어진 웹폰트 파일을 (woff / eot 폰트) 파일을 웹서버에 올리고 CSS를 통해 호출해서 사용하는 방법입니다.

웹 폰트란 웹 제작자가 의도한 글꼴을 사용자 브라우저 화면에 그대로 표시하기 위해 사용하는 웹용 글꼴을 말합니다. 로컬 PC에 미려한 글꼴이 없는 경우 브라우저는 웹 서버에서 즉시 제작자가 올려둔 글꼴을 내려받아 사용자에게 표시하게 됩니다. 예쁘지만 사용자도 모르는 사이에 웹 서버에 있는 글꼴을 내려받아야 하기 때문에 성능과 타협해야 합니다. 느린 웹 사이트에는 권장하지 않습니다.

예를 들어 나눔고딕 웹 폰트를 사용하려면 일단 나눔고딕 글꼴이 웹 서버에 올라가 있어야 합니다.
아래 파일 중에 최소 woff 포멧과 eot 포멧을 내려받아 서버에 올려놓으세요.

NanumGothic.woff(982KB)
NanumGothic.eot(745KB)
NanumGothic.ttf(2.23MB)   < ttf형태의 트루타입 폰트도 사용가능하지만 용량을 보시면 2메가가 넘는 크기죠 따라서 웹용으로 사용하기는 권장하진 않습니다.

woff(Web Open Font Format) 포멧은 W3C 권고 표준이고 파이어폭스, 사파리, 오페라, 크롬, IE 9 브라우저가 지원하고 있지만 IE 6~8 브라우저가 지원하지 않습니다.

그리고 eot(Embeded Open Type) 포멧은 IE 6~8 브라우저가 지원하지만 다른 브라우저들은 eot 포멧을 지원하지 않습니다. 따라서 모든 브라우저에서 동일한 글꼴을 보이게 하려면 브라우저 호환성을 확보하기위해 woff, eot 포멧의 파일 모두 웹서버에 올려서 사용할 필요성이 있습니다.

그럼 1) 저작권 문제가 없는 2) 웹폰트로 사용가능한 공개된 폰트 중에서 3) 구글에서 웹폰트로 사용할 수 있게 제공하고 있는 네이버 나눔폰트를 WP 워드 프래스에 적용하는 방법을 알아 보겠습니다.

2013-06-04_192449

보통은 방문자의 PC에 나눔고딕 폰트가 설치되어 있어야 웹페이지에도 해당 글꼴이 제대로 표시가 되는데 이런 문제점을 해결하기 위해서 웹폰트를 서버에 올려서 폰트가 없는 사용자의 브라우저가 자동으로 폰트를 받아 이용하게 하지만 여기서는 웹서버에 폰트를 올리는 것보다 더 유연한 방법으로 구글에서 더 빠른 속도의 서버에 올려놓은 웹폰트를 사용할 수 있는 방법을 안내하려고 합니다.

> 구글에서 제공하는 모든 폰트 목록은 구글웹폰트 사이트를 방문하면 확인할 수 있습니다.

Google Web Fonts API에서는 한글 글꼴 (나눔 고딕, 나눔 명조, 나눔 펜스크립트 등)이외에도 수백 종의 라틴/그리스/키릴 문자 글꼴과 수십 종의 크메르 글자 글꼴 이외에도 한글, 라오, 아랍, 버마, 타밀 등 여러 글꼴을 early access를 통해 제공하고있습니다. 웹 폰트이므로 웹 사이트 방문자가 자신의 컴퓨터에 글꼴을 설치했는지 여부와 관계없이 사용가능합니다.

구글 웹폰트 사이트를 방문해 보면 알겠지만 상당히 많은 웹폰트를 무료로 제공하는 것은 물론 사용법 또한 매우 간단합니다. 나눔고딕 폰트를 예를 들면 아래 코드를 자신의 홈페이지에서 사용하는 CSS에 아래와 같이 추가하면 나눔고딕 웹폰트 사용을 위한 준비는 끝입니다.

워드프래스 사용자라면 테마의 style.css 파일을 열어 상단에 아래와 같이 추가해주면 나눔고딕 웹폰트 사용을 위한 준비는 완료 됩니다.

그리고 테마의 폰트를 지정해주는 css 코드를 찾아서 나눔고딕을 추가해주면 됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
body,
button,
input,
select,
textarea {
    color: #666666;
    font-family: 'Open sans','Nanum Gothic','Malgun Gothic',Dotum,sans-serif;
    font-size: 13px;
    font-size: 1.3rem;
    line-height: 1.8;
}

위의 예는 구글에서제공하는 웹폰트들을 추가로 적용한 예이며  이렇게 원하는 곳의 폰트와 크기와 간격등을 수정하면 워드 프래스에서 아주 쉽게 웹폰트를 적용할 수 있습니다.

구글 검색에 리뉴얼한 사이트 정보 등록하기

Image representing Google as depicted in Crunc...

Image via CrunchBase

검색엔진에 자신의 사이트가 검색되게 하려면, 자신의 홈페이지 내용을 검색엔진에 알려주는 작업이 필요합니다.

일반적으로 새로운 페이지가 생성이 되면 각 검색엔진 사이트에서 검색로봇이라 불리는 가상의 프로그램이 자동으로 서핑을 하다 새로이 발견되는 홈페이지 내용을 긁어가는데(크롤링이라 한다.) 한번 수집한 이후에는 다음 검색 주기까지 검색엔진의 DB에 저장되고 바뀌지 않는다.

구글의 경우 웹봇을 통해서 각사이트를 프로그램 로봇이 자동으로 수집(크롤링)하고 이를 색인하여 검색 결과를 제공하게 됩니다.

하지만 만약 Google 검색을 통하여 자신이 제작한 사이트 명을 검색했을때 아직 검색이 되지 않거나 리뉴얼했을 경우 검색되더라도 예전의 홈페이지 구성으로 내용이 보이는 경우 일반적으로는 다음 검색주기까지 기다리면 자동으로 업데이트가 이루어 지지만 관리 필요에 의해서 구글 검색결과에 내용을 빨리 업데이트 해야하는 필요성이 발생하기도 합니다.

이러한 크롤링은 실시간으로 일어나지 않으며 일정 주기별로 이루어지게 되는데 이때 구글의 검색 결과의 향상을 위해서 Sitemap.xml을 이용할 것을 구글은 권장하고 있습니다.

구글의 경우 웹마스터 도구라는 사이트를 통하여 이러한 업무를 진행하고 있으며 절차는 다음과 같습니다.

웹마스터 도구 > 사이트 구성 > Sitemaps > Sitemap 제출

 

Sitemap 정보

 Sitemap을 사용하면 Google이 발견하지 못했을 수도 있는 사이트의 페이지 정보를 Google에 알릴 수 있습니다. 간단히 말해서 XML Sitemap(일반적으로 Sitemap이라고 하며 S는 대문자로 표기)은 웹사이트에 있는 페이지의 목록입니다. Sitemap을 만들어 제출하면 Google의 일반적인 크롤링 과정에서 발견되지 않는 URL을 비롯하여 사이트의 모든 페이지 정보를 Google에 알릴 수 있습니다.

Sitemap을 제출하는 방법:

  1. Sitemap 또는 mRSS 피드를 사이트에 업로드합니다.
  2. 웹마스터 도구 홈페이지에서 원하는 사이트를 클릭합니다.
  3. 왼쪽 메뉴에서 최적화를 클릭한 다음 Sitemap을 클릭합니다.
  4. Sitemap 추가/테스트 버튼을 클릭합니다.
  5. 입력란에 Sitemap의 경로를 입력합니다(예: Sitemap이 http://www.example.com/sitemap.xml에 있는 경우 sitemap.xml 입력).
  6. Sitemap 제출을 클릭합니다.

Sitemap 색인 파일

Sitemap 색인 파일의 XML 형식은 Sitemap 파일의 XML 형식과 매우 비슷합니다. Sitemap 색인 파일은 다음과 같은 XML 태그를 사용합니다.

  • <sitemapindex> – 파일을 둘러싸는 상위 태그
  • <sitemap> – 파일에 있는 각 Sitemap에 대한 상위 태그(<sitemapindex>의 하위)
  • <loc> – Sitemap의 위치(<sitemap>의 하위)
  • <lastmod> – Sitemap의 마지막 수정 날짜(선택사항)

자세한 내용은 Sitemap 프로토콜을 참조하세요.

샘플 XML Sitemap 색인

다음은 XML 형식의 Sitemap 색인에 대한 예입니다. 이 색인에는 2개의 Sitemap이 포함되어 있습니다.

<?xml version="1.0" encoding="UTF-8"?>
  <sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <sitemap>
      <loc>http://www.example.com/sitemap1.xml.gz</loc>
      <lastmod>2004-10-01T18:23:17+00:00</lastmod>
   </sitemap>
   <sitemap>
      <loc>http://www.example.com/sitemap2.xml.gz</loc>
      <lastmod>2005-01-01</lastmod>
      </sitemap>
   </sitemapindex>

Sitemap 색인 파일이 만들어지면, 저장하여 Google에 제출하시기 바랍니다. 모든 Sitemap을 업로드하고 저장한 경우 각 Sitemap을 개별적으로 제출할 필요가 없습니다. Sitemap 색인 파일만 제출하면 됩니다. 계정에서 각 사이트마다 Sitemap 색인 파일을 최대 500개까지 제출할 수 있습니다.

robots.txt 파일에 Sitemap 위치 포함하기

모든 검색엔진은 공통적으로 크롤링 과정을 거치기 전에 사이트 내의 robots.txt파일을 찾아 이를 참고로 사이트를 검사합니다. 따라서 검색엔진에 Sitemap 위치를 알리려면 robots.txt 파일에 다음 행을 자신의 경로와 파일 이름으로 업데이트하여 포함합니다.

sitemap: http://www.example.com/sitemap.xml
자세한 정보 보기 >

TIP
사이트 맵을 만들기 위해서는 xml에 대한 기본적인 지식이 필요하나 인터넷에는 자동으로 생성해주는 프로그램도 쉽게 찾을수 있습니다.

head_logo

없는 페이지의 주소를 선택했을 때

일반 사이트 구축시에는 일반적으로 이러한 구성을 많이 사용하지만

안내 메세지

이전페이지로 가기 | 메인페이지로 가기

 

WP에서는 없는 페이지의 링크를 선택했을 때 오류메세지를 보이고 끝내는 것이 아니라

사용자에게 사이트의 다른 게시물로 이동할수 있 는 체널을 보여준다.

안내 메세지

검색 박스

최근글 | 가장 많이 사용된 카테고리 | 보관물

2013-05-27_131230

 

사용자가 기대했던 컨텐츠 페이지가 없을 경우 에도 일반적인 추가 정보를 제공하는 센스가 돋보인다.

핵심성과지표 [ Key Performance Indicator ]

핵심성과지표 [ Key Performance Indicator ]

약어 : KPI
KPI는 목표를 성공적으로 달성하기 위해 핵심적으로 관리해야 하는 요소들에 대한 성과지표를 말한다.
KPI는 “주주들이 진정으로 중요한 것은 무엇인가”라는 질문에 답하는 것으로, 미래 성과에 영향을 주는 여러 핵심 자료를 묶은 성과 평가의 기준이다.
기존에는 이익, 매출, 비용과 같이 과거 재무적인 지표를 기준으로 성과를 평가했지만, 재무 성과는 과거 활동의 성과라는 점에서 미래 성과를 예측하고 반영하는 데 미흡하고, 결과만 보여 줄 뿐 과정에 대한 정보도 없다.
성과 측정의 대상으로 과정이 중요한 이유는 과정을 관리함으로써 단기 목표를 달성할 수 있을 뿐 아니라 중장기적인 목표도 도달할 수 있기 때문이다.
KPI를 도출하고, 활용하는 궁극적인 목적은 기업이 원하는 방향으로 구성원들이 가도록 동기를 부여하는 데 있다. 따라서 KPI를 도출할 때 가장 중요하게 고려해야 할 원칙은 KPI 활용을 통해 구성원들에게 동기 부여를 할 수 있느냐이다. 바람직하지 못한 KPI를 활용할 경우에는 구성원들의 사고와 행동의 초점을 잘못된 방향으로 이끌게 되며, 이는 궁극적으로 구성원들의 의욕 저하를 초래하고 기업 전체의 성과를 저하시키는 결과를 초래할 수 있다.
KPI 도출 시에는 관리 중요성, 통제 가능성, 측정 가능성을 고려해야 한다.
첫째, 관리 중요성이란 경영 활동을 대표할 수 있는 핵심 요인 중심으로 성과지표를 선정해야 하는 것을 의미하며 이를 통해 업적 평가의 타당성을 높일 수 있다.
둘째, 통제 가능성은 구성원들이 자신의 업무 권한 범위 내에서 직접 통제할 수 있는 것을 말한다. 만약 구성원이 직접 통제할 수 없다면 의욕 저하를 가져올 수 있다. 마지막으로 측정 가능성은 KPI로 활용되기 위한 기본적 요소로, 측정이 가능해야 최종 성과와 문제를 인식해 나갈 수 있음을 의미한다.
출처 :

시사경제용어사전, 기획재정부, 2010.11, 대한민국정부 대한민국정부 로고