웹퍼블리셔 관련 도움 사이트 몇곳.

HTMLKOREA: http://www.htmlkorea.co.kr/

자바스크립트, CSS, 웹폰트 생성기등 웹 관련 프로그램 및 오픈소스 공유 사이트

네이버 카페 :  http://cafe.naver.com/htmlkor

 

웹퍼블리셔를 위한 웹표준 개발 교육 http://w3labs.co.kr/

웹퍼블리셔 교육 자료

 

웹표준스쿨 : http://cafe.naver.com/xhtmlschool

웹표준 강의 수록

 

웹개발자 커뮤니티  http://sir.co.kr/

 

웹접근성 연구소 http://www.wah.or.kr/index.asp

 

NHN 널리 표준웹 연구소 표준코드 생성기 http://html.nhncorp.com/uio_factory

 

도움되는 블로그

 

http://blog.naver.com/chsmanager?Redirect=Log&logNo=140200490517

 

늑대털쓴양 http://blog.naver.com/hyoyeol?Redirect=Log&logNo=70177051041

 

http://kmoonki.tistory.com/

저작자 표시 비영리 동일 조건 변경 허락
신고
크리에이티브 커먼즈 라이선스
Creative Commons License

태그표

-주제2-
<br> 줄바꿈 태그
<i>~</i> 이탤릭 태그 이탤릭은 기울이기 입니다.
<u>~<u> 밑줄 태그 밑줄태그는 밑에 밑줄이 생깁니다.
<b>~<b> 굵게 태그 굵게 태그는 글씨가 굵어집니다.
<sub>~</sub> 아래 첨자 태그 아래첨자 태그는이렇게 아래로 내려갑니다.
<sup>~</sup> 위 첨자 태그 위첨자 태그는 아래첨자와 반대로 위로 붙습니다.
<img src="주소"> 이미지 태그 이미지를 표시합니다.
<embed src="주소"> 멀티미디어 태그 음악이나 동영상을 표시합니다.
<a href="">~</a> 링크 태그 글씨에 하이퍼링크를 걸어줍니다.
등등..
이 외에는 태그표를 이용하도록 하죠.

[태그표 출처 신의키스 : http://kissofgod.net]

H2.0 : html 2.0 표준 태그
H3.2 : html 3.2 표준 태그
N : Netscape에서만 지원
IE : Internet Explorer에서만 지원
EX : 확장태그

 

 

 

 

태그 이름 태그 설명 버젼
<A> 하이퍼링크를 작성 H2.0
href="URL" 하이퍼링크로 호출되는 파일 H2.0
name="이름" 중간 부분을 지정하기 위한 html 도큐먼트 부분 명명. 이 이름은 또 다른 <A>태그의 href= 속성에 사용될 수 있다. H2.0
target="프레임 이름" , "_blank" , "_parent" , "_self" "_top" 프레임과 함께 사용되는 파일이 디스플레이되어야 할 프레임이나 윈도우를 나타냄 EXT
<APPLET> 페이지에 자바 애플릿을 삽입 H3.2
align="left" , "right" , "top" , "middle" "bottom" 에플릿의 출력 내용이 윈도우에 정렬되는 상태 H3.2
alt="텍스트" 애플릿이 제대로 로드되지 않을 경우에 표시되는 텍스트 H3.2
code="URL" 자바 애플릿의 이름 H3.2
codebase="URL" 에플릿이 저장되어 있는 디렉토리 H3.2
height=수치,width=수치 애플릿의 출력 내용의 가로와 세로 픽셀 크기 H3.2
hspace=수치, vspace=수치 애플릿과 그 주변 텍스트 사이의 가로와 세로 공간으로, 픽셀값으로 나타냄 H3.2
name=명칭 페이지상의 다른 에플릿들이 이 에플릿을 참조할 수 있는 이름 H3.2
<AREA> <MAP>태그로 제작된 이미지 맵 내에 링크 영역을 지정 H3.2
alt="텍스트" 텍스트 브라우저에 표시될 텍스트 H3.2
coords="좌표1.좌표2,좌표3..." 영역의 경계선에 대한 좌표(각 형태는 좌표들을 지정하는데 나름대로의 규칙이 있다.) H3.2
href="URL" 링크된 파일의 URL H3.2
nohref 링크를 갖고 있지 않도록 하는 영역을 정의 H3.2
shape="rect" , "circle" , "poly" 정의될 형태의 유형 H3.2
target="프레임" , "_blank" , "_parent" , "_self""_top" 프레임과 함께 사용되는, 링크된 파일이 표시되어야 하는 프레임이나 윈도우의 이름을 나타냄 EXT
<B> 볼드체로 설정할 텍스트를 표시 H2.0
<BASEFONT> 제목에 이용되는 기본 글꼴 지정 EXT
color="#RRGGBB" 또는 "색이름" 텍스트의 색상으로, 16진수의 RGB값이나 색상명으로 나타냄 EXT
face="글꼴명" 글꼴 이름 EXT
size="크기" 1에서 7까지의 글자크기. 3이 초기값임. 1에서7까지는 절대 수치이고, -1에서 +3까지는 상대크기. N
<BGSOUND> 파일이 로드될 때, 음악이 재생됨 IE
loop=수치 or "infinite" 사운드 클립이 반복되는 횟수 IE
src="URL" 사운드 파일의 URL IE
<BIG> 큰 크기로 텍스트를 나타냄 H3.2
<BLOCKQUOTE> 들여 쓴 텍스트를 나타냄 H2.0
<BODY> 브라우저에 표시될 부분을 지정 H2.0
alink="#RRGGBB" or "색이름" 클릭된 링크의 색상, 16진수의 RGB값이나 색이름 H3.2
background="URL" 배경으로 사용될 그래픽 파일 H3.2
bgcolor="#RRGGBB" or "색이름" 배경색 H3.2
bgproperties="fixed" 배경 이미지가 스크롤되지 않음 IE
leftmargin=수치 왼쪽 여백 크기, 픽셀 수 IE
link="#RRGGBB" or "색이름" 하이퍼 링크의 색상 H3.2
text="#RRGGBB" or "색이름" 일반적 텍스트의 색상 H3.2
topmargin=수치 상단의 여백, 픽셀수 IE
vlink="#RRGGBB" or "색이름" 방문한 링크의 색상 H3.2
<BR> 행분리 H2.0
<CENTER> 가운데 정렬 H3.2
<CITE> 인용문을 설정 H2.0
<CODE> 컴퓨터 코드로 텍스트를 나타냄 H2.0
<DD> 정의 목록에서 정의문으로 설정될 텍스트를 나타냄(<DL> 과<DT>와 함께 사용해서) H2.0
<DFN> 정의문을 설정 H3.2
<DIR> 세로 방향으로 놓여지는 리스트를 만든다(20항목까지) H2.0
<DIV> 요소들의 세트를 그룹짓는데, 그 속성들을 적용시킴 H3.2
align="left" , "right" , "center" 픽셀 수로 나타낸 상단의 여백 H3.2
<DL> 정의 목록을 만든다 H2.0
<DT> 정의 목록에서 용어로서 설정될 텍스트를 나타냄 H2.0
<EM> 강조될 텍스트를 나타냄 H2.0
<EMBED> 페이지에 플러그 인을 삽입 EX
height=수치, width=수치 가로와 세로 크기, 픽셀값 EX
name="이름" 다른 오브젝트들이 이것을 참조하는데 사용되는 이름 EX
param="값" 프로그램에서 매개 변수로 지정되는 값 EX
src="URL" 플러그 인이 디스플레이할 파일 EX
<FONT> 특별한 글자 속성으로 텍스트를 나타냄 H3.2
color="#RRGGBB"또는 "색이름" 텍스트의 색, 16진수의 RGB값이나 색상명 H3.2
face="글꼴명" 글꼴 이름 EX
size="크기" 1에서 7까지의 글자 크기, 초기값은 3
-1에서 +3은 상대적인 크기임
H3.2
<FORM> 폼을 작성함 H2.0
action="URL" 전송 버튼을 클릭하면,작동되고, 양식 데이터가 보내져야 하는 스크립트 H2.0
method="get" , "post" 데이터를 보내는 방식을 규정 H2.0
<FRAME> 프레임 세트 내의 각각의 프레임의 속성들을 규정 EX
frameborder=1 , 0 or "yes" , "no" 프레임 주위에 테두리를 설정하거나(1또는 yes)삭제해 버림(0또는 no).(MS사의 브라우저는 숫자를 사용하고,Netscape는 단어를 사용.) EX
marginheight=수치 프레임들 사이의 공간으로, 픽셀값으로 나타냄. EX
marginwidth=수치 프레임내에 여백을 만든다(픽셀값으로 규정) EX
name="이름" 프레임에 대한 타겟명(<A >와 <AREA>태그를 사용하여 그 특정 프레임으로 강조된 파일들을 보냄) EX
noresize 유저가 프레임 크기를 바꾸지 못함 EX
scrolling="yes" ,"no" , "auto" 스크롤 바를 포함시키거나 없애 버림. 초기값에("auto")은 프레임의 내용들이 테두리 밖으로 넘어갈 때만 스크롤 바가 나타남 EX
src="URL" 프레임에 놓여질 파일의 URL EX
<FRAMESET> 프레임 세트를 만드는 태그들을 표시 EX
cols="col1,col2,col3..." "단" 세트로서 프레임세트를 설정. 단의 세트는 각각에 폭을 지정하여 나타냄. 폭은 픽셀값으로 지정되는데, 윈도우 크기에 대한 백분율로 또는 그 단이 나머지 공간을 차지한다는 표시인 별표(*)로서 나타냄.한 개 이상의 단이 별표로 지정되면, 그 공간은 균일하게 그 단의 수로 나뉘게 된다. EX
rows="row1,row2,row3..." "열"의 세트로서 프레임 세트를 설정. 열의 세트는 각각의 높이를 지정하여 나타냄. 높이는 픽셀값으로 지정되는데, 윈도우 크기에 대한 백분율 또는 그열이 나머지 공간을 차지한다는 표시인 별표(*)로서 나타냄. 한개 이상의 단이 별표로 지정되면 그 공간은 균일하게 그 단의 수로 나뉘게 된다. EX
frameborder=1 , 0 or "yes" , "no" 프레임 세트 주위에 테두리를 설정하거나(1또는 yes)없애 버림(0또는 no)(MS사의 브라우저는 수치를 사용하고, Netscape사 것은 단어를 사용.) EX
<H1> 텍스트 1단계 제목으로 나타냄(가장 큰 제목 크기) H2.0
<H2> 텍스트 2단계 제목으로 나타냄 H2.0
<H3> 텍스트 3단계 제목으로 나타냄 H2.0
<H4> 텍스트 4단계 제목으로 나타냄 H2.0
<H5> 텍스트 5단계 제목으로 나타냄 H2.0
<H6> 텍스트 6단계 제목으로 나타냄 H2.0
<HEAD> html 문서의 제목 태그를 나타냄 H2.0
<HR> 가로 괘선을 만든다 H2.0
align="left"또는 "right" 또는 "center" 문서에서 괘선의 정렬 상태 H3.2
color="#RRGGBB" 또는 "색이름" 괘선의 색, RGB값이나(16진수) 색이름 IE
noshade 괘선에 대한 초기값인 3D음영을 없앰 H3.2
size=수치 괘선의 길이, 픽셀값 H3.2
width=수치 괘선의 폭, 픽셀값 H3.2
<html> html 문서임을 나타냄 H2.0
<I> 이탤릭체로 텍스트를 나타냄 H2.0
<IMG> 이미지나 비디오 클립을 삽입 H2.0
align="top" , "middle" , "bottom" , "left" , "right" , "center" 문서속에서 이미지나 비디오 클립의 정렬상태 H3.2
alt="텍스트" 텍스트 전용 브라우저나 제대로 로드되지 않을 경우에 표시될 텍스트 H2.0
border=수치 테두리의 폭, 픽셀값(초기값은 border=1) H3.2
controls 비디오 조절, dynsrc=과 함께 사용됨 IE
dynsrc="URL" 삽입될 AVI파일을 지정 IE
height=수치,width=수치 이미지나 비디오 클립의 가로와 세로 크기, 픽셀값 H3.2
hspace=수치,vspace=수치 주변 텍스트와 사이의 가로와 세로 공간, 픽셀값 H3.2
ismap 이미지가 서버 측 이미지 맵임을 지정 H2.0
loop=수치 또는 "infinite" dynsrc=와 함께 사용, 비디오 클립이 반복되는 횟수 IE
src="URL" 삽입될 이미지의 URL H2.0
start="fileopen" , "mouseover" dynsrc=와 함께 사용, 비디오 클립이 작동되게 해주는 이벤트 IE
uesmap="#이름" 클라이언트 측 이미지 맵으로 사용될 맵의 명칭, 이 이름은 <MAP> 태그의 name=속성이 지정하는 것이다 H3.2
<INPUT> 폼내에 입력 요소를 만든다 H2.0
type="text" , "button" , "checkbox" , "radio" , "submit" , "image" , "reset" , "hidden" 삽입할 입력 요소의 유형 H2.0
checked type=checkbox, radio에 대하여, 초기값으로 선택해 놓을 상자나 버튼을 지정 H2.0
maxlength="길이" type=text에 대하여, 엔트리의 최대 길이, 글자 수 H2.0
name="이름" 입력 내용이 CGI 등으로 보내질 때 변수명으로 사용되는 제어의 이름
type=radio에 대하여, 그룹내의 모든 라디오 버튼들은 똑같은 이름을 갖고 있음
H2.0
size="크기" type=text에 대하여, 텍스트 상자의 길이 H2.0
src="URL" type=image에 대하여, 버튼으로 사용되는 이미지를 나타냄 H2.0
value="이름" type=checkbox : 상자가 체크되면 보내지는 변수 값.
type=text : 텍스트 란에 들어 있는 초기 값.
type=submit, reset, button : 버튼 위에 표시된 텍스트
H2.0
<KBD> 키보드 입력으로 설정될 텍스트 H2.0
<LI> 목록에 새로운 항목을 만든다(<DIR>,<MENU>,<OL>,<UL>과 사용) H2.0
type="A" , "a" , "I" , "i" , "disc" , "circle" , "square" 항목에 대한 수치나 방점 스타일을 지정 EX
value=수치 <OL>과 함께 사용되는데, 그 항목에 대한 수치 EX
<MAP> 클라이언트 측 이미지 맵 지정 (<IMG>태그의 usemap=속성으로 참조) H3.2
name="이름" 맵에 이름을 붙여 줌 H3.2
<MARQUEE> 화면위로 텍스트를 스크롤 IE
align="top" , "middle" , "bottom" 문서에서의 정렬 상태를 지정 IE
behavior="scroll" , "slide" , "alternate" 스크롤 행동을 지정:"scroll"(초기값)은 화면의 한쪽 끝에서 반대쪽 너머로 스크롤되고, "slide"는 반대쪽에 도달할 때까지 스크롤되며, "alternate"는 앞뒤로 스크롤 된다. IE
bgcolor="#RRGGBB" or "색상명" 배경색 지정, RGB값이나 색상명을 사용 IE
direction="left" , "right" 스크롤 방향 IE
height=수치 or %, weight=수치 or % 가로와 세로 크기, 픽셀값이나 화면 높이에 대한 백분율 IE
hspace=수치, vspace=수치 주변 텍스트 사이의 가로와 세로 공간, 픽셀값 IE
loop=수치 or "infinite" 스크롤이 반복되는 횟수 IE
scrollamount=수치 스크롤 단위, 픽셀값 IE
scrlldelay=수치 스크롤되는 시간으로,1/1000초 단위 IE
<MENU> 메뉴 목록을 만든다 H2.0
<META> html 문서에 대한 일반적 정보를 제공 H2.0
content="값" HTTP 행동을 위해 http-squiv으로 지정된 용도의 값. 자동 페이지 로드시 기다리는 시간을 초 단위로 나타냄 EX
http-equiv="http 행동" 규정해 놓아야 할 HTTP행동. 자동 페이지 로딩시에는, http-equiv="refresh"를 사용 EX
url="URL" http-equiv="refresh"와 함께 사용되는데, 다음에 로드될 파일을 나타냄 EX
<MULTICOL> 다단에 설정될 텍스트 N
cols=수치 단의 수 N
gutter=수치 단들 사이의 간격, 픽셀값 N
width=수치 단의 폭, 픽셀값 N
<NOBR> 행분리시켜서는 안될 요소들을 연결 EX
<NOEMBED> 플러그 인을 지원하지 않는 브라우저들에 표시될 내용을 나타냄. EX
<NOFRAMES> 프레임을 지원하지 않는 브라우저들에 표시될 내용을 나타냄. EX
<NOSCRIPT> 스크립트 언어를 지원하지 않는 브라우저들에 표시될 것을 나타냄. EX
<OBJECT> 이미지, 매체 파일, 프로그램 등의 오브젝트를 삽입 EX
align="left" , "right" , "center" , "top" , "middle" , "bottom" 문서에서 오브젝트의 정렬 상태 EX
border=수치 오브젝트 주위의 테두리의 폭, 픽셀값 EX
classid="class 지정자" 플러그 인이나 프로그램에 대한 지정(삽입될 오브젝트의 유형에 따라 달라짐) EX
codebase="URL" 프로그램을 담고 있는 디렉토리 EX
codetype="MIME 유형" 프로그램의 MIME 유형 EX
data="URL" 페이지에 삽입될 오브젝트의 URL EX
height=수치,width=수치 오브젝트의 가로와 세로 크기, 픽셀값 EX
hspace=수치,vspace=수치 오브젝트와 주변 텍스트 사이에 가로와 세로 간격, 픽셀값 EX
name="이름" 다른 프로그램들이 그 오브젝트를 참조하는데 사용하는 이름 EX
shapes 이미지 맵에서처럼 오브젝트가 하이퍼 링크 형태가 되도록 지정 EX
standby="텍스트" 오브젝트가 로드되는 동안에 디스플레이되는 텍스트 EX
type="MIME 유형" 오브젝트의 MIME유형. EX
usemap="이름" 클라이언트 측 이미지 맵의 이름. EX
<OL> 번호가 붙은 목록을 만든다 H2.0
type="A" , "a" , "I" , "I" 번호의 종류를 지정: A는 대문자, a는 소문자, I는 대문자형의 로마숫자, i는 소문자형의 로마 숫자. H3.2
start=숫자 시작번호를 지정 H3.2
<OPTION> 메뉴에 옵션을 만든다, <SELECT>태그 뒤에 사용 H2.0
selected 초기값으로 선택될 옵션을 지정 H2.0
value="텍스트" 옵션을 선택하면 보내지는 값 H2.0
<P> 단락 분리 H2.0
align="left" , "right" , "center" 문서에서의 단락의 정렬 상태 H3.2
<PARAM> 프로그램에 매개 변수를 전달, <OBJECT>나<APPLET> 태그와 함께 사용됨 H3.2
name="명칭" 값이 배정될 매개변수의 이름 H3.2
value="값" 매개 변수의 값 H3.2
valuetype="data" , "ref" , "object" 값이 해석되는 방법을 나타냄:data는 초기값이고, ref는 URL,object는 같은 도큐먼트에서의 오브젝트의 URL H3.2
type="MIME유형" 데이터의 MIME 유형 H3.2
<PRE> 태그가 무시된 텍스트를 나타냄 H2.0
<S> 밑줄체 텍스트 (<STRIKE>와 동일) H2.0
<SAMP> 견본으로 설정될 텍스트를 나타냄 H2.0
<SCRIPT> 스크립트 언어를 나타냄 H3.2
language="명칭" 스크립트가 쓰여질 언어를 지정 H3.2
scr="URL" 외부 스크립트 파일을 지정 N
<SELECT> 선택 메뉴를 만든다 H2.0
Multiple 스크롤 메뉴에 복수 선택 기능을 H2.0
name="이름" 입력내용이 CGI 등 으로 보내질 때 변수명으로 사용되는 이름을 만든다 H2.0
size="크기" 지정된 크기로 스크롤 메뉴를 만든다 H2.0
<SMALL> 작은 크기로 텍스트를 나타냄 H3.2
<SPACER> 페이지에 빈 공간을 만든다 N
align="left" , "right" type=block 일때 ,공간 주위의 왼쪽이나 오른쪽을 텍스트로 둘러쌈 N
height=수치, width=수치 type=block 일때 ,빈 공간의 가로와 세로크기, 픽셀값 N
size=수치 type=horizontal , type=vertical 일때 , 빈공간의 크기, 픽셀값 N
type="horizontal" , "vertical" , "block" horizontal은 현재 행에 공간을 만들어 주고, vertical은 다음 항목 위에 세로로 공간을 만들어 주며, block은 사각형의 공간을 만든다 N
<STRIKE> 밑줄체 텍스트 (<S>와 동일) H3.2
<SUB> 아래첨자로 텍스트를 나타냄 H3.2
<SUP> 위첨자로 텍스트를 나타냄 H3.2
<TABLE> 테이블 지정 H3.2
align="left" ,"right" ,"center" 문서에서의 정렬 상태를 지정 H3.2
bgcolor="#RRGGBB" or "색이름" 표의 배경색 EX
border=수치 행의 테두리의 두께, 픽셀값 H3.2
bordercolor="#RRGGBB" or "색이름" 테이블의 테두리 색 IE
cellpadding=수치 각 셀의 테두리와 그 내용 사이의 간격, 픽셀값 H3.2
cols=수치 테이블에서 단의 수 H3.2
width=수치 또는 % 테이블의 전체 폭으로, 픽셀값이나 윈도우 크기에 대한 백분율로 지정 H3.2
<TD>,<TH> 테이블의 셀에 들어갈 데이터<TD>와 제목<TH>를 나타냄 H3.2
align="left" , "right" , "center" 셀에서의 데이터의 정렬 상태를 지정 H3.2
bgcolor="#RRGGBB" or "색이름" 셀의 배경색 EX
bordercolor="#RRGGBB" or "색이름" 셀의 테두리 색 IE
colspan=수치 셀이 펼쳐져 있는 단의 수 H3.2
height=수치 표의 셀의 높이로, 픽셀값으로 나타냄 H3.2
nowrap 셀에서 행을 감싸지 못하게 함 H3.2
rowspan=수치 셀이 펼쳐져 있는 행의 수 H3.2
valign="top" , "middle" , "bottom" , "baseline" 셀의 테두리에 대한 셀의 내용들의 세로 정렬 상태 H3.2
width=수치 셀의 폭으로, 픽셀값이나 표의 크기에 대한 백분율로서 지정 H3.2
<TEXTAREA> 여러 행의 텍스트 입력란을 만든다 H2.0
cols=수치, rows=수치 텍스트 영역의 폭(row)과 높이(cols) H2.0
name="이름" 텍스트 영역의 이름으로, 입력 내용을 CGI로 보내질 때 변수 이름으로 사용됨 H2.0
<TR> 테이블에서 새로운 행을 만든다 H3.2
align="left" 또는"right" or "center" 가로 방향으로 높여진 셀들의 내용들의 정렬 상태 H3.2
bgcolor="#RRGGBB" or "색이름" 표의 행의 배경색 EX
bordercolor="#RRGGBB" or "색상명" 행의 테두리 색상 IE
valign="top" , "middle" , "bottom" , "baseline" 셀의 테두리에 대한 행의 내용들의 세로 정렬 상태 H3.2
<TT> 고정 크기 서체로 텍스트를 나타냄 H2.0
<U> 밑줄이 쳐질 텍스트를 나타냄 H2.0
<UL> 방점이 찍힌 무순서 리스트를 만든다 H2.0
type="disc" , "circle" , "square" 방점의 형태 EX
<VAR> 변수로 설정될 텍스트를 나타냄 H2.0

굵게 된게 태그고

그 아래 있는것은 속성입니다.

<태그 속성="속성 값">~</태그>

 

 

저작자 표시 비영리 동일 조건 변경 허락
신고
크리에이티브 커먼즈 라이선스
Creative Commons License

'SECONDː디자인서랍 > 강좌 및 소스' 카테고리의 다른 글

태그표  (5) 2013.03.22
플래시)) 마우스를 따라다니는 클립 만들기  (0) 2011.12.28

html5자료 블로그

분류없음 2013.02.05 09:38

html5 자료 블로그

 

http://webstoryboy.com/1033

저작자 표시 비영리 동일 조건 변경 허락
신고
크리에이티브 커먼즈 라이선스
Creative Commons License

웹표준 및 HTML 5 , CSS공부 관련 서적추천

THIRDː라이프/Study★ 2013.01.12 02:16

 

 

웹표준과 HTML5 그리고 미뤄두었던 CSS에 대하여 공부중입니다.

 

책은 일단 도서관에서 빌렸구요,

 

제가 빌려온 책은 아래의 네가지 입니다.

 


웹 표준 가이드: HTML5 CSS3

저자
존 앨섭 지음
출판사
한빛미디어 | 2010-11-30 출간
카테고리
컴퓨터/IT
책소개
더 넓은 세상, 웹 표준을 경험하라!『웹 표준 가이드』는 HTM...
가격비교

 


크리에이티브 디자이너를 위한 웹표준

저자
송태민 지음
출판사
제우미디어 | 2009-08-10 출간
카테고리
컴퓨터/IT
책소개
웹표준 실무 노트!곰TV 디자인실 선임 디자이너 송태민의 『크리...
가격비교

 


HTML5 CSS3 사이트제작의모든것

저자
양용석 지음
출판사
로드북 | 2012-04-20 출간
카테고리
컴퓨터/IT
책소개
『HTML5 CSS3 사이트제작의모든것』은 다양한 레이아웃을 디...
가격비교

 


웹 표준 HTML5 CSS3

저자
줄리 C. 멀로니 지음
출판사
정보문화사 | 2011-05-20 출간
카테고리
컴퓨터/IT
책소개
최신 웹 표준, 이 책만 있으면 준비 끝!이 책은 최신 웹 표준...
가격비교

 

 

현재 두번째와 네번째 서적을 보고 있구요,

 

보고 있는 책만 비교하자면,

 

아주 초보자에게는 이론부터 기초를 차근차근 설명해주고 있는

 

가장 쉬운 웹표준 HTML5 & CSS3 책이 좋을 듯 합니다. (2도 인쇄로 이미지가 흑백입니다.)

 

부록부분에는 소스코드에 대한 용도 및 속성값에 대한 설명이 수록되어 있습니다.

 

HTML의 기본적인 소스에 대한 이해가 있으신 초보자분들은 크게 무리 없이 따라하면서 보실 수 있을 만한 책이

 

크리에이티브 디자이너를 위한 웹표준(이하 크디웹)입니다.

 

크디웹은 초반에 간략한 설명과 함께 CSS를 활용하는 방법이 나옵니다.

 

뒤쪽은 쭈욱~ 예시로 주어진 하나의 웹표준 사이트를 완성해보도록 구성되어 있고 페이지가 가장 적습니다.

 

**서적 내용 중 코드 오탈자가 종종 있으니 책 내용을 그대로 입력했는데 뭐가 잘못된건지 원하는대로 표현이 안되고

 

그 항목을 찾기 힘드시다면 관련 카페에 가입하시어 확인하시기 바랍니다.

 

부록부분에는 유용한 프로그램 추천과 CSS 핵에 대하여 설명되어 있습니다.

 

다른 서적들도 읽은 후 게시글을 업데이트 하도록 하겠습니다.

 

-책 난이도-

 

가장 쉬운 웹표준 < 크디웹

 

저작자 표시 비영리 동일 조건 변경 허락
신고
크리에이티브 커먼즈 라이선스
Creative Commons License

'THIRDː라이프 > Study★' 카테고리의 다른 글

웹표준 및 HTML 5 , CSS공부 관련 서적추천  (0) 2013.01.12
웹표준에 대하여  (0) 2013.01.10

웹표준에 대하여

THIRDː라이프/Study★ 2013.01.10 22:09

웹 표준이란?

 

어떠한 운영체제나 브라우저를 이용하더라도 같은 결과물을 볼 수 있도록 W3C (World Wide Web Consortium)에서 지정한 표준안

 

한국형 웹 접근성 14개 지침

 

1. 텍스트가 아닌 컨텐츠 중에서 글로 표현될 수 있는 모든 컨텐츠는 해당 컨텐츠가 가지는 의미나 기능을 동일하게 갖추고 있는

텍스토로도 표시되어야 한다.

 

2. 시간에 따라 변화하는 영상매체는 해당 컨텐츠와 동기 되는 대체 매체를 제공해야 한다.

 

3. 컨텐츠가 제공하는 모든 정보는 색상을 배제하더라도 인지할 수 있도록 구성되어야 한다.

 

4. 이미지맵 기법이 필요한 경우에는 클라이언트 측 이미지맵을 사용하거나, 서버 측 이미지맵을 사용할 경우에는 동일한

기능을 하는 텍스트로도 구성된 대체 컨텐츠를 제공해야 한다.

 

5. 컨텐츠를 구성하는 프레임의 수는 최소한으로 하며, 프레임을 사용할 경우 프레임별 제목을 붙힌다.

 

6. 컨텐츠는 스크린의 깜빡거림을 피할 수 있도록 구성되어야 한다.

 

7. 키보드 만으로도 웹 컨텐츠가 제공하는 모든 기능을 수행할 수 있어야 한다.

 

8. 웹 컨텐츠는 반복적인 내비게이션 링크를 뛰어넘어 페이지의 핵심부분으로 직접 이동할 수 있어야 한다.

 

9. 실시간 이벤트나 제한된 시간에 수행해야 하는 행동은 사용자가 시간에 구애받지 않고 읽거나,

상호작용을 하거나 응답할 수 있어야 한다.

 

10. 데이터 테이블은 테이블을 구성하는 데이터 셀의 내용에 대한 정보가 충분히 전달될 수 있어야 한다.

 

11. 컨텐츠의 모양이나 배치는 논리적으로 이해하기 쉽게 구성하여야 한다.

 

12. 온라인 서식을 포함하는 컨텐츠는 서식 작성에 필요한 정보, 서식 구성 요소, 필요한 기능, 작성 후 제출 과정 등,

서식과 관련한 모든 정보를 제공해야 한다.

 

13. 스크립트, 애플릿 또는 플러그인 등과 같은 프로그래밍 요소들은 현재의 보조기술의 수준에서 이들 프로그래밍 요소들의

내용을 사용자에게 전달해 줄 수 있을 경우에만 사용해야 한다.

 

14.컨텐츠 항목 1에서 13에 이르는 13개 검사 항목을 만족하도록 최대한 노력했으나 해결되지 않는 부분이 남아있다면

텍스트만의 컨텐츠를 제공하는 웹 페이지를 별도로 제공하여야 한다.

 

-한국정보문화 진흥원, (웹 접근성을 고려한 컨텐츠 제작기법) 2004. 현준호, 김병초

저작자 표시 비영리 동일 조건 변경 허락
신고
크리에이티브 커먼즈 라이선스
Creative Commons License

'THIRDː라이프 > Study★' 카테고리의 다른 글

웹표준 및 HTML 5 , CSS공부 관련 서적추천  (0) 2013.01.12
웹표준에 대하여  (0) 2013.01.10

2012 웹트렌드

해외사이트

http://webdesign.tutsplus.com/articles/industry-trends/the-state-of-web-design-trends-2012-annual-edition/

반응형 웹디자인에 대한 이야기들

http://www.webactually.co.kr/archives/9638

 

1.반응형 웹디자인 = 가변성 있는 그리드 시스템

2.웹폰트의 다양화

3.HTML5 와 CSS3

4.스크롤에 대한 인식 변화 및 다양한 스크롤 방식 - 효과적인 인포그래픽 사이트 증가

5.모듈인터페이스

 

기억에 남는 사이트

http://www.dangersoffracking.com/

http://bamboo.wacom.jp/bamboopop/

 

대부분의 사이트들은 크롬브라우저로 확인 하는 것을 권했으며,

html5 등을 제대로 확인하려면 익스플로러 9 버전 이상이어야 한다.

 

저작자 표시 비영리 동일 조건 변경 허락
신고
크리에이티브 커먼즈 라이선스
Creative Commons License

나의 연봉을 올리기 위한 조건

서랍 위 2013.01.10 03:14

나의 연봉을 끌어 올리기 위한 조건


연봉을 남들보다 많이 받는다는 것은 그만큼 남들보다 뛰어난 능력을 가져야 한다는 말과 일맥상통할 것이다. 디자이너들의 연봉은 정책적으로 정해진 것도, 또한 정확한 통계조차도 나와 있지 않다.이는 그만큼 디자이너들의 실력에 따라 그 격차가 매우 크다는 뜻이다.
디자이너들이 연봉을 많이 받기 위해서는 몇가지 조건들이 있다. 아무리 디자인 감각이 뛰어나다고 해서 연봉이 오르는 것은 아니다.
1. 근무하는 회사의 디자인에 대한 의존도
2. 멀티플레이어적인 능력
3. 남들보다 배 이상 빠른 사이트 제작 능력
4. 프리젠테이션 능력
5. 개인의 상품성
6. 사업력
7. 대형 사이트 제작 경험
9. 대외 활동력
10. 팀을 지배할 수 있는 디자인 감각
11. 상황 판단력



근무하는 회사의 디자인에 대한 의존도

스스로가 아무리 디자인에 대한 탁월한 능력을 지녔다 하더라도, 디자인에 대한 의존도에 기대어 근무를 하게되면 그만큼 자신의 능력을 발휘하는데 크게 제약을 받아 표현할 수 없을 뿐만 아니라, 설사 능력을 인정 받는다 하더라도 디자인비용으로 회사는 많은 비용을 지출하지 않을 것이다.실례로 쇼핑몰 사이트나, 일반 기업의 웹사이트 유지 관리직에서 일하는 디자이너들의 연봉이 가장 낮은 것으로 관찰되고 있다. 설사 회사가 초기 사이트 제작시 많은 비용을 지불하고 사이트를 디자인적인 측면에서 우수하게 만들었다 하더라도 이것이 무조건적으로 디자인에 대한 의존도가 높다라고 평가할 수 없다. 이러한 회사들은 디자인에 대한 최대 지출 비용을 이미 산정해 놓기 때문이다. 대부분의 회사들은 디자인 보다는 그들이 고객에게 전달하고자 하는 컨텐츠에 더 많은 관심을 갖고 있으며, 시간이 점차 흘러가면서 디자인에 대한 필요성 보다는 컨텐츠에 대한 필요성을 더 절실히 요구하게 된다. 그렇다면 웹디자이너들이 고액 연봉을 받으면서 근무할 수 있는 회사들은 어떤 회사들일까?일반적으로는 웹에이전시 업계가 디자이너들의 능력에 대한 평가에 따라 차등적인 연봉을 지급하고 있다. 하지만 그것도 왠만한 디자인 능력으로서는 뚫기 힘든 관문이다. 이미 큰 웹에이전시의 경우에는 그 조직체계가 매우 탄탄하고, 복잡하기 때문에 그 안에서 실력있는 여러 웹디자이너들을 물리치고 고액 연봉자가 된다는 것은 여간 힘든일이 아니다.그렇기 때문에 디자이너들에게 필자가 추천하고 싶은 곳은 이제 막 에이전시 사업에 뛰어드는 신규회사나 이전부터 웹에이전시 사업부분을 하고 있지 않았지만, 신규 사업부로 에이전시 사업부분을 확장시키는 인지도 있는 기업이 일반 디자이너들이 연봉을 높게 상향 시킬 수 있는 곳들이다.물론 신규 회사이기 때문에 위험부담이 상당히 높은 것도 사실이다. 그러나 본인의 능력을 최대한 발휘하여, 인정받고 싶다면 이런 업체가 디자이너들이 가장 빨리 도약할 수 있는 업체가 아닐까 싶다.



멀티플레이어적인 능력

웹디자이너의 능력은 디자인 감각을 기본으로 1인 다역의 소화 능력을 필요로 한다. 현재 인터넷상에서 웹디자인의 범위가 어디까지인지에 대한 논쟁이 계속되고 있지만, 그러나 그것은 어디까지나 논쟁에 불과하다.실제 웹디자이너로 근무하게 되면 웹디자인의 범위를 떠나 웹에 대한 최신 기술 및 관련 프로그램들을 이해하여 습득하고 있어야 하며, 이를 적용하지 못하면 실력있는 웹디자이너로 인정받지 못하는게 현실이다.이것은 바로 자신의 연봉과 직결된다. 가령 HTML코딩을 담당하는 코더를 따로 둬 운영하는 회사의 경우도, 그 코더를 관할하는 것은 디자인 팀장이 되기 싶다. 또한 일의 급박성에 따라 코더를 따로 두지 못하는 경우는 디자이너의 몫이 된다. 이렇듯 디자이너는 단순히 디자인 시안을 잡고 그래픽 작업을 하는 것만을 띄어 넘어 코딩에서부터 플래쉬 애니메이션, 크리에이티브 제안 작업, 스타일 가이드 제작 작업, 간단한 프로그래밍 작업등을 담당할 수 있어야 하는 것이다. 다시 말해 역할에 있어 빈공간이 생겼을 경우 그 공간을 훌륭히 매꿀 수 있는 능력이 있어야, 그 사람에 대한 필요성과 함께 평가 가치가 틀려지게 된다.또한 웹이라는 매체를 떠나서도, 회사에서 요구하는 고급 디자이너는 편집물 디자인이 가능해야 한다. 일반적으로 학원에서 웹디자인 과정을 막 수료하고 나온 경우에는 편집디자인이 어떻게 이루어지는지 웹과 인쇄물 디자인의 차이가 무엇인지 모르는 경우가 많다.굳이 매킨토시를 이용한 편집디자인을 하지 않더라도 포토샵에서 인쇄물을 제작하기 위해서는 어떤 설정을 하고 작업을 해야 하는지 정도는 반드시 알고 있어야 한다.웹에이전시처럼 디자이너들을 대규모로 고용하여 운영하는 업체를 제외하고는 2~3명의 디자이너로 운영하는 경우가 많다.그러다 보니 회사에서 요구하는 것은 웹디자인 뿐만 아니라 각종 팜플렛, CI명함, 포스터 등을 디자이너가 제작해 주기를 원한다. 이를 소화 가능해야 디자이너는 그 회사에서 반드시 필요한 존재로 인정 받게 되는 것이다.- 스토리보드가 없는 상황에서도 사이트 자료를 스스로 정리하고 사이트를 제작할 수 있는 능력- 간단한 php프로그래밍 능력 (공개된 php소스를 커스트마이징 할 수 있는 능력)- 크리에이티브 제안 작성 능력- 인쇄 디자인물 작업 능력



남들보다 배이상 빠른 사이트 제작 능력

웹디자이너의 능력은 크게 두군데서 갈라진다. 감각과 속도, 이것의 일반적으로 웹디자이너의 실력을 가늠하는 척도일 수 있다.그만큼 디자이너와 회사에 있어 속도는 바로 수익과 연관되는 부분이다. 아무리 디자인감각이 좋고, E-business에 대한 이해가 좋더라도, 사이트 제작 속도가 느린 경우는 인정을 받기 힘들며, 아무리 좋은 디자인을 만들더라도, 시간을 지키지 못하는 디자이너는 살아 남지 못하기 마련이다. 가령 5,000,000원 짜리 사이트를 수주한 경우 한 회사에서 최소 투입인력은 3명이 되기 마련인데 이러한 사이트를 1개월이 넘도록 작업한다면 회사에는 인건비를 지불하면 돌아오는 수익이 없게 되는 것이다. 회사에 있어서는 시간이 먼저고 퀄리티가 그 이후 라는 점을 명심해야 할것이다. 일반적으로 2천만원 이상의 연봉을 받는 디자이너는 일반 디자이너보다 1.8배 정도의 사이트 디자인 속도를 지녀야 하며 3천만원 이상의 웹디자이너는 적어도 2배 이상의 사이트 제작 속도 능력을 지녀야면 그 가치를 인정 받을 수 있게 되는것이다.이런 속도 문제를 해결하기 위해서는 디자이너 스스로가 체계적인 디자인 관리 시스템을 만들어 관리할 필요가 있으며 아이디어 발상에서부터 제작까지 시간을 단축할 수 있는 나름대로의 과학적이고 효과적인 방법론을 개발할 필요가 있다.또한 디자이너 스스로 아무리 빨리 제작할 수 있다 하더라도 규모가 있는 사이트의 경우에는 기획자와 디자이너간의 커뮤니케이션 부족으로 인한 시간 지연이 많이 발생하게 되는데 이를 방지하기 위하여, 기획 회의에 참석하고, 정확한 스토리보드를 요구할 필요가 있다.그럼 필자 나름대로 정립한 체계적인 디자인 개발 방법론을 제시해 보면 다음과 같다.1. 사이트 디자인 컨셉 설정디자인 컨셉 설정은 일반적으로는 무작위적 또는 즉흥적으로 화면 디자인을 통해 디자인 컨셉을 도출해 가는 경우가 많이 있지만, 가장 효율적이고 체계적인 방법으로는 마인드맵이나 브레인스토밍 같은 아이디어 발상 시간 또는 회의를 거쳐 디자인 컨셉을 확정하는 것이다.개인 혼자 디자인 컨셉을 잡아야 하는 경우에는 마인드맵을 통한 컨셉 확정이나, 동종 사이트 또는 경쟁사이트를 분석한 후 정해진 시간내에 컨셉을 도출한다.그리고 디자인팀 또는 단위로 디자인 컨셉을 잡는 경우는 시간을 정해 놓고 브레인 스토밍을 거쳐 나온 몇가지 아이디어를 개인별로 나누어서 컨셉을 잡는다. 이렇게 시간을 정해 놓고 아이디어 발상을 끝내고, 화면 작업에 임해야만, 즉흥적인 작업을 면할 수 있고, 시행착오를 줄여 나갈 수 있게 되는 것이다.2. 디자인 이미지 등의 자료 수집디자인 컨셉이 잡히고 나면 바로 이미지 등의 자료수집에 들어가는 것이 좋다. 자료 수집은 1명이 담당하거나, 2명이 나누어서 진행하는 것이 좋으며, 1~2일 동안 관련 이미지를 수집해 놓으면 향후 템플릿 제작에 있어, 각자가 이미지를 찾는 시간을 많이 줄여 줄 수 있을 것이다. 2. 서브 페이지 디자인서브 페이지의 경우는 컨텐츠 별로 여러장을 제작하게 된다. 이 때 디자이너들이 가장 시간을 많이 지연 시키는 부분이, 레이아웃과 컨텐츠의 배치에서 오는 부분들이다. 이를 해결하기 위해서는 서브페이지 하나를 정확히 완성하고 그 다음 서브페이지 작업으로 넘어가는 것이다. 많은 디자이너들이 서브 페이지의 메인 이미지작업을 먼저한 다음 각각의 서브페이지 레이아웃을 보완해 가는 경우가 많이 있는데, 그러한 방법은 효율적이지 못하다.아직 다른 서브페이지의 메인 이미지를 잡지 못해더라도, 컨셉을 미리 정해 놓았다면, 특정 부분의 한페이지만 선택하여 100% 완성하고 다음 작업으로 넘어가면, 작업이 수월히 진행될 수 있다. 레이아웃에서 오는 혼동감이나, 메뉴의 배치에서 오는 혼란감을 줄임으로써 다음 페이지들은 쉽게 쉽게 진행 될 수 있는 것이다.3. 게시판 또는 공통 아이콘아주 조그마한 사이트 경우는 게시판 같은 기능들이 몇 개 되지 않아 별로 문제가 되지 않지만, 게시판 기능들이 각 컨텐츠별로 있는 사이트의 경우는 그 작업에 있어 많은 부담감을 느끼게 된다. 따라서 디자이너가 2명 이상이라면, 1명이 전담하여 공통 아이콘과 게시판을 디자인 하는 것이 좋다. 그렇게 되면 게시판 디자인에서 오는 부담감을 모든 디자이너가 줄일 수 있으며, 전체적으로 게시판에 통일성을 부여할 수 있게 되는 것이다. 3. html코딩코딩작업에 들어가기 전에 반드시 선행되어야 하는 작업은 디렉토리 구조 및 네이밍 작업이다. 이부분은 사이트 디자인 작업시 프로그래머가 담당하게 하는 것이 좋다. 그래야 HTML 코딩작업에서 오는 중복성이나, 오류 등를 줄일 수 있게 된다.또한 코딩 작업전 디자이너의 역할에서 선행되어야 하는 것은 스타일시트 정의다.스타일 시트가 없으면 제작 후 일일이 다시 통일시키는 작업이 병행되어야 하기 때문에 하나의 스타일시트를 만들어 통일시키는 방법이 좋다.또한 메타태그나, Title, 주석문 등도 코딩 전에 규약을 정하여 작업해야 할 것이며, 여러명의 디자이너가 작업하는 경우에는 사용하는 웹에디터도 통일 시켜야 할것이다.




프리젠테이션 능력

디자이너와 대중 앞에서의 발표는 뗄레야 뗄 수 없는 불가분의 관계이다. 보통 디자인 관련학과의 대학 수업에서는 작품 발표회 등의 시간을 많이 가짐으로서 프리젠테이션 능력을 기르며, 그 이유는 디자이너들의 프리젠테이션 능력을 디자인 감각 못지 않게 중요하게 생각하는 부분이기 때문이다. 아무리 디자인을 객관적으로 한다고 하더라도 디자인에서 디자이너의 주관적인 감정이 완전히 배제 될 수 는 없는 것이다. 따라서 디자이너가 그려낸 디자인물을 처음 접하는 사람들은 디자이너가 전달하고자 하는 메시지 또는 컨셉을 쉽게 파악하기 어렵다.그러므로 디자이너는 클라이언트나, 고객 앞에서 자신의 디자인에 대한 컨셉안의 설득력 있는 설명을 통해 자신의 디자인을 정당화 할 필요가 있으며, 감각적으로 약간 부족한 부분도 과학적이고 논리에 맞는 설명을 통해 커버할 수 있는 것이다. 그러나 실제로 회사에서 이런 역할을 할 수 있는 디자이너들은 얼마 되지 않는다. 필자가 만나본 많은 디자이너들은 많은 사람들 앞에서 발표를 한다는 것에 많은 부담을 느끼고 있었으며, 당당하게 자신의 생각을 표현하는 디자이너를 많이 보지 못했다.디자인을 한 사람이 자신감이 없으면, 그것을 보는 사람들은 더욱더 그 디자인에 대해 신뢰를 가질 수 없게되는 것이다.어떤 회사의 경우는 디자이너의 디자인 계획을 계획자가 발표하는 경우가 종종 있는데, 이는 바람직하지 못하다. 디자인에는 기획적인 부분도 많이 포함 되겠지만, 그 이면에는 비쥬얼을 통한 감동도 숨어있기 때문이다. 이를 기획자가 알아차리기는 힘든 것이 사실이다.



대형사이트 제작경험

웹디자이너의 대다수가 근무하는 회사들의 유형은 사이트 관리직이 많으며, 웹에이전시에서 근무하더라도 소규모 형태의 작업을 하는 경우가 많이 있다. 이런 경우 특별히 웹사이트 제작 프로세스나, 디자인 프로세스를 생략한채 작업에 임하는 경우가 많다. 이러다 보니 정작 대규모 사이트 제작시에는 무엇부터 시작해야 할지 몰라 우왕좌왕 하는 모습들이 많이 발견되며, 이로 인해 시간 지연과 다른팀과의 마찰이 야기되기도 하며, 클라이언트에게 신뢰를 주지 못하는 경우가 많이 있다.대형 사이트 제작시에 많게는 디자이너가 20명 정도 투입되는 경우도 있는데, 이때 그들을 효과적으로 관리하지 못하게 되면, 제작단계에서 많은 문제들에 봉착하게 된다.봉착하게 되는 문제들 중에 처음으로 겪는 겪는 문제가 바로 시간 지연에 대한 문제와 디자인의 일관성이 맞지 않는 경우이다.그렇기 때문에 자신이 많은 연봉을 받는 디자이너로서 대접 받기 위해서는 회사에서 큰 규모의 프로젝트를 부담없이 맡길 수 있는 상황이 되어야만 할 것이다.대형 사이트는 철저한 약속과 엄격한 일정관리, 작업 경험등이 선행되어야지만, 시행착오 없이 프로젝트를 완수 할 수 있다. 조그마한 회사에 근무하거나, 쇼핑몰을 운영하는 회사에 근무하여 대형 사이트 제작 경험이 없는 디자이너의 경우는 우선 정규직이 아니더라도 대형 프로젝트를 수행할 수 있는 곳에서 계약직이나, 아르바이트 형태로 참여하여, 작업의 형태와 팀 운영에 대해 학습할 필요가 있다. 그리고 계약직이나 아르바이트로 참여하여 제작된 큰 규모의 사이트라도, 회사 면접시 많은 가산점을 받게 된다. 소규모의 프로젝트에는 그만큼 많은 시간과 노력이 들어갈 수 없기 마련이다. 시간과 노력이 소비되지 않은 사이트는 퀄리티 있는 작품이 나오기 힘들다. 그래서 소규모 프로젝트의 사이트는 즉흥적으로 제작된 사이트들이 많다.어떻게 보면 디자인 역시 과학이라 할 수 있다. 치밀한 전략하에서 제대로 된 디자인이 나올 수 있기 때문이다. 탐구하고 관찰하는 것은 웹디자이너에게 매우 중요하며 이런 경험이 디자이너의 실력을 한단계 상승시켜 주게 되는 것이다.




개인의 상품성

디자인도 상품이지만, 디자이너 역시 훌륭한 상품성을 지녀야 한다. 쉽게 말하면 대외적으로 인지도 있는 디자이너가 될 필요가 있다. 지금 현업에 종사하는 디자이너들중 국내 유명 웹디자이너 1~2명의 이름쯤은 쉽게 알것이다. 그리고 이들이 디자인한 작품에는 그 디자인이 어떻든 우선 신뢰와 존경이 뒷따르게 된다. 그리고 이들이 회사를 옮겼을 때 옮겨간 회사의 인지도는 함께 상승하게 되는 경우가 많다. 이처럼 디자이너 개인의 훌륭한 상품성을 지니고 있을 때, 그의 연봉은 그 상품성에 비례하여 수직상승하게 되며, 타 회사에서 그 사람을 스카웃 하기 위해서는 당연히 높은 연봉을 제시해야 한다는 것을 상식으로 생각하게 될 것이다.그러나 이처럼 모든 디자이너와 회사에서 그 이름을 기억하는 웹디자이너가 되기 위해서는 많은 노력과 타고난 감각이 필요하며, 많은 시간과 주변 여건이 좋아야만 가능하다.디자이너 개인이 실력이 아무리 뛰어나다고 하더라도, 그 이름을 쉽게 알릴 수 있는 환경에 근무하지 않으면, 무척 힘든 일이 될것이다.디자이너들의 상품성을 높여가는 순차적인 몇가지 방법들을 제시해 보자면 다음과 같다.

1. 개인의 역량을 최대한 발휘할 수 있는 개인 사이트를 최대한 살려라.2000년도에 어떤 공모전에서 비비 사이트의 운영자를 만났던 기억이 있다. 그 당시 픽셀 디자인이라는 용어가 사용되지 않았던 시기 였는데, 그 디자이너는 자신의 사이트에 픽셀디자인과 함께 사람들이 많이 부담스러워 하는 칼라인 형광색 칼라를 사용하여 자신의 사이트를 제작해 인기상을 받았었다. 그 공모전에서 필자가 대상을 수상했었는데 지금 돌이켜 보면 그당시 그 디자이너의 작품이 더 기억속에 남고 질리지 않는 사이트였던 것 같다.현재 그 디자이너가 운영하는 bibi1004라는 사이트는 꽤 유명한 사이트가 되어 있으며, 그 개인 사이트를 통해, 많은 업체에서 일을 맡아 진행하고 있는 것으로 알고 있다.이처럼 개인 사이트는 개인의 이름을 알릴 수 있는 훌륭한 도구이다. 클라이언트의 요구에 맞추고, 유저빌리티에 초점을 맞추어 제작하는 회사 사이트라면 디자이너의 이런 실험성을 담아내기 힘들다. 따라서 디자인에 대한 아무 제약이 없는 본인의 개인 사이트를 적극 활용하여, 새로운 트랜드를 만든다면 관심을 끄는 디자이너로, 세간의 주목을 받게 될것이며, 이것이 바로 개인의 상품성과 연관되어질 것이다.

2. 웹디자인에 대한 글을 써라웹디자인이 본격화 된지 이제 5년쯤 된 것 같다. 그러면서 웹디자인에 대한 이론들이 조금씩 자리를 잡아 가고 있는데, 아직 많은 부분들이 정리 되지 못한 것이 실정이다. 필자의 경우는 아이웹디넷이라는 사이트를 통해 강좌와 함께 필자가 웹디자인에 대해 가지고 있던 생각들을 정리한 글들로 인하여, 별로 실력은 없지만, 많은 인지도를 형성할 수 있었다. 비슷한 예로 www.uidesign.co.kr이란 사이트가 있는데, 이 사이트 역시 UI에 대한 이론들을 정립화 시켜나면서 UI 디자인 전문업체로 업계에서 상당한 인지도를 형성하였고, 그 그들이 결국은 책으로 편집되어 나오기도 하였다.이처럼 아직 정립되지 않은 부분들을 정립해 갈 수 있는 글을 발표한다면, 그 글들로 인하여 당신의 상품 가치는 더욱 더 상승할 것이다.

3. 공모전을 활용하라국내에 몇가지 웹공모전이 있다. 그러나 개인을 대상으로 한 웹디자인 공모전의 경우는 그다지 퀄리티 높은 작품의 출품률이 적다. 그 이유는 실력있는 디자이너들은 대부분 현업에 종사하면서, 공모전을 위해 별도의 사이트를 제작할 시간적 여유를 가지고 있지 못하기 때문에, 공모전에 참가하는 사람들의 분포를 보면 학생들이 대부분이다.그러므로 본인이 어느정도 시간적 여유가 있고, 디자인에 대해 자신이 있으면 공모전에 출품하여 상을 수상하는 것이 본인의 상품성을 높이는 좋은 기회가 될 것으로 보인다. 공모전에서 수상 경험이 있기 되면, 그 작품의 퀄리티를 떠나 일단 업계에서는 대외적으로 인정받은 디자이너로 대우하게 되기 때문이다. 자신의 실력을 공식적으로 인정 받을 수 있는 수단이 많지 않기 때문에, 일반 디자이너가 인지도를 쌓아가고, 자신의 상품 가치를 높여가기 위해서는 공모전을 적극 활용할 필요가 있다.

4. 디자인적인 이슈를 만들어 언론을 끌어내라꼭 웹사이트가 아니더라도, E-business와 관련한 사업을 통해, 잡지 또는 언론에 자신의 이름과 사진을 올릴 수 있는 기회를 만들어라.그리고 그 보도자료를 자신의 포토폴리오 맨 앞부분에 담는다. 만약 그렇게만 된다면, 당신을 고용하고자 하는 회사에서 당신을 바로 보는 눈이 틀려지게 될 것이다. 실린 기사가 단순한 당신의 소개에 그치더라도, 자신이 언론에 소개 되었다는 자체만으로도 당신이 인지도 있는 디자이너이기 때문에 매스컴에 실렸을 것이라고 회사는 상상하기 때문이다.

 

 

 

출처:http://kin.naver.com/open100/detail.nhn?d1id=1&dirId=10501&docId=233254&qb=6rWt64K0IOycoOuqhSDsm7nrlJTsnpDsnbTrhIg=&enc=utf8&section=kin&rank=2&search_sort=0&spq=0

 

저작자 표시 비영리 동일 조건 변경 허락
신고
크리에이티브 커먼즈 라이선스
Creative Commons License

'서랍 위' 카테고리의 다른 글

나의 연봉을 올리기 위한 조건  (0) 2013.01.10

도움되는 곳들 즐겨찾기 목록 201301정리

타이포그래피 서울 http://www.typographyseoul.com/index.php?mid=media&category=89

(왕춘호님은 학교 강의 나오셔서 직접 만나뵈었던 분)

기타 신진디자이너들의 인터뷰를 볼 수 있음

 

웹공부와 기능사 공부에 도움이 되는 곳

http://blog.naver.com/qqprriy

http://mbyc.blog.me/

http://blog.naver.com/seogi1004

http://uiux.co.kr/70151903090

 

플래쉬도움

http://blog.naver.com/cdbii

http://vkdnj8484.blog.me/

http://blog.naver.com/ulish

 

웹폰트

http://www.typolink.co.kr/

http://www.webfont.com/

 

 

사운드소스 찾는 곳

http://www.findsounds.com/ISAPI/search.dll

 

사진 소스 찾는 곳

http://ko.inter-pix.com/nature/trees_leaves/

http://ko.hereisfree.com/material/class4/27-1.html

 

웹디자이너 블로그/사이트

http://means24.blog.me/

영향력있는 30인의 웹디자이너 http://www.webdesigndev.com/roundups/30-most-influential-people-in-web-design

http://www.301room.com/5.0/

http://www.hj-design.com/6ix/information.php

http://www.mnstory.com/

http://www.runilove.com/

http://www.heestory.com/

웹디자이너 30인의 포트폴리오 사이트모음 http://auxo.co.kr/102094810

 

포토샵 CS4 추가 플러그인

http://www.designlog.org/2512017

 

프레젠테이션

장오빠  http://blog.naver.com/mulpotato/

혜강씨  http://leehyekang.blog.me/

 

저작자 표시 비영리 동일 조건 변경 허락
신고
크리에이티브 커먼즈 라이선스
Creative Commons License

디자인 정글 매거진

UX 관련 http://magazine.jungle.co.kr/cat_magazine/master_list.asp?main_menu_idx=42&sub_menu_idx=52

 

 

웹 관련 http://magazine.jungle.co.kr/cat_magazine/master_list.asp?main_menu_idx=42&sub_menu_idx=56

 

툴 관련 http://magazine.jungle.co.kr/cat_magazine_special/master_list.asp?main_menu_idx=42&sub_menu_idx=71

저작자 표시 비영리 동일 조건 변경 허락
신고
크리에이티브 커먼즈 라이선스
Creative Commons License

CX에 대하여

출처: http://magazine.jungle.co.kr/cat_magazine_special/detail_view.asp?pagenum=1&temptype=5&page=1&menu_idx=144&master_idx=15194&main_menu_idx=42&sub_menu_idx=52

 

 

 

 

 

 

 

CX를 이해하는 첫걸음 – CUSTOMER JOURNEY MAP

고객 경험을 구체화 하는 방법과 관련해서 많은 방법론들이 있으나 이러한 방법론들 중 가장 기초적이면서도 긴요하고 사용되는 것이 고객 여정 맵 ‘CUSTOMER JOURNEY MAPS’ 이라 불리는 것이다. 이 고객 여정 맵 ‘CUSTOMER JOURNEY MAP’ 은 고객이 어떤 상품이나 서비스를 이용하기 전의 단계부터 사용 이후의 단계까지를 스테이지로 나누어 해당 단계별로 고객이 어떠한 경험을 갖는지를 이해하고 이를 통해 새로운 경험을 제시하는 하나의 시작점이 된다.

지난 회 언급한 것처럼 고객 경험은 직접적인 제품, 서비스와의 접촉 뿐 아니라 모든 직간접적인 접촉 속에서 만들어 지는 경험이라는 것을 상기해보면 어떠한 의미인지 쉽게 이해 할 수 있을 것이다.


그림 1 에서 보는 것처럼 고객 여정은 크게 5단계로 이루어져 있다. 첫번째로 참여(Engagement) 단계로 어떠한 기업의 제품, 서비스를 이용할 목적을 가진 잠재적인 고객이 다양한 방식의 매체 광고, 리뷰 사이트 등을 통해 접촉하는 단계를 이야기 한다. 두번째는 구매(Buy) 단계로 고객이 해당 제품, 서비스를 구매 하는 단계를 의미한다. 세번째 단계는 사용(Use)를 말하고 네번째 공유(Share)는 고객 자신이 제품, 서비스를 사용 후 다른 사람들에게 이야기 하거나, 리뷰 사이트에 의견을 남기거나, 주변 사람들에게 알리는 단계를 말한다. 마지막으로 완료(Complete)로서 제품, 서비스를 사용 후 폐기, 변경, 업그레이드, 재구매 등을 하는 단계이다.

이러한 고객 여정 맵은 그림 2 ~ 그림 4와 같이 이를 다루는 회사나 조직마다 조금씩 변형되어 사용되고 있고, 각 단계에 대한 정의 역시 제품이나 서비스의 종류마다 조금씩 다르지만 고객과 제품 서비스간의 일련의 과정들을 시간적으로 정의 하는 것을 기본으로 하고 있다. 또한, 각각의 스테이지는 더욱 세부적으로 나누어 정의 될 수도 있다.

이러한 고객 여정 맵은 주제로 다루고 있는 고객 경험에만 사용되는 것은 아니다. 최근의 서비스 디자인, 마케팅, 세일즈 등에서도 동일하거나 유사한 맵을 사용하고 있다.



‘고객여정맵’의 이해

고객 여정 맵을 이해 하기 위해 컴퓨터를 구매하는 고객의 여정을 예시로 들어보면 다음과 같다.

1. 참여 Engagement : 컴퓨터를 구매 하기 위해 고객은 광고 전단지나 TV 광고, 동호회, 뉴스 등을 통해 관련 정보를 얻거나 주변 사람, 전문가, 혹은 매장을 방문해 점원으로 부터 이야기를 들어본다.

2. 구매 BUY : 여러 경로나 채널을 통해 얻어진 정보들을 바탕으로 특정 제품을 구입하려는 고객은 매장이나 인터넷을 통해 구매를 하게 되는데 이때 고객은 구매를 위한 여러가지 경험 ( 점원의 친절함, 카드나 현금 할인, 할부의 조건, 추가적인 이득) 등 을 하게 된다.

3. 사용 USE : PC 를 구매한 고객이 이제 사용을 하는 단계에서 여러가지 경험들을 하게 될것이다. 일차적인 제품에 대한 경험부터 업데이트, 애프터 서비스와 같은 경험들도 이루어진다.

4. 공유 Share : 자신이 구매하고 사용하고 있는 PC에 대해서 장단점이나 불만등을 타인과 공유한다. 소극적으로는 제품에 대한 피드백을 남겨놓을수도 있겠지만 리뷰 사이트에 사진과 함께 pc 에 대한 상세한 내용을 올릴 수도 있을 것이다.

5. 완료 Complete : 시간이 지나서 고객은 자신이 구매한 제품이나 서비스를 업그레이드를 할 수도 있고, 제품을 중고로 팔거나, 서비스를 종료하거나, 다른 회사를 찾거나, 폐기 할 수도 있을것이다.

이와 같이 고객경험은 구매전 부터 구매 후까지 일반적으로 고객들이 겪을 수 있는 일련의 과정들을 시간순으로 정리한 고객 여정 맵을 통해 전체적으로 이해가 가능하다. 또한, 이러한 고객의 여정을 통해 지난 번 언급했던 터치포인트 ‘Touch point’ 를 중심으로 이루어지는 실제 고객들의 목표, 인식의 정도, 동기, 행동, 감성과 같은 경험을 이루는 요소들을 발견하는데 도움을 줄 수 있다


‘고객여정맵’에서 무엇을 찾는가?

미국의 프로그 디자인(FROG DESIGN)과 파이낸셜 엔진(FINANCIAL ENGINE)에서 고객 경험 혁신을 이끌고 있는 아담 리차드슨(ADAM RICHARDSON)은 이러한 고객 여정 맵을 통해 다음과 같은 내용을 이해하는데 유용할 것이라 이야기 하고 있다.

행위 : 각각의 스테이지에서 고객은 무엇을 하고 있나? 어떠한 행위들이 다음 단계들로 고객을 이끌고 있는가?

동기 : 고객들은 왜 다음 단계까지 그들의 동기를 유지하는가? 그들이 느끼는 감정은 무엇인가? 왜 그들은 그런것에 관심을 갖는가?

의문점 : 고객들을 다음 단계로 넘어가게 힘들게 하는 불확실한것, 애매모호한것, 이슈들은 무엇인가?

장애물 : 어떠 시스템, 과정, 가격, 제도 등이 다음의 스테이지로 넘어가는데 장애물이 되는가?
물론, 이러한 이해를 위해 정량 리서치 외에 고객 인터뷰, 에스노그래픽 리서치, 포토 옵져베이션 같은 정성 리서치를 통한 중요성 역시 강조하고 있다.


영국의 미디어그룹인 버진미디어(Virgin Media)는 6개월 동안 25,000 명의 고객들을 통해 그림 4와 같이 6 가지의 고객 여정 스테이지를 바탕으로 단계별 고객의 목표를 이해하고, 이를 새로운 고객 경험으로 제공하기 위해 새로운 사후관리 서비스와 이를 위한 인력 구성, 고객들을 상대하기 위한 새로운 형식의 콜센터 등을 운영하고 있다.



그림 5는 미국의 어댑티브 패스(Adaptive path)에서 Rail Europe을 위한 고객 여정 맵으로, 여행을 하기 위해 Rail Europe을 이용하는 고객 여정 맵을 각 단계별로 나누고, 해당 스테이지마다 고객들의 행위, 생각, 감정, 경험들을 맵핑하고 이를 통해 고객 경험의 기회를 정의 하고 있다.



CX와 디자인

이와 같이 고객 경험은 이미 사용자경험과 관련된 여러 논의나 방법적인 접근 그리고 이를 바탕으로 하는 구체화와 관련해서 볼때 좀 더 전체적이고 확장된 개념이다. 또한, 부분적이긴 하지만 고객 경험을 위한 여러 가지 시도들이 부분적으로 가시화 되고 있다. 예를 들어 제품의 구매 단계나 사용단계에서 흔히 접할 수 있는 패키지 디자인이나 설치를 위한 메뉴얼 디자인에 대하여 이미 토탈 경험(Total experience)이라는 큰 틀에서 변화되고 있다.

하지만, 이러한 고객 경험의 경우 기존의 사용자 경험보다 좀 더 넓은 시각에서 접근함에 따라 디자인이 관심을 가져야 하는 영역도 확대되어야 할 것이다. 기존의 디자인이 기술적인 영역과의 융합을 통해 사용자 경험이 구체화 되었듯이 이제는 경영, 마케팅, 브랜드 등과 같은 영역도 디자인이 이해하고, 융합하여 고객경험을 위해 준비해야 할 것이다. 사용자 경험의 중요성을 알고 이를 강화하기 위하여 기존에 없었던 UX 디자인 조직이 생기고, 사용자 경험 디자인을 위해 책임을 지는 임원이 발탁되는 것처럼 몇년후에는 기업내 고객 경험팀이 만들어지고 그 조직을 이끌기 위한 사람들도 필요할 것이다.

또한, 아이덴터티의 구체화, 브랜드 구체화와 같이 비지니스에 있어 보조적이던 디자인 역할 역시 고객 경험이라는 하나의 거대한 목표 달성을 위해 새로운 역할이 주어지거나 추가될 것이다.
예를 들어, 매장의 비쥬얼 디자이너는 단순히 가격 정보, 판매 정보를 효과적으로 전달하는데 그치지 않고 고객 경험의 구체화 라는 목표를 위해 그 역할이 다시 정의 될 수 있을 것이고, 현재의 사용성, 접근성, 효율적인 정보 전달 등이 일차적인 목적인 웹사이트 디자인 같은 경우는 고객 경험의 중요한 터치 포인트 로서 기존의 사용자 경험과 더불어 새로운 고객 경험을 위한 아이디어나 구체화에 좀 더 많은 역할을 해야 할지 모른다. 최근의 모바일 어플리케이션 디자인의 경우 기능적이고, 유용성 차원의 접근에서 보다 ‘고객 경험’을 만들고 강화하는 툴로서 정의될 수도 있을 것이다.

어쩌면 이런 역할의 변화와 확대는 디자인에 있어 성가신 일인지도 모른다. 하지만, 늘 사람들과 기업들은 디자인을 통해 새로운 아이디어를 찾고, 구체화해왔다. 이러한 점에서 고객경험은 디자인과 디자이너들에게 새로운 기회이고 도전일지도 모른다.

저작자 표시 비영리 동일 조건 변경 허락
신고
크리에이티브 커먼즈 라이선스
Creative Commons License


티스토리 툴바