티스토리 툴바


추천 BOOK&SITE2009/05/02 16:06

[중앙일보 권근영.이지영.강혜란.이영희] 엄마, 그림 잔치 가요

세계 인기 그림책 원화전

움직이는 그림 '애니' 축제

어른·아이 모두 즐거워요


5월의 미술관은 새로 돋아나는 잎사귀마냥 말랑말랑하다. 동화책 그림이 벽에 걸렸고, 움직이는 그림이 상영된다. 동화책 그림 속에는 현대인의 시각 확장에 기여한 역대 명화들이 숨어 있고, 애니메이션은 철학적 메시지를 간명하게 보여준다. 아이 손 이끌고 미술관까지 왔다면 여기서부터는 아이 손에 이끌려 다닐 차례다.  

#그림책이 벽에 걸렸다

까마귀는 '투톤'의 맵시를 자랑하는 까치가 못내 부럽다. 형형색색 다른 새들도 자기보다 나은 것 같다. 딸은 남들과 다른 말투를 쓰는 외국인 아빠가 부끄럽다. 프랑스 그림책 '위대한 까마귀' '아빠는 말할 때 R을 굴려요' 속 장면이다. 남과 나의 다름을 인정하고 자기존중감을 키우라고 응원하는 그림들이다. 가벼운 그림 속에 묵직한 내용을 심었다.

서울 서초동 예술의전당 한가람디자인미술관에서 열리고 있는 '2009 동화책 속 세계여행-세계 유명 일러스트레이션 원화전'에 나온 동화책 그림들이다. 앤서니 브라운·존 버닝햄·헬렌 옥슨버리 등 세계 10여개국 베스트셀러 작가들과 최숙희·이수지 씨 등 국내 인기 그림책 작가 등 65명의 원화 440점을 아이들 눈높이에 맞게 걸었다. 프랑스 작가 에르베 튈레가 1∼4세 영유아를 위해 디자인한 다채로운 체험공간, 아이들이 꼼짝도 않고 집중해 보는 애니메이션 상영공간, 그림책 2000여권을 늘어놓고 어린이 소파에서 맘껏 볼 수 있게 한 도서관 등 전시장은 아이들 세상이다. 4일, 5일에는 영국의 유명 동화작가 앤서니 브라운의 낭독회와 사인회가 있다. 전시는 6월 23일까지. 성인·어린이 입장료 1만원. 02-585-9991.

#'움직이는 그림', 애니메이션전

갓난아기를 등에 업은 아버지가 하늘로 치솟은 기둥을 힘겹게 오른다. 그동안 아비는 천천히 늙고 아들은 어른이 된다. 대사 하나 없는 애니메이션 속에서 삶과 죽음의 문제가 짠하다. 김준기 감독의 '인생'이다.

서울 신사동 코리아나미술관은 단편 애니메이션 축제중이다. 움직이는 그림으로 영역을 넓힌 미술작가와 작품성 높은 애니메이션 감독 등 22명의 영상물을 모았다. '크로스 애니메이트(Cross Animate)'전이다. 한국의 전준호·릴릴·문경원·김신일·김한나, 남아프리카공화국의 윌리엄 켄트리지, 중국의 부 후아, 이탈리아의 시모네 마시 등 미술가들의 회화적 애니메이션이 주종이다. 한국의 김준기·임아론·장형윤. 핀란드의 로라 느보넨 등 안시·오타와·자그레브·히로시마 등 세계 4대 국제애니메이션 영화제에서 호평을 얻은 이들의 작품도 나왔다. 10일까지. 성인 3000원, 초·중·고생 2000원. 02-547-9177. 

권근영 기자

아빠, 책 잔치 가요

파주 출판도시서 한 달 동안


신나는 책 세상, '어린이 책잔치 2009'가 1일 경기도 파주 출판도시에서 시작됐다. 5월 한 달 동안 열리는 책잔치에서는 '우리 가족, 우리 집, 우리 도시'를 주제로 책 마술쇼, 작가와의 만남, 북아트 체험 등 다양한 프로그램이 펼쳐진다. 책과 한층 가까워질 수 있는 기회. 참가비는 대부분 무료이며, '출판사 엿보기' 등 몇몇 행사는 사전예약을 해야 한다. 031-955-4390. www.pajubfc.org

#직접 보고

작가를 직접 만나는 것은 독자에게 색다른 경험이다. 책잔치 행사 중 『세상의 모든 지식』 김흥식 작가의 올바른 독서지도법 강연(2일), 『울지마 꽃들아』 최병관 작가의 비무장지대 이야기(2일) 등이 마련됐다. 『말놀이 동시집』 최승호 시인(2일)과 볼로냐아동도서전 '올해의 일러스트레이터' 로 뽑힌 장호 작가(3일), 『나쁜 어린이표』 황선미 작가(3일) 등이 독자와의 만남에 나선다.

어떻게 책이 나오는지 그 과정을 보고싶다면 '출판사 엿보기' 프로그램이 안성맞춤이다. 문학동네(8일), 문공사(9일), 보리(20일) 등은 사옥 견학 프로그램을 짰다. 주니어김영사(9일)와 사계절(13일)은 책을 인쇄하고 제본하는 과정까지 직접 볼 수 있는 체험 행사를 진행한다.

#싸게 사고

아이와 함께 직접 책을 골라 사는 경험은 아이를 책과 가깝게 묶어주는 특효약이다. 도서 할인 장터 '어린이책 대탐험'(9∼31일)은 싸게 살 수 있어 더 좋다. 영교와 보림 등 도서 할인 판매 행사를 따로 마련한 출판사도 여럿이다.

인터넷 서점 알라딘은 파주 출판도시에 있는 물류센터를 2일 오전 10시부터 오후 5시까지 개방한다. 사전예약없이 누구나 입장할 수 있으며, 참가자들은 온라인 서점의 재고관리 시스템을 견학하고 주문 상품의 집책·포장 등 주요 공정을 체험할 수 있다. 출판사 비룡소의 북아울렛 '까멜레옹'도 책잔치에 맞춰 1일 문을 열었다. 상설 운영될 '까멜레옹'에서는 깨끗한 반품 도서를 정가의 50% 가격에 판다.

#온몸으로 즐겨라

책으로 놀아라. 지루하게 접했던 책이 친숙한 친구로 다가오는 순간이다.

책놀이의 절정은 어린이날인 5일 출판도시 중앙도로에서 펼쳐지는 '북 올림픽'이다. 책을 머리에 이고 장애물을 피해 가며 달리는 '가족 대항 책릴레이', 책이 가득 든 박을 터뜨려 이긴 팀에게 나눠주는 '책박 터뜨리기' '책 속의 낱말 찾기' 등 책과 운동회를 결합시킨 프로그램이다.

이 외에도 도서관으로 개조한 버스 안에서 책도 읽고 선물도 받는 '책 읽는 버스 체험', 책 모양 비누를 만드는 '천연 책비누 만들기' 등도 5일까지 진행된다.

이지영 기자

누나, 영화·만화 봐요

TV와 영화만큼 '싼값'에 즐길 수 있는 어린이날 놀이가 있을까. 자녀와 함께 즐길 수 있는 애니메이션·드라마·영화가 가족 관객을 손짓한다.

#빠져보자, 동심의 세계

동심의 세계가 어린이만의 전유물이랴. 투니버스는 '아기공룡 둘리 특집'(2일 오전 7시~오후 7시) '명탐정 코난 극장판 특집'(3일 오전 9시30분~오후 7시30분) '개구리중사 케로로 5기'(4일 오전 10시~오후 8시) 등 최신 및 추억의 애니메이션을 잇따라 방송한다. 5일은 '빼꼼의 머그잔 여행'(오전 7시) '엘라의 모험'(오전 10시) 등 극장판 애니로만 하루종일 채운다.

카툰네트워크는 5일 특집방송 '나의 절친 몬스터'(오전 7시)를 통해 인기 애니 '벤10'과 '포켓몬스터DP'의 영웅들의 한판 대결을 선사한다. 챔프에선 극장판 애니 '도라에몽-진구의 우주표류기'(2일 오전 10시)와 미야자키 하야오 감독의 '귀를 기울이면'(2일 오후 8시, 3일 오전 10시) 등이 기다린다. EBS의 인기 애니메이션 '뽀롱뽀롱 뽀로로'는 시즌3가 4일 오전 9시 첫 방영된다.

#가족이 함께 눈높이 특집

어린이날이라고 애니메이션만 있는 건 아니다. EBS는 아시아 8개국이 공동 제작 프로젝트로 참여한 'ABU 어린이 드라마 시리즈'를 방영한다. 몽골·일본·한국 등 5개국 어린이들의 정신적 성장 과정을 그린 15분짜리 드라마들이다(4~8일 저녁 7시50분~8시10분). tvN은 5일에 '빅뱅 데이'를 편성, 오전 9시부터 오후 6시까지 아이돌 그룹 빅뱅의 서바이벌 다큐 '빅뱅 더 비기닝'을 11편 전편 방송한다. 영화채널 OCN에선 심형래 감독의 '디워'(2일 밤 10시, 5일 낮 1시)와 '해리포터' 시리즈가 가족 시청자를 반긴다.

#애니 목소리가 귀에 쏙

극장가에선 유재석·한예슬 등 특급 연예인들이 목소리로 출동한 애니메이션 '리틀 비버'와 '몬스터 vs 에일리언'이 가족 관객을 손짓한다. 법적으로 초콜릿이 금지된 나라에서 벌어지는 모험 애니메이션 '초코초코 대작전'과 네 번째 극장용 영화로 만들어진 '케로로 더 무비:드래곤 워리어'도 어린이 관객에겐 딱이다. 경기도 파주의 씨너스 이채에선 '잉크하트-어둠의 부활' '작은 영웅 데스페로' 등 신작을 포괄한 어린이 영화제를 5월 한달간 진행한다.

강혜란 기자

여보, 무료 콘서트 갈까

주말을 집에서만 보내기엔 너무 아까운 봄날. 조금만 부지런을 떨면 챙겨볼 수 있는 괜찮은 무료 콘서트 두개를 소개한다.

◆아파트숲 사이로 음악이 솔솔=매달 네번째 금요일 저녁 7시가 되면 서울 도곡동 아파트촌은 잔잔한 포크송으로 물든다. 양재역 근처 힐스테이트 갤러리에서 무료 공연 '메모리즈 콘서트' 가 열리기 때문이다. 힐스테이트 갤러리는 그동안 아파트 분양 당시에만 오픈했던 주택체험관을 인근 주민 누구나 즐길 수 있는 문화예술공간으로 바꿔 보자는 취지에서 만든 곳. 황희정 관장은 “개관 당시부터 1층을 콘서트가 가능한 홀 형태로 만들었다”며 “주민들이 오가는 길에 들러 즐길 수 있는 다양한 문화체험 서비스를 준비중”이라고 말했다.

12월까지 계속되는 '메모리즈 콘서트'에는 5월 22일 추가열, 6월 26일 나무자전거, 7월 24일 여행스케치, 8월 21일 한동준 등이 함께 한다. 힐스테이트 인터넷사이트(www.hillstate.co.kr)의 '행복 이벤트'란을 통해 신청하면 된다.

◆남산의 봄을 음악과 함께=4월부터 9월까지 서울 국립극장 야외무대에서 열리는 '토요문화 광장'은 도심 한 가운데서 자연을 벗하며 즐길 수 있는 무료 공연이다. 록·일렉트로닉·클래식 등 다양한 장르의 아티스트들이 매주 토요일 오후 6시 국립극장 문화광장에 마련된 특설무대에 오른다.

5월 2일 'SK 브로드밴드' 광고음악으로 널리 알려진 일렉트로닉 그룹 '더블유 앤 웨일(W&Whale)', 9일 모던 록밴드 '트랜스픽션', 16일 타악 퍼포먼스 그룹 '야단법석'을 만날 수 있다. 자세한 내용은 국립극장 홈페이지(www.ntok.go.kr) 참조.

이영희 기자

자기야, 세계 각국 음식·놀이 즐겨볼까

황금 연휴기간에 일정이 없다면 서울 경복궁 국립민속박물관(www.nfm.go.kr)으로 가보자. 한국에 정착한 이주민들이 고국 문화를 보여주는 '다문화 어울림 한마당'을 2~5일 연다. 2일 '일본의 날'을 시작으로 중국(3일), 러시아·중앙아시아(4일), 동남아시아(5일) 순으로 각 지역 음식·복식·놀이를 체험하는 한마당을 펼친다. 키르기즈스탄 전통춤, 중동민속음악 다르부카와 사저, 필리핀 대나무춤, 인도네시아 가물란 사물놀이, 중국 기예단 공연, 일본민속악기 공연 등 매일 3~5건의 민속공연을 연다. 한국으로 시집 올 때 갖고 온 전통 인형과 탈, 악기, 친정 어머니가 지어준 아기 옷과 신발 등 사연이 담긴 물건 500여점도 전시한다. 무료. 4일 한국프레스센터에서 '다문화사회에서의 박물관 역할'을 주제로 국제학술포럼도 개최한다.


어린이대공원 바다동물관

엄마 아빠들의 고민이 시작됐다. 오는 5월5일 어린이날과 이번 주말, 아이들을 데리고 어디로 나들이를 가야할 지 머릿속이 복잡하다. 특히 어려운 경제사정은 고민을 더욱 깊게 만든다. 돈 걱정 없이 갈 수 있는 곳은 없을까?

어린이대공원은 가장 손꼽히는 나들이 장소다. 여기에 전쟁기념관과 이제 문을 연 서울 곳곳의 상상어린이공원 50곳이 아이들을 기다리고 있다.

서울광장과 청계천, 고궁에서는 오는 2일부터 '하이서울페스티벌'이 열려 가족단위로 찾기에 좋다. 한강공원은 대대적인 보수공사를 진행중이어서 올해는 잠깐 잊어버리자.

참, 대중교통을 이용하면 꽉 막히는 길에서 보내는 시간을 줄일 수 있다. 더 많은 정보를 얻으려면 서울시 다산콜센터(국번없이 120번)로 문의하면 다양한 행사와 공연 정보를 얻을 수 있다.

◆확 바뀐 '어린이대공원'

서울 능동 어린이대공원이 개장 36년만에 새단장을 하고 다시 문을 열었다. 오는 5월5일 어린이날 오전 11시에 준공기념 축하행사를 연다. 마술극 '삼총사', 오스트리아 티롤시의 시장과 군수로 결성된 밴드의 연주와 유니버설발레단의 '돈키호테' 하이라이트, 대중들에게 널리 사랑받고 있는 소녀시대의 공연 등이 펼쳐진다.

또 수도방위사령부 군악대 퍼레이드, 리틀엔젤스합창단, 줄넘기묘기, BMX자전거 및 비보이쇼도 마련된다. 어린이대공원 준공과 그랜드 오픈을 알리는 퍼포먼스로 음악에 맞춰 춤을 추는 음악분수 오픈식도 함께 열릴 예정이다.

세계적 수준의 친환경적인 야외공연장 '능동 숲속의 무대'도 개장한다. 개관기념공연으로 오는 5월3~5일 동서양 오케스트라 교환공연(East meets West in Seoul)으로 서울시향과 체코의 프라하 방송 교향악단이 공연할 예정이다.

어린이공원 내에는 ▲야외음악당인 '능동숲속의무대' ▲백곰, 바다표범의 수중생태를 관찰할 수 있는 2층 규모의 생태형 수족관인 '바다동물관' ▲앵무새를 관찰, 체험할 수 있는 대형 새장인 '앵무마을' ▲음악 선율에 맞춰 분수 물줄기가 상하좌우 자유자재로 움직이는 '음악분수' 등이 새롭게 조성됐다.


6~10세 어린이들이 교통안전의 중요성을 직접 체험할 수 있는 교육공간인 '어린이교통안전체험관(Kids Auto Park)'도 이용해볼만하다. 오토 가상체험시설, 면허시험장, 오토부스 등 다양한 교육시설과 각종 부대시설 등 첨단 인프라를 갖추고 있다.

깨끗한 화장실에는 수유실, 파우더룸 등을 갖췄고, 매점도 흙내음까페테리아, 까페테리아, 복합매점 등의 편의시설로 개선됐다. 입장료는 무료다.

◆'전쟁기념관'에선 마술쇼

용산 전쟁기념관도 눈길을 끈다. 어린이날에는 13세 이하 어린이들에게 전쟁기념관 상설전시실을 무료로 개방한다. 입장순으로 1500명의 어린이들에게는 장난감과 책도 선물한다.

전쟁기념관 평화광장 등 곳곳에서 하루 종일 다양한 행사가 진행된다. 특전사 장병들이 펼치는 특공무술, 국방부 군악대와 의장대의 국군군악ㆍ의장행사 시범, 해동검도, 기천문 등 무술시범은 전쟁기념관에서만 볼 수 있는 체험이다.

특전사 복장과 낙하산 장비를 착용해 보는 특전사 강하장비 체험은 색다른 즐거움을 맛볼 수 있다.

특히 오전 10시30분부터 1시간동안 세계 최고의 신세대 마술사인 이은결이 진행하는 마술쇼와 사인회가 마련된다. 전시실을 관람하며 문제를 풀고 선물도 받는 '도전! 전시실 탐험대'에는 선착순으로 100가족이 참여할 수 있다.

이밖에도 댄스신동과 트로트신동이 펼치는 어린이한마당, 조선시대 장군복 입어보기, 요술풍선과 페이스페인팅, 다빈치자동차 만들기, 소방안전체험교실 등 이벤트가 준비된다. 행사문의는 전화 (02)709-3139로 하면 된다.

◆집앞에 생긴 '상상어린이공원'

우리 동네안에서도 동화책을 연상시키는 아름다운 어린이공원을 만날 수 있다. 어린이날을 맞아 기존 놀이터를 변신시킨 상상어린이 공원 50개소가 마침내 문을 열었다.

관악구 은천동 상상어린이공원
마포구 와우어린이공원의 '구름 타고 훨훨, 비행기 타고 훨훨', 양천구 금실어린이공원의 '아낌없이 주는 나무', 영등포구 두암어린이공원의 '잭키와 콩나무', 강서구 한마음어린이공원의 '달나라여행', 서초구 서래어린이공원의 '숲 속에 나타난 코끼리' 등 독특한 디자인이 눈길을 끈다.

'거인 걸리버의 저녁식사'라는 주제의 은평구 대조어린이공원은 프라이팬 앞에 있는 푹신푹신한 달걀 후라이 놀이시설에서 뜀뛰기를 할 수 있다. 유아전용모래놀이터의 대형수저에서 모래놀이와 소꿉장난에 빠져든다.

강북구 벌말어린이공원은 '애들아 숲속에서 놀자'를 주제로 5m 높이의 놀이시설로 만들어진 '자이언트 트리', 원통형 미끄럼틀 등 어드벤처 시설을 갖췄다.

아울러 16개 상상어린이공원에서는 다양한 개원행사도 펼쳐진다. 인근 유치원생의 재즈댄스, 어린이난타 등 축하무대와 연필바람개비 만들기, 막대풍선 만들기, 페이스페인팅 등 행사를 접할 수 있다.

◆온가족이 '하이서울페스티벌'

오는 2일부터 10일까지는 서울광장과 청계천, 5대 궁궐에서 '희망ㆍ나눔 하이서울페스티벌2009'가 열린다. 개막일인 5월2일 축제의 문을 여는 개막 길놀이 '꽃분홍길'은 저녁 7시부터 8시30분까지 청계광장에서 시작해 서울광장에 이르는 태평로에서 진행된다.

개막식이 열리는 2일 서울광장에서는 개막식전행사로 국악공연인 '오월의 궁 진찬연 어머니,어머니!'가 열린다. 이어 이휘재, 최여진의 진행으로 클론과 함께 축제의 로고댄스 '봄바람'을 배워보는 시간을 갖고 2PM, MC몽, 다이나믹 듀오 등 유명 가수들이 출연하는 축하 공연이 펼쳐진다.

5대 궁궐에서는 각 궁궐의 역사적 배경에 따라 색깔있는 주제를 잡아 우리 역사가 이야기로 되살아나는 '다섯가지 궁궐이야기'가 열린다.

청계천에서는 '나눔 청계천'이란 주제로 광복 이후 오늘까지 서울의 일상과 소망을 담아내는 살아있는 역사 박물관 '나의 살던 서울은'이 상설 전시되며 작은 동전들을 모으는 동전기부 행사, 벼룩장터 등도 마련된다.

[관련기사]

하이서울페스티벌 사전행사 모습
저작자 표시 변경 금지
Posted by (dicafun@paran.com) 디카펀
추천 BOOK&SITE2009/05/02 16:03
 
 
   
 
 
 
http://www.flower.or.kr/index.html
저작자 표시 변경 금지
Posted by (dicafun@paran.com) 디카펀
추천 BOOK&SITE2009/05/02 16:01

함평나비대축제2009 문화체육관광부에서 지정한 대한민국 최우수축제 입니다.

  1. 개요
    • 주    제 : “나비 = 희망”
    •    - 부   제 : 나비와 함께 함평에서 희망의 노래를...
    • 기    간 : 2009. 4. 24(금) ~ 5. 10(일) / 17일간
    • 장    소 : 함평엑스포공원, 청보리 밭 일대 257만㎡
    • 주최/주관 : 함평군 / 함평군축제추진위원회
    • 내    용 : 꽃과 나비가 어우러지는 전시, 문화, 체험 등
    • 후    원 : 문화체육관광부, 농림수산식품부, 환경부, 전라남도,광주광역시교육청, 전라남도교육청, 한국도로공사호남본부, 한국관광공사
  2. 축제대표나비
    • 대표나비 : 꼬리명주나비(Sericinus montela Fixsen )
    • 특징
      • 나비목 호랑나비과로 한국, 중국, 연해주까지 널리 분포
      • 개체에 따라 무늬의 변이 심하며 주로 봄과 여름에 논밭주변이나
      • 풀밭 사이를 낮게 날며, 수컷은 흰 바탕에 검은 띠무늬나 점이 있고
      • 암컷은 흑갈색 바탕에 담황색 띠무늬를 갖고 있다
  3. 명예대회장 : 크리찬키르쉬 세계델픽위원회 사무총장


  4. 연락처
    • 담당부서 : 전남 함평군 문화관광과
    • 주소 : 전남 함평군 함평읍 함평리 123-1 함평군청
    •            전남 함평군 함평읍 수호리 1153-2 함평엑스포공원
    • 전화 : 061)320-3364,3349
    • 팩스 : 061)320-3577
  • 담당부서 : 문화관광과 관광진흥 (061-320-3733)
http://hampyeong.jeonnam.kr/2008_hpm/hpm01/hpm0102/hpm010201/2024_shpm010201.php
저작자 표시 변경 금지
Posted by (dicafun@paran.com) 디카펀
추천 BOOK&SITE2009/05/02 14:54
www.kimdahee.com
사진이야기와 북디자인이 담겨있는 생각의 연못


작년에 오토살롱을 가서 소위 '진상'이라고 일컫는 행태를 너무 많이 보고 와서 다시는 가지 않겠다고
마음 먹었는데 올해도 어김없이 돌아온 모터쇼의 유혹을 참기란 어려웠습니다.
그리하여 인터넷 예매(바로 입장 가능한 모바일티켓 참 좋더라구요.)를 하고
일산 킨텍스에서 하는 2009 서울모터쇼를 다녀왔지요.

오토살롱이 화려한 튜닝카와 슈퍼카 위주라면(작년 오토살롱에서 봤던 람보르기니 레벤톤은 그야말로 +_+;;)
모터쇼는 현실적인 양산차와 컨셉트카가 많기 때문에 자세하게 내부도 구경해보고 각사의 경쟁 모델들을 비교할 수 있었는데
애정을 갖고 유심히 봤던 몇종을 간단하게 감상평?을 할까해요. 극히 주관적이면서도 디자인에 국한된 것이지만요. ^-^




폭스바겐의 중형세단 파사트의 쿠페 모델 CC-> 폭스바겐스러우면서도 미래지향적인
느낌인데다가 쿠페답지 않게? 균형도 잘잡힌 모습이 탄성을 지르게 만들었어요.
아쉽게도 뒷모습 사진이 없지만 제쿱과 비스무레하면서도 정말 매력적이랍니다.




렉서스 IS 250의 쿠페 모델인 IS 250C->가기 전에 가장 기대했던 모델로 타볼 수 없어서 아쉬웠지만(사실 눈물이 줄줄 ㅠ_ㅠ)
하드탑을 오픈하나 안하나 어색함 없이 예뻤고 경쟁 모델인 BMW 335ci가 울지 않을까 하는 걱정 아닌 걱정이 들었죠.
렉서스는 승차감도 좋고 내장도 고급스럽고 뒤트렁크 마저도 디테일이 폴폴...
옆 부스인 미국차-포드와 비교해보면 확연히 차이가 있더라구요.






기아의 그랜저급 모델이라고 하는 VG(가제)->거의 양산형에 가깝다는 컨셉트카로 쏘렌토 R처럼
기아 패밀리룩을 그대로 빼다 박은 것이 아닌 같은 연장선상에 있으면서 한단계 뛰어 넘은 모습이었어요.
부사장으로 있는 피터 슈라이어가 아우디를 디자인한 디자이너라서 그런지 몰라도
뒷모습은 아우디 A4와 로체의 느낌과도 비슷했구요.
하지만... 저 기아 로고 디자인은 확 바뀔 필요가 있겠다는 생각이 볼 때마다 드네요.






소렌토 R
->요 몇달간 러브 하비와, 러브 베라, 러브 엑셈까지 가입하게 만든 그 차.
결혼하면 차를 사야 하기에 가장 현실적인 대안으로 생각했던 모델인데 막상 출시되고 보니
성능이나 연비는 훌륭하지만... 가격도 너무 높게 책정되고 로체 그대로 닮은 앞모습과 -_ㅠ
C필러와 D필러 사이에 공허하게 넓은 공간이 전의를 상실하게 했었어요.
그리고 2열에 플라스틱 내장은...OTL
모터쇼에서 보니 생각보다는? 괜찮았지만 우리의 선택이 옳았음을 다행스럽게 생각했죠.






도요타 프리우스->얘는 외부 디자인이 외계 생명체 같은데...
내부 역시 계기판이 보통 있는 위치가 아닌 저 멀리 창쪽에 붙어 있어요.
첨엔 정말 신기했는데 적응하면 오히려 시야를 거스르지 않아서 편하지 않을까 하는 생각이 들었구요.
계기판에 뜨는 모양새가 이제까지 봐왔던 것과 참 다르죠? ^-^




마지막으로 혼다에서 자주빛 오토바이를 용감하게...
이렇게보니 염색안한 원래 머리색인데도 정말 밝긴 밝군요...=_=;

5D Mark2 | 24-70mm F2.8L | by Kimhakwon



바야흐로 날씨도 따뜻해진데다가 주말인 덕분에 드넓은 임시주차장을 가득 메울 정도로 사람들이 많았던 이번 모터쇼는
무엇보다 차:레이싱 모델들의 비율이 적절?하고 눈살을 찌푸릴만한 광경이 적어서
순수하게 자동차를 보기 위해 나온 사람들의 시선을 편하게 해주었던 것 같아요
.
물론 작년처럼 커다란 사다리 들고 다니면서 복잡한 길을 막는 모습은 여전히 보였지만 말이죠.

그리고 사진은 찍지 않았지만 아우디 부스에 남자 모델들이 함께 하는 시도도 괜찮았구요.
생각해보면 꼭 여자모델들만 차옆에 세워둘 이유도 없으니까요.
암튼 작년에 비해 마음 편히 모터쇼를 즐기고 돌아와서 기분이 참 좋네요. ^-^

저작자 표시 변경 금지
Posted by (dicafun@paran.com) 디카펀
추천 BOOK&SITE2009/04/26 10:59
사용자와의 첫만남부터 헤어짐까지 일거수 일투족을 파악해서 머리부터 발끝까지 사용자를 매료시키는 사이트를 디자인하는 방법을 알려주고 있는 책이다. 저자는 사용자 행동 패턴에 대한 이해를 토대로, 중요한 디자인 의사 결정법을 소개하고 있다. 실제 프로젝트의 다양한 사례를 통해 사이트의 디자인 과정을 보여주고 있으며, 예시를 통해 인터페이스 디자인 가이드라인과 패턴을 알기 쉽게 설명하고 있다.

실제 사용자가 사이트에서 겪는 일들을 순서에 따라 함께 경험해볼 수 있기 때문에 사용자 인터랙션의 필수 요소를 꼼꼼히 배울 수 있다. 이 책의 전체 내용도 사용자가 사이트를 경험하는 순서를 따라 구성하였다. 사이트에 처음 접속해서 둘러보는 시점부터 회원에서 탈퇴하기까지 중요한 순간을 짚어본다. 목차의 제목만 살펴봐도 대략적인 감을 잡을 수 있으며, 각 장은 실제 사용자의 세부 인터랙션으로 나누어 설명하고 있다
1부. 첫발 내딛기

1장. 사용자를 사로잡는 첫인상
- 레이아웃 보물찾기
작은 변화가 가져온 성과
- 사용자 시선유도
구텐베르그의 법칙
색상과 집중 효과

2장. 개성의 탄생
- 명확한 인상을 주는 일관성 있는 디자인
개성 있는 캐릭터

3장. 내비게이션의 미학
- 소프트웨어 운전법
소프트웨어를 운전하는 사용자
프로는 디테일에 강하다
사용자 중심의 내비게이션

4장. 정보를 지배하는 링크
- 간접적인 정보전달
손때 묻은 디자인

5장. 제대로 배우는 태그
- 혁신의 성공과 실패
아니라고 말해야 할 때
사이트의 성공을 결정하는 현명한 선택

2부. 정보전달 불변의 법칙

6장. 핵심어를 고르는 기술
- 알맹이 없는 환영인사
- 사용자는 읽지 않는다
사용자를 사로잡는 간결함

7장. 레이블 네이밍 비법
- 사용자 중심의 레이블

8장. 백 마디 말보다 강력한 동영상
- 동영상, 백문이 불여일견
문제점을 전달하는 동영상
새로운 아이디어를 전달하는 동영상
- 놀랄 만큼 쉬운 프로토캐스트

3부. 길잡이가 되어주는 검색

9장. 자동완성의 위력과 함정
- 포카요케와 자동완성
자동완성의 함정
적재적소 법칙

10장. 검색결과 바다에서 찾아낸 진주
- 기본에 충실하자
되돌아가는 길

11장. 제대로 알고 하는 고급검색
- 심플한 UI의 강력함
한 번에 하나씩
사용자를 유도하는 고급옵션

4부. 몰입의 즐거움

12장. 파워풀 동영상 인터페이스
- 최고의 동영상 인터페이스를 찾아서
히든카드, 동영상 플레이어
베스트 사례에서 한걸음 더

13장. 정보입력 최적화
- 흐르는 강물처럼 디자인하라
- 버튼 최적화
일차적 기능, 이차적 기능
작지만 강력한 디테일의 힘

14장. 마법사 100% 활용하기
- 길을 알려주는 안내표지판
아코디언 인터페이스 교본

15장. 불량제로 실수방지 장치
- 오류방지 대책본부
실시간으로 업데이트되는 가격 정보

16장. 복잡한 인터랙션 쉽게 풀기
- 같은 내용 다른 구성

17장. 로그인 혁명
- 익숙한 것의 혁신
나를 알아주는 똑똑한 사이트
뒤틀어 보기

18장. 현명한 글쓰기창
- 글자수 체크기능
도와줘요, 포카요케
작은 변화, 큰 차이

5부. 참여로 완성되는 인터넷

19장. 사용자 활동 트래킹
- 차별화된 프로필 전략
생중계! 사용자의 활동 내역
빈 공간 활용

20장. 웹에서 만나는 이미지 편집툴
- 다시 보는 적재적소 법칙
고급기능 숨기기
불필요한 기능은 치워버리자

21장. 소셜 네트워크 인맥 쌓기
- 친구? 이웃? 일촌?
트렌드를 앞서가는 디자인 리서치

22장. 블로그 디자인 정석
- 300명이 함께 만든 블로그
블로그 디자인 미리보기
블로그 파워

23장. 악플의 시대
- 무엇이든 말할 수 있는 토론의 장
사이트와 사용자, 신뢰의 법칙
열정적인 오타쿠
빨간불 신고제도
신뢰 속에서 보물찾기

24장. 피드백 업그레이드
- 클릭수에 대한 집착은 금물
뒤늦은 감사의 말

6부. 정보 디자인

25장. RSS 암호해독
- 한걸음 가까운 디자인

26장. 위험한 태그
- 태그와 폭소노미
넘기 힘든 언어 장벽
태그의 강력함을 모르는 사용자를 위해
태그 자동완성
태그와 검색, 두 마리 토끼 잡기
사용자 중심의 태그

27장. 데이터 정리의 기술
인터랙션의 세 단계
액션의 개시
액션의 실행
액션의 완료
깔끔한 마무리
개인화 기능 마지막 점검

28장. 사이트 리뉴얼
- 리뉴얼 뉴스레터
강력한 한 줄 공지문
- 효율적인 팝업창

7부. 마지막 순간

29장. 로그아웃, 곧 돌아올게
가까운 길도 돌아가라?
- 재 방문 유도하기
로그인 명당
깊은 인상을 남겨라

30장. 휴면고객의 겨울잠 깨우기
- 사용자의 잠을 깨우는 디자인
헤어진 다음날
설문조사
시장은 대화다
휴면고객의 마음을 사로잡는 순간

31장. 마지막 인사
- 말없이 고이 보내드리오리다
유용한 백업기능
탈퇴보다 값진 브랜드 경험

훌륭한 사용자 경험을 향한 길
저작자 표시 변경 금지
Posted by (dicafun@paran.com) 디카펀
추천 BOOK&SITE2009/04/26 10:53
전 세계 전문가들이 극찬하고 국내 웹 전문가들이 기다려온 바로 그 책, 국내최초로 출간되는 웹 표준 활용 지침서!
국내 번역판에만 있는 특별 부록 - 웹 표준 블로그 만들기

웹 표준을 이용해 사이트를 구현하면 어떤 장점이 있을까? 이 책은 웹 표준의 장점을 이해하기 위한 필수 안내서다. 웹 관련 직종에 있다면 웹 표준에 대해서 들어봤을 것. 하지만 웹 표준을 지원하는 웹 브라우저가 점차 늘어가고 있고, 웹 디자이너와 웹 개발자가 웹 표준이 주는 실질적인 이점을 이해하고 이를 준수하려고 하는 움직임이 많아지고는 있지만, 웹 표준으로 사이트를 구축하는 것은 아직까지 쉬운 일은 아니다. 웹 표준의 혜택을 완벽하게 이해하고 웹 표준을 이용해 효율적으로 사이트를 구현해야만 비로소 웹 표준의 진수를 알 수 있다.

웹 표준 가이드는 16장으로 구성되어있다. 각 장에서는 여러 가지 웹 표준 개념의 이론과 실습을 다루며, 쉽게 이해할 수 있도록 문제에 대해 여러 가지 다른 해결방법을 보여준다. 이 책을 통해 다단 레이아웃, 이미지 바꿔치기, 테이블과 리스트 제대로 사용하기 등의 방법을 배울 수 있다. 이런 접근방법을 통해서 웹 표준의 핵심사항을 빠르게 이해하고 소화해 제대로 활용할 수 있을 것이다.

● XHTML 소스를 가볍고 최적화시켜 이해하기 쉽게 작성하는 올바른 방법
● 웹 페이지를 구성하는 엘리먼트를 다양하게 꾸밀 수 있는 CSS 활용법
● 쉽고 효율적인 웹 페이지 레이아웃 구성방법
● 동일한 결과물을 만들어 내는 다양한 구현 방법
● 최신 웹 디자인 테크닉과 그에 따른 유의점 소개

<부록 CD 소개>

1. 예제 소스코드
이 폴더에는 원서 "Web Standard Solution"과 한국어판 "실용예제로 배우는 웹 표준" 두 폴더 안에 책에 나온 모든 예제 소스코드가 담겨있다. 각 폴더에서 index 파일을 실행하면 각 장 모든 파일의 링크를 한 눈에 볼 수 있다.

2. KADO-WAH
웹 접근성 평가 프로그램인 KADO-WAH를 실었다. 웹 페이지의 접근성 여부를 국내외 웹 접근성 지침에 따라 자동으로 점검한 후에 그 문제점을 보고서로 제공하고 수정을 지원해 웹 디자이너와 프로그래머들이 쉽게 접근성이 있는 웹 페이지를 제작할 수 있도록 도와주는 프로그램이다.

3. KADO 교육 자료
웹 접근성을 고려한 콘텐츠 제작기법을 담은 PDF파일.

===============================================================================================================

최신 CSS 기법을 다루는 CSS 마스터가 되기 위한 필독서!
2006 아마존닷컴 컴퓨터인터넷 부문 베스트셀러 2위!

가장 유용한 CSS 기법을 한번에 정리하면서 실제 환경에서 발생할 수 있는 브라우저 관련 이슈를 다뤄 CSS 관련 지식 수준을 한 단계 올릴 수 있다. 이 책을 통해 CSS 전문가다운 코드를 작성할 수 있는 기법을 배워보자.

최신 CSS 기법 및 활용팁 총정리
놓치고 있었던 CSS 기본 개념 다시 다지기
브라우저 호환을 위한 버그 해결법 및 핵과 필터 사용법
유명 CSS 전문가가 직접 만든 실전사례 및 예제


이 책에서는 CSS 기본 개념을 다시 정리하여, 의미 있는 마크업 작성의 중요성, 코드를 잘 구조화해서 유지보수가 용이하게 하는 방법, CSS 레이아웃 모델의 동작원리 등을 다룹니다.
기본 사항을 살펴본 후, 각 장에서는 CSS 기반 디자인에서 사용되는 특징을 다룹니다. 쉽게 따라 할 수 있는 튜토리얼 형식을 통해 독자들이 수행하고 있는 업무에 바로 적용할 수 있는 실전 기법을 익히게 될 것입니다.

여러 브라우저 간에 다르게 동작하는 현상 때문에 CSS 작업을 하는 사람들이 많은 고생을 합니다. 이 책에서는 이런 문제를 해결할 수 있는 CSS 핵, 필터, 버그 해결방법을 설명합니다. 또한 이미지 대치 기법, 링크 스타일 만들기, 폼과 리스트 모양 꾸미기, 순수하게 CSS만으로 만드는 레이아웃을 비롯한 많은 정보를 제공하고 있습니다. 이렇게 다룬 모든 기법을 종합해서 CSS 디자이너로 유명한 사이먼 콜리슨과 캐머론 몰이 직접 작성한 2개의 실전사례 예제를 부록에 포함했습니다.


[도서구성]

먼저 기본적인 (X)HTML과 CSS 개념, 코드 작성방법을 쉽게 설명하는 것에서 시작합니다. 코드 구성 방법과 주석 다는 방법, CSS 포지셔닝 모델, 플로팅과 플로팅 해제 방법 등을 배우게 될 것입니다.

1장과 2장은 CSS 기본에 대한 핵심 정리이며, 이미 알고 있었던 내용을 다시 한번 상기시켜줄 것입니다.

3장에서 7장까지에서는 이미지, 링크, 리스트 처리나 폼, 데이터 테이블 같은 핵심적인 CSS 기법을 다룹니다. 각 장은 간단한 설명으로 시작해서 점점 더 복잡한 예제로 발전시켜 나갑니다. 이 부분에서는 모서리가 둥근 상자 만드는 방법, 투명 그림자 효과 사용방법, 탭형 내비게이션 바 만드는 방법, 플리커 스타일의 이미지 맵 만드는 방법 등을 예제로 설명합니다. 브라우저 버그 때문에 CSS 개발자들이 많은 고생을 하기 때문에 각 예제를 만들 때는 여러 브라우저에서 잘 동작할 수 있도록 하는 기법에도 신경을 썼습니다.

8장과 9장에서는 핵, 필터, 브라우저 버그 해결 방법을 설명합니다. 가장 많이 사용되는 필터의 종류와 적절하게 사용하는 방법, 즉 언제 사용해야 하고 언제 사용하면 안되는지를 설명해뒀습니다. 그리고 마이크로소프트 인터넷 익스플로러에서 CSS 버그가 나타나는 이유에 대해서도 배우게 될 것입니다.

마지막 2개 부록에서는 유명한 CSS 디자이너인 사이먼 콜리슨과 캐머론 몰이 이 책에 나온 기법을 종합해 직접 만든 환상적인 적용 사례를 설명합니다. 따라서 각 기법의 동작 방식뿐만 아니라 실제 웹 프로젝트에서 활용하는 방법에 대해 배우게 될 것입니다.

모든 예제 소스코드는 에이콘출판사 웹사이트 http://www.acornpub.co.kr/book/css에서 다운로드 받을 수 있습니다.


[도서 대상]

이 책은 최신 기법과 다양한 활용사례를 편리하게 참조할 수 있도록 한 권에 정리해놓고 있어서, CSS의 감춰졌던 부분을 기본 개념부터 하나씩 쉽게 이해할 수 있습니다. 지금까지 대부분 책들이 기본적인 기법과 활용을 다루고 있었다면, 이 책은 기본적인 내용은 이미 숙지하고 있고, CSS를 사용해야 하는 이유를 이미 알고 있는 독자를 대상으로 하여 고급 기법에 중점을 두고 설명을 합니다.

기본적인 (X)HTML과 CSS을 알고 있다면 누구에게나 도움이 될 수 있습니다. 하지만 아직 독자가 아직 전문가는 아니라고 가정하고 진행하므로, CSS 디자인에 이제 막 발을 들여놓았든지 CSS 사이트 개발 경력이 몇 년인지에 관계 없이 이 책이 도움이 될 것입니다. CSS 개발 경험이 있다면 대부분 내용을 이해할 수 있을 것입니다. 이 책은 실용적이고 실제 경험에서 비롯된 조언과 예제를 정리하고 있어서 최신 CSS 디자인을 마스터하도록 도울 것입니다.


[추천평]

웹 디자인의 세계는 놀랍습니다. 똑같은 모양을 만들기 위한 방법이 어림잡아 3,647가지나 됩니다. 그나마도 새로운 방법이 계속 나오고 있어서 이 숫자도 정확하지는 않습니다. 특정 문제를 바로잡는 방법은 한 가지가 아니라 여러 웹 디자이너들이 발견한 수많은 방법들을 이용할 수 있습니다. 이런 방법들을 선택할 수 있기에 웹 디자인은 재미있고 흥미로운 동시에, 너무나 많은 정보 때문에 정신이 없기도 하죠. 이 책은 지나치게 많은 정보에 파묻힌 사람들에게 확실한 안내를 해줄 것입니다.

앤디 버드는 지난 몇 년간 웹 표준 디자인을 위한 많은 글과 디자인을 발표했습니다. 명확하고도 쉽게 따라 해 볼 수 있는 핵심적인 CSS 기법의 설명이 녹아있는 이런 책을 접할 수 있다는 건 정말 행운입니다. 우리 같은 웹 전문가에게는 없어서는 안될 모든 해법과 팁을 한눈에 볼 수 있도록 이 책에 정리해놓았습니다.

제가 어떤 목표를 달성하기 위한 한 가지 방법을 소개하기 위한 저술활동을 해온 반면, 앤디 버드는 저와는 완전히 반대의 접근 방법으로 다양한 방식을 설명하고 있습니다. 예를 들어 링크 스타일을 꾸민다든지, 탭 내비게이션을 만든다든지, 다단 레이아웃을 만드는 다양한 방법 말이죠. 이렇게 일반적인 디자인 요소를 다양한 스타일로 만들 수 있는 기법을 갖춤으로써, 정보에 기반해 올바른 결정을 내릴 수 있도록 준비해둘 수 있을 것입니다.

이뿐만 아니라, 디자이너 두 명의 도움을 받아 이 책에서 설명한 기법을 종합해서 사이트를 만드는 방법까지 다루었습니다. 저는 오래 전부터 캐머론과 사이먼 작업의 팬이었습니다. 이 두 사람이 만든 적용사례를 통해 유동적이고 방탄웹적인 유연한 스타일 해법을 볼 수 있다는 건 정말 대단한 혜택이 아닐 수 없습니다.
자, 그럼 여러분 스스로 3,647가지 방법을 직접 실행해 보면서 CSS를 마스터하시기 바랍니다.
- 댄 씨더홈
『실용예제로 배우는 웹 표준』, 『웹 2.0을 이끄는 방탄웹』의 저자


[저자 서문]

CSS 관련 자료가 수없이 많이 나오고 있습니다. 그럼에도 불구하고 CSS 관련 게시판에는 이런 질문이 계속 반복됩니다. “가운데 정렬하는 레이아웃은 어떻게 만드나요?” “모서리가 둥근 상자를 만드는 가장 좋은 방법이 뭔가요?” “3단 레이아웃 만드는 방법을 알려주세요.”CSS 디자인 관련 커뮤니티 활동을 하고 있다면 특정 기사나 기법이 소개된 웹 사이트들을 기억하고 있을 것입니다. 하지만 CSS를 처음 접했거나 모든 웹 사이트를 다 읽을만한 시간이 없다면 이런 정보를 다 따라잡기란 쉽지 않습니다.

CSS 관련 기술을 익힌 사람인 경우에도 위치 지정 모델이나 지정 순위 같은 문제를 확실하게 이해하지 못해서 문제에 봉착할 수 있습니다. 왜냐하면 대부분의 CSS 작업자들이 전체 스펙을 완전히 소화하지 못한 상태에서 독학으로 다른 사람이 쓴 글이나 코드를 보고 하나씩 기술을 익혔기 때문입니다. 또한 CSS 명세서는 너무 복잡해서 웹 개발자가 아니라 웹 브라우저 개발자를 위해 작성된 것 같습니다.

그리고 브라우저마다의 특성을 고려해야 한다는 점이 있습니다. 브라우저 버그와 비일관성은 CSS 작업자에게 가장 큰 골칫거리입니다. 불행하게도 대부분의 이런 버그들은 문서화가 잘 되어있지 않고 해결방법도 몇몇 사람만 알고 있습니다. 특정 방법을 사용하지 않으면 브라우저에 따라 다른 결과가 나올 수 있습니다. 해결했다 하더라도 어떤 브라우저에서 어떤 문제가 발생했는지 일일이 기억할 수도 없습니다. 바로 이런 이유 때문에 이 책을 쓰게 됐습니다. 이 책은 처음부터 시작해서 차례대로 읽어도 되고, 컴퓨터 옆에 놔두고 필요할 때마다 팁이나 기법을 찾아보는 방식으로 활용하셔도 됩니다. 원하는 대로 활용하세요.

한국어판 출간에 붙여
『CSS Mastery』 한국어판을 읽고 계시는 여러분께 먼저 “Gomapsupnida”라는 인사를 전합니다. 2005년도에 이 책을 쓸 당시에는 이 책이 한국까지 날아갈 거라는 생각을 하지 못했는데, 여러분께 선보일 수 있다니 너무나 기쁘군요.

웹 표준은 국제적인 개념임에도 불구하고 지금까지는 대부분 영어권 개발자들의 관심사였습니다. 최근까지 이런 주제를 다루는 정보가 대부분 영어로 된 블로그나 출판물 위주였다는 게 주된 이유라고 생각합니다. 이 책이 번역되어 독자층을 더 넓힐 수 있고, CSS의 장점을 알게 될 개발자들이 더 많아질 거라는 사실에 흥분된 감정을 감추기 힘드네요. 앞으로도 웹 표준과 관련된 좋은 책들이 모두 한국에 소개되기를 바라며, 이 책이 그 과정에 작은 역할을 하게 되길 희망합니다.

부디 이 책을 재미있게 읽으시기 바라며, 여러분들의 많은 의견을 부탁합니다.
- 앤디 버드

=================================================================================================================
 실용예제로 배우는 웹 표준  CSS 마스터 전략
1장 리스트
블로그 꾸미기
퀴즈 시간
방법 A. br / 사용하기

줄 바뀜 문제
방법 B. 불릿 활용하기
방법 C. 좀 더 정확하게
방법 D. 잘 감싸기
요약
부록
불릿 감추기
불릿 이미지를 넣어 더 예쁘게
내비게이션 메뉴바로 활용해보기
다양한 미니탭 모양 바꿔보기

2장 머릿글 (Heading)
문서 제목을 마크업하는 가장 좋은 방법은?
방법A. 의미를 살린 방법?
방법B. p와 b 조합하기
스타일 입히기 어려움
방법C. 스타일과 내용 모두 살리기
스타일 입히기 쉬움
기본 스타일 혐오증
검색엔진이 좋아하는 방식
머릿글 순서에 대해서
요약
부록
스타일링 기초
배경 지정하기
배경과 테두리선
배경 이미지를 바둑판식으로 깔기
아이콘 지정하기
손쉬운 업데이트
카멜레온 효과
img 태그 정렬하기
정리하기

3장 테이블을 쓰면 안된다?
테이블이 적합한 경우
테이블 기초
요약 덧붙이기
테이블 헤드
헤더와 데이터의 관계
abbr 속성 사용하기
thead, tfoot, tbody
테이블 사용은 나쁘다?
부록
격자 만들기
간격 붙이기
좀 더 간결한 방법
여백 지정하기
헤더 모양 수정하기
헤더에 배경 이미지 지정하기
조각 이미지 사용하기
이를 위한 CSS
ID에 아이콘 지정하기
아이콘
이를 위한 CSS
규칙을 합쳐 용량 줄이기
정리하기

4장 인용문 (Quotation)
방법 A. 의미를 살리지 못한 표현
방법 B. 불필요한 클래스 지정
방법 C. 최선의 선택, blockquote
스크류 드라이버로 망치질하는 꼴
요약
부록
더 많은 정보를 제공하는 cite 속성
인라인 인용문 (inline quotation)
따옴표를 붙일 필요없음
인라인 인용문 겹쳐쓰기
blockquote 스타일 입히기
배경이미지로 따옴표 처리
이미지 3개
HTML 코딩하기
3개의 엘리먼트와 3개의 배경 이미지
결과
특정 단어 강조하기
스타일을 적용하지 않은 경우
정리하기

5장 폼 (Form)
폼을 마크업하는 방법에는 어떤 것이 있나요?
방법 A. 테이블 이용하기
방법 B. 테이블 쓰지 않기. 하지만 뭔가 답답한 방법
방법 C. 단순하고 접근성이 높은 방법
label 태그
label을 사용하는 이유
방법 D. 폼 정의하기
스타일 정의하기
요약
부록
탭인덱스
탭인덱스를 쓰는 이유
자주 사용하는 폼을 위한 액세스 키
검색창에 사용하기
폼 꾸미기
텍스트 입력창의 너비 지정하기
label을 사용하여 글꼴 모양 바꾸기
중복요소 생략하기
fieldset로 폼 요소를 묶기
fieldset과 legend 꾸미기
legend 입체 효과 표시
정리하기

6장 strong, em 등 구문표현용 엘리먼트
문서모양 vs. 문서구조
strong과 em이 b와 i보다 나은 이유
W3C의 의견
방법 A
방법 B
올바른 사용예
em의 사용법
방법 A
방법 B
특정 단어나 문구의 강조
굵은 체 혹은 이탤릭체로 지정하는 경우
글꼴 굵기 지정
이탤릭 체 지정
굵은 이탤릭 체로 지정하는 경우
span 태그 사용
클래스를 이용하여 강조
요약
부록
문구 엘리먼트
cite 태그
활용방법
cite 태그 스타일 입히기
구조화의 장점 살리기
abbr과 acronym
정의는 한번만
모양 꾸미기
호환성 여부
code
samp
var
kbd
정리하기

7장 앵커 (Anchor)
웹 페이지 내의 특정 위치를 가리키는 가장 좋은 방법은?
방법 A. name 속성은 있고 내용은 없는 태그 사용하기
방법 B. name 속성과 내용을 모두 사용하기
문서 내의 다른 태그 스타일에 영향
name 속성에 다양한 문자 사용하기
방법 C. name 속성을 사용하지 않기
일석이조
구버전의 웹 브라우저 지원하지 않음
방법 D. 가장 안전한 방법
같은 이름 쓰기
요약
부록
title 속성 이용하기
활용 예제
툴팁 사용하기
스크린 리더 지원
링크 꾸미기
배경 지정하기
링크 밑줄을 점선으로 표시하기
방문한 링크 꾸미기
Hover 효과주기
활성 상태 지정하기
LoVe/HAte 법칙
닻을 들어올리며

8장 리스트 고급기능
번호가 매겨진 리스트를 마크업하는 가장 좋은 방법은?
방법 A. ul 사용하기
숫자 놀이
불릿 기호
방법 B. ol 사용하기
자동 번호 매기기
줄 바뀜 문제 II
리스트 유형
용어와 설명 묶음을 마크업하는 가장 좋은 방법은?
방법 A
방법 B
구조화를 통해 쉽게 스타일 입히기
아이콘 추가하기
그 밖의 응용
요약
부록
각 파트에 id 부여하기
숫자 모양 만들기
CSS에 숫자 추가하기
결과 화면
정리하기

9장 마크업 용량 줄이기
웹 표준으로 구축하면 마크업 용량을 줄일 수 있을까?
하위 선택자 (Descendant selectors)
방법 A. 클래스 정의
CSS 분류
방법 B. 좀더 자연스럽게
문맥을 고려한 CSS 사용
확장해보기
적은 클래스, 쉬운 관리
불필요한 div 제거하기
방법 A. div 사용사례
방법 B. div 제거하기
기타 예제
요약
부록
기본 마크업 구조
스타일 입히기
불릿 모양 바꾸기
테두리 추가하기
결론

10장 CSS 적용하기
CSS를 문서에 어떻게 적용하나요?
방법 A. style 엘리먼트 사용하기
지원하지 않는 브라우저에서의 문제
캐시되지 않음
중복 수정해야 하는 문제
개발단계에서 적합
방법 B. 외부 스타일 시트 사용하기
외부파일을 사용하여 편리한 관리
한번만 다운로드하면 오케이
아직 완벽하게 감추기는 안되요
방법C. @import 사용하기
숨바꼭질
스타일 켜기, 스타일 끄기
방법B와 방법C를 조합한 다중 스타일시트 활용법
카멜레온 효과
과연 어떻게?
일반(lo-fi) 스타일과 고급(hi-fi) 스타일 사용하기
중요한 순서 지정
캐스케이드 효과 활용하기
방법 D. 인라인 스타일
마크업에 묶여버리는 스타일
주의해서 사용하세요
요약
부록
대체 스타일 (Alternate Styles)
3가지의 글꼴 크기
지속적인 캐스케이딩 효과
대체 스타일 시트 활용하기
스타일시트 전환 응용하기
DOM이 주는 혜택
결론

11장 인쇄를 위한 스타일
인쇄를 위한 스타일은 어떻게 지정하나요?
미디어 타입
대상을 지정하는 두 가지 방법
방법A. media 속성
불완전한 지원 상황
방법B. @media 혹은 @import
head에 포함하거나 외부 파일로 저장하기
여러 값 지정하기
화면 스타일과 인쇄 스타일을 분리하기
인쇄용 스타일 시트 만들기
포인트 단위 사용하기
불필요한 항목을 숨겨 잉크 아끼기
링크 표시하기
텍스트 링크하기
인쇄 미리보기로 잉크 아끼기
인쇄용 스타일시트가 적용된 결과 모양
요약

12장 CSS로 레이아웃 잡기
CSS로 2단 레이아웃을 만드는 방법
방법 A. 사이드바를 띄우기
헤더와 푸터 스타일 입히기
사이드바 띄우기 (Floating the sidebar)
진짜 컬럼 (True columns)
방법 B. float을 두 번 사용하기
둘다 클리어하기 (Clear Both)
방법 C. 컨텐트 띄우기 (floating the content)
CSS
배경 문제
수수하고 단순하게
방법 D. 포지셔닝
높이 지정하기
단 넓이 조정하기
사이드바 넣기
푸터 문제
3단 레이아웃 디자인
요약
부록
박스모델 문제
그림으로 이해하기
너비 값으로 인한 문제
박스모델 문제 해결법
코드 예제
오페라 브라우저를 위한 방법
다른 문제들에서 응용하기
가짜 컬럼
세로로 늘이기
꽁수
CSS 작성 방법
컬럼 위치 지정하기
정리하기

13장 텍스트를 위한 스타일
텍스트를 어떻게 쿨하게 꾸밀 수 있나요?
사용자마다 다른 웹 브라우저 기본 글꼴
줄 간격(line height) 조정하기
font-family에 글꼴을 모아놓기
글꼴명에 공백문자가 있을 때
커닝 Kerning (글자 간격 letter-spacing)
드랍캡
텍스트 정렬
텍스트 변형하기
소형 대문자 (small caps)
문단 들여쓰기
요약

14장 이미지 바꿔치기
CSS로 텍스트 대신 이미지를 표시하려면 어떻게 해야 하나요?
완벽한 방법은 아직
사용에 유의
방법 A. FIR (Fahrner Image Replacement)
마크업
태그 추가
CSS
텍스트 숨기기
배경 이미지 지정하기
장점
단점
장단점을 저울질 해보고
방법 B. LIR(Leahy/Langrdige Image Replacement)
마크업과 CSS
박스 모델 문제
단점
방법 C. 파크 방법(Phark Method)
마크업과 CSS
역시 완벽하지는 않은 방법
요약
부록
로고 모양 바꾸기
저해상도/고해상도
예제
로고 이미지 세트
CSS
하이퍼 링크 스타일 지정
결과
접근성이 뛰어난 이미지 탭 롤오버
문제
해결책
마크업. 하나의 리스트로 해결
3개의 상태를 가진 이미지
이것을 가능케 해주는 CSS
결과
이 방법을 왜 사용하나?
문제점. 고정된 텍스트 크기
호환성
정리하기

15장 2단 또는 3단으로 자유롭게 변경하기
마크업과 스타일 구조
기사 페이지
초기 인덱스 페이지
body에 클래스 지정
그 밖의 다양한 활용 방안
사용자가 머물고 있는 위치 알리기
내비게이션바 구현을 위한 리스트
각 파트 지정
CSS의 마법
요약

16장 다음 단계로 나가기
이제 어디로 가야 할까요?
관련 기관 및 발행지
영향력있는 블로그
관련 도서
 
 1장 기초 다지기
구조가 탄탄한 코드 만들기
의미를 살린 마크업
ID와 클래스 이름 짓기
div와 span
문서 유형, DOCTYPE 전환, 브라우저 모드
유효성 검사
브라우저 모드
DOCTYPE 전환
스타일을 꾸밀 대상 선택하기
선택자 활용 기초
유사 클래스 선택자
전체 선택자
고급 선택자
자식 선택자, 인접 형제 선택자
속성 선택자
캐스캐이드 효과와 적용순서
지정순위
스타일시트에서 지정순위 활용하기
body 태그에 클래스나 ID 지정하기
상속
스타일 시트를 계획/구성/관리하는 방법
문서에 스타일 적용하기
코드 주석 활용법
구조 표시를 위한 주석
작업 기록을 위한 주석
주석을 제거하고 스타일시트 최적화하기
스타일 가이드
손쉬운 스타일시트 유지관리법
요약

2장 화면 표시를 위한 모델 완벽 정리
박스 모델 완벽 정리
윈도우용 인터넷 익스플로러의 박스 모델
마진 겹침 현상
포지셔닝 완벽 정리
화면 표시 모델
상대 위치
절대 위치
고정 위치
플로팅
라인박스와 플로트 해제 방법
요약

3장 배경 이미지와 이미지 대치 기법
배경 이미지 기초 다지기
둥근 모서리 상자 모양 만들기
고정폭 둥근 모서리 상자 모양
유동폭 둥근 모서리 상자
마운틴탑 코너
그림자 효과
간단한 그림자 효과 내기
Clagnut 스타일 그림자 효과
부드러운 그림자 효과 만들기
여러 겹으로 만드는 그림자 효과
이미지 대치 기법
FIR 방법
파크 방법
길더/레빈 방법
IFR와 sIFR 방법
요약

4장 링크 모양 꾸미기
링크 스타일 기초
밑줄치며 놀기
예쁜 링크 밑줄 만들기
링크 유형별로 스타일 지정하기
문서나 뉴스 피드 다운로드용 링크 꾸미기
버튼과 롤오버 효과 만들기
롤오버 기초
이미지를 사용한 롤오버 효과
픽시 방법을 이용한 롤오버 효과
방문한 링크 스타일 꾸미기
CSS로만 만드는 툴팁
요약

5장 리스트 스타일과 내비게이션 바 만들기
리스트 스타일 기초
세로형 내비게이션 바 만들기
내비게이션 바에서 현재 페이지 표시하기
가로형 내비게이션 바 만들기
슬라이딩 도어 효과의 탭 내비게이션 바 만들기
CSS 이미지 맵 만들기
플리커 스타일의 이미지 맵 만들기
리모트 롤오버 만들기
정의 리스트
요약

6장 접근성 높은 폼과 테이블 만들기
데이터 테이블 스타일 꾸미기
테이블 관련 엘리먼트 소개
써머리와 캡션
thead, tbody, tfoot
col, colgroup
데이터 테이블 마크업 만들기
테이블 스타일 꾸미기
화면 모양 만들기
추가 사항 처리
간단한 폼 레이아웃 만들기
유용한 폼 엘리먼트
폼 레이블
기본 레이아웃
기타 엘리먼트 처리방법
장식 마무리하기
필수 입력항목
복잡한 폼 레이아웃 만들기
접근성을 고려한 데이터 입력 방식
다단 레이아웃의 체크박스
폼 에러 메시지 만들기
요약

7장 레이아웃
디자인을 가로 중간에 배치하기
auto 마진 이용 방법
포지셔닝 음수 마진값 이용 방법
플로트 기반의 레이아웃
플로트를 이용한 2단 레이아웃
플로트를 이용한 3단 레이아웃
고정 레이아웃, 유동 레이아웃
화면비례형 레이아웃
글자비례형 레이아웃
글자비례-화면비례 혼합형 레이아웃
글자와 화면크기에 따라 늘어나는 이미지
가짜 단 모양 만들기
요약

8장 핵과 필터
핵과 필터
핵과 필터 사용에 대한 경고
핵 사용시 유의점
개별적인 스타일시트에 필터 적용하기
인터넷 익스플로러 조건 주석문
밴드 패스 필터
개별적인 규칙과 선언에 필터 적용하기
자식 선택자 필터
속성 선택자 필터
별표 HTML 필터
맥용 IE의 주석처리된 백슬래시 핵
속성에 이스케이프 문자를 사용하는 핵
탄텍 박스 모델 핵
쉽게 개선된 박스 모델 핵
!important와 언더바 핵
오웬 핵
요약

9장 브라우저 버그 해결하기
버그 잡기
흔히 발생하는 CSS 문제
지정순위와 정렬방법 오류
마진 겹침 현상
버그 잡기 기초
문제 분리하기
테스트 범위 최소화하기
증상이 아닌 문제원인 바로 잡기
도움 요청하기
레이아웃
레이아웃이란?
레이아웃 때문에 생기는 효과
흔히 발생하는 버그 해결방법
더블마진 플로트 버그
텍스트 주변에 3픽셀 공간 표시 버그
IE 6의 문자 중복 표시 버그
IE 6의 피커부 버그
상대좌표 컨테이너에서 절대좌표 지정
인터넷 익스플로러 관련 이야기
요약

부록Ⅰ 동호회 사이트 만들기
적용 사례 소개
하위 선택자를 이용한 컨텐트 영역 조정
XHTML 구조
명명 규칙에 대해
3단 레이아웃
2단 레이아웃
1단 레이아웃
불필요한 단 제거
컬럼 띄우기
계산방법
올바른 위치에 컬럼 띄우기
body 클래스를 이용해서 현재 페이지 표시하기
드롭인 박스
둥근 모서리 상자 만들기
평면 흰색 상자
특별한 모양 만들기
투명 모서리와 테두리선
이미지
CSS
원하는 동작을 위한 클래스 조합
이미지 클래스
기본 이미지
테두리선 없는 이미지
큰 이미지
링크 모양 꾸미기
사이드바 링크
방문한 링크 표시하기
LVHA가 아니라 LAHV 사용하기
외부 링크 다르게 표시하기
그림자 효과 만들기
그림자 이미지 만들기
이미지에 플로팅 지정하기
요약

부록 II 투스카니 럭셔리 리조트
적용 사례 소개
유동적인 레이아웃
본문과 컨테이너
masthead
컨텐트와 사이드바
유동적인 속성
푸터
유동 레이아웃 관련 문제 해결하기
절대위치를 이용한 엘리먼트 배치
위치 관련 속성
쌓는 순서
배경 이미지 관련 기법
상단을 3개로 나누기
방탄웹 기법 적용하기
이미지 대치 기법
로고 이미지 대치
첫 대문자 이미지 대치
유동적인 이미지
유동적인 이미지를 위한 코딩
리스트 항목 하나에 여러 엘리먼트 넣기
메뉴 코드 작성




먼저 기본적인 (X)HTML과 CSS 개념, 코드 작성방법을 쉽게 설명하는 것에서 시작합니다. 코드 구성 방법과 주석 다는 방법, CSS 포지셔닝 모델, 플로팅과 플로팅 해제 방법 등을 배우게 될 것입니다.

1장과 2장은 CSS 기본에 대한 핵심 정리이며, 이미 알고 있었던 내용을 다시 한번 상기시켜줄 것입니다.
3장에서 7장까지에서는 이미지, 링크, 리스트 처리나 폼, 데이터 테이블 같은 핵심적인 CSS 기법을 다룹니다. 각 장은 간단한 설명으로 시작해서 점점 더 복잡한 예제로 발전시켜 나갑니다. 이 부분에서는 모서리가 둥근 상자 만드는 방법, 투명 그림자 효과 사용방법, 탭형 내비게이션 바 만드는 방법, 플리커 스타일의 이미지 맵 만드는 방법 등을 예제로 설명합니다. 브라우저 버그 때문에 CSS 개발자들이 많은 고생을 하기 때문에 각 예제를 만들 때는 여러 브라우저에서 잘 동작할 수 있도록 하는 기법에도 신경을 썼습니다.

8장과 9장에서는 핵, 필터, 브라우저 버그 해결 방법을 설명합니다. 가장 많이 사용되는 필터의 종류와 적절하게 사용하는 방법, 즉 언제 사용해야 하고 언제 사용하면 안되는지를 설명해뒀습니다. 그리고 마이크로소프트 인터넷 익스플로러에서 CSS 버그가 나타나는 이유에 대해서도 배우게 될 것입니다.
마지막 2개 부록에서는 유명한 CSS 디자이너인 사이먼 콜리슨과 캐머론 몰이 이 책에 나온 기법을 종합해 직접 만든 환상적인 적용 사례를 설명합니다. 따라서 각 기법의 동작 방식뿐만 아니라 실제 웹 프로젝트에서 활용하는 방법에 대해 배우게 될 것입니다.
모든 예제 소스코드는 에이콘출판사 웹사이트 http://www.acornpub.co.kr/book/css에서 다운로드 받을 수 있습니다


















































































































저작자 표시 변경 금지
Posted by (dicafun@paran.com) 디카펀
추천 BOOK&SITE2009/04/26 01:32

아마존 독자가 열광하는 댄 씨더홈의 웹 표준 가이드 제2탄!

아무리 멋진 모양과 좋은 내용으로 가득 찬 웹사이트를 만들었더라도 다양한 상황과 폭넓은 사용자층을 고려하지 않았다면 절반의 성공에 불과합니다. 댄 씨더홈의 『(개정판) 웹 2.0을 이끄는 방탄웹』은 유연성과 가독성, 사용자 편의성 등 성공적인 웹사이트가 갖춰야 할 핵심사항을 구비하기 위한 웹 표준 전략에 대한 책입니다. 각 장마다 기존의 흔해 빠진 방식으로 제작한 웹사이트를 사례로 들어 문제점을 분석하고 어떤 한계점을 가지고 있는지 설명합니다. 그리고 이 사이트를 XHTML과 CSS로 재구축하여 엄청난 양의 코드를 깔끔한 마크업으로 정리하고 CSS를 통해 빠르게 로딩되면서 접근성이 높은 방탄웹으로 변신시키는 기법을 소개합니다. 특히 마지막 장에서는 이 책에서 다룬 기법을 종합해 완전무결한 방탄웹을 만들어 봅니다. 특히 개정판에서는 마이크로소프트 인터넷 익스플로러 7에 대응하도록 내용을 보강하고, em을 이용한 유동적인 레이아웃 등의 예제들을 추가했습니다.


먼저 고백해야겠습니다. 완전무결한 방탄웹이란 세상에 존재하지 않습니다. 이 말을 듣고 바로 책을 던져버리기 전에 잠시만 제 설명을 더 들어주시기 바랍니다. 경찰관이 방탄조끼를 입고 몸을 보호하는 것처럼, 웹디자인을 보호할 수 있는 조치를 취할 수 있을 것입니다. 이 책은 웹사이트에 방탄장치를 붙여 다양한 상황에 유연하게 대처할 수 있는 전략을 제시합니다.

방탄웹이란

완벽하게 방탄이 되는 방탄조끼를 만들기 위해서 지속적으로 노력하지만, 방탄조끼가 100퍼센트 완벽하게 신변보호를 보장해 주지는 않습니다. 그렇다고해서 방탄조끼를 입는 것과 입지않는 것을 비교할 수는 없을 겁니다. 웹사이트 구축 관련 기법에서도 이 규칙은 그대로 적용됩니다. 최대한 다양한 조건에서도 잘 보이는 유연한 웹페이지를 만들기 위해 필요한 단계를 제대로 밟아나갈 때 정말 다른 결과물을 만들 수 있습니다. 즉 지속적인 과정이라는 것입니다. 이를 통해 의미를 살린 XHTML과 CSS 같은 웹 표준을 활용한 멋진 디자인을 좀 더 쉽게 할 수 있습니다.

최근 몇 년간 CSS로 레이아웃을 만든 사이트가 많아지면서 CSS를 제대로 활용하는 방법에 대한 관심도 높아지고 있습니다. 이렇게 CSS 기반의 디자인을 하는 목적은 적은 코드량, 높은 접근성과 유지보수성 등 디자인 관점에서 취할 수 있는 기술적인 장점을 얻고자 하는 데 있습니다. 하지만 단지 CSS와 XHTML을 사용한다고 해서 저절로 모든 것이 좋아지지는 않습니다. 핵심 내용과 디자인을 분리하여 높은 유연성을 추구할 때, 웹을 이용하는 모든 사람들에게 좀 더 나은 디자인을 제공할 수 있습니다. 자, 그럼 여기서 말하는 유연성이란 무엇을 의미할까요?

왜 중요한가

이 책을 처음 구상할 즈음 훌륭한 웹디자인은 두 가지 요소를 갖춰야 한다는 생각이 들었습니다. 한 가지 요소는 완성된 페이지를 통해서 방문자들이 보게 될 비주얼한 구성요소입니다. 이는 디자이너가 조화롭게 만든 그래픽 이미지, 색상, 타이포그래피로 구성됩니다. CSS 젠 가든(http://www.csszengarden.com)에 방문해보시면 XHTML과 CSS를 이용해서 얼마나 멋진 비주얼 디자인을 갖출 수 있는지 쉽게 알 수 있을 것입니다.

훌륭한 웹디자인을 구성하는 두 번째 요소는 방탄웹 특성을 갖도록 구축하는 것입니다. 바로 이 점이 이 책에서 중점적으로 다루고자 하는 요소이기도 합니다. XHTML과 CSS를 쓰면 이런 장점을 쉽게 얻을 수 있습니다. 또한 유연하면서도 쉽게 주변환경에 적응 가능하고 접근성이 높으면서도 멋진 모양을 갖춘 웹디자인을 하기 위해 웹 표준의 장점을 이용할 수 있습니다. XHTML과 CSS 같은 웹 표준 도입이 빠르게 확산되면서 표준의 올바른 활용법과, 가장 적합한 구현 방법에 대해서 설명하는 자료의 필요성도 점점 더 높아지고 있습니다.

이 책의 구성

이 책은 각 장마다 방탄웹을 만드는 방법에 대해 소개합니다. 현재 존재하고 있는 웹사이트의 디자인을 살펴보고, 기존 방식의 문제점을 먼저 살펴봅니다. 그러고 나서 XHTML과 CSS를 활용해 유연성이 높으면서도 적은 양의 코드를 작성합니다.

대부분 예제는 페이지에 들어가는 디자인 구성요소를 다룹니다. 각 구성요소들이 어떻게 방탄웹을 구성해가는지 쉽게 볼 수 있을 것입니다. 마지막 장에서는 앞서 살펴본 개별 예제들을 이용해서 완벽한 페이지를 하나 구성해볼 것입니다. 각 예제의 기법들을 다시 한번 복습하면서 각각을 한데 모은 페이지를 만들어 보겠습니다.

각 예제들은 단계별로 구성되어 있어서 XHTML과 CSS 초보자라도 쉽게 따라할 수 있습니다. 이런 과정을 통해서 웹 표준이 가져다주는 이점과 각 지침들을 준수할 때 좀 더 견고한 방탄웹이 되는 이유를 설명하겠습니다.

★ 이 책에서 다루는 내용 ★

■ 키워드, 퍼센트값, em을 이용해 사용자가 직접 글씨 크기를 조절할 수 있는 방법
■ 글씨 크기와 텍스트 분량에 따라 크기가 늘어나는 내비게이션 메뉴바 만드는 방법
■ 가로형 디자인 요소를 세로 방향으로 확장하는 방법
■ 표 모양 디자인에 쓰이는 플로트 활용 방법
■ 예기치 못한 상황에 대비할 수 있는 박스 모양 디자인 방법
■ 이미지나 CSS 없이도 무리 없이 내용을 읽을 수 있는 페이지 만드는 방법
■ 데이터 테이블에서 모양 꾸미기용 코드를 제거하고 CSS로 다시 만드는 방법
■ 창 크기나 글씨 크기에 관계없이 자유자재로 늘어나는 페이지 레이아웃 만드는 방법

에이콘출판사 도서정보 페이지(http://www.acornpub.co.kr/book/bulletproof-web2)에서 개정판의 예제 코드를 다운로드 받을 수 있습니다. 원서 파일의 영문 예제와 번역서의 한글 예제 파일을 다운 받아서 zip 파일을 열면 각 장별로 폴더가 정리되어 있습니다. 각 폴더 안에는 완성된 예제와 관련된 html 파일과 이미지 폴더들이 들어 있습니다. 모든 CSS는 간결하게 내용을 볼 수 있게 하기 위해 모든 문서의 [head] 태그 안에 넣어 두었습니다

1장 글씨 크기를 내 마음대로
흔해 빠진 구축방식
방탄웹이 아닌 이유
최적의 방법 선택하기
- 길이 단위
- 상대크기 키워드
- 퍼센트값
- 절대크기 키워드
방탄웹으로 만들려면?
- 키워드 설명
- 픽셀 고정은 이제 그만
- 두 가지 장애물
- 단순화된 박스모델 핵
방탄웹이 좋은 이유
다음 단계
- 기본 글씨 크기 지정
- 퍼센트값을 이용해서 기본 크기와 다른 크기 지정하기
키워드값과 퍼센트값 사용
- 글씨 크기값을 정확하게 잡아가기
- 퍼센트값을 겹쳐 쓸 때 유의할 점
- 퍼센트값을 이용해 일관성 유지하기
em 단위를 이용한 글씨 크기 조정방법
요약

2장 자유롭게 크기가 조절되는 내비게이션 메뉴바
흔해 빠진 구축 방식
- 탭 구현방식
- 롤오버 효과
방탄웹이 아닌 이유
- 용량 크기 문제
- 접근성 문제
- 크기 조절 문제
- 유지보수 문제
방탄웹으로 만들려면?
- 스타일 미적용 시 모습
- 작은 이미지 두 개면 오케이
- 스타일 적용
- 플로트를 추가로 지정해 문제 해결하기
- 탭 모양 꾸미기
- 배경 이미지 지정
- 바닥 테두리선 추가
- 마우스오버 효과 주기
- 선택된 상태 표현하기
방탄웹이 좋은 이유
em을 적용해서 개선하기
그 밖의 사례 소개
- 모질라
- 슬랜츠
- ESPN 검색
요약

3장 자유자재로 높낮이가 조절되는 행 만들기
흔해 빠진 구축 방식
방탄웹이 아닌 이유
- 불필요한 이미지 사용
- 고정된 높이값
- 복잡한 코드
방탄웹으로 만들려면?
- 마크업 구조
- 각 요소에 id 부여하기
- 스타일 미적용 시 모습
- 배경색 지정
- 위치 지정
- 사라진 배경색
- 디테일한 디자인 요소 추가
- 사방을 둥근 모서리로 만들기
- 텍스트와 링크 모양
- 마지막 단계
- 인터넷 익스플로러 7에 맞추기
방탄웹이 좋은 이유
- 구조와 디자인의 분리
- 고정되지 않은 높이
세로 확장 사례 하나 더
- 마크업
- 이미지 두 개 준비하기
- CSS 적용
- 자동 확장기능
요약

4장 나만의 플로트 활용 비법
흔해 빠진 구축 방식
방탄웹이 아닌 이유
방탄웹으로 만들려면?
- 최적의 구조를 결정해 보자
- 정의 리스트 사용
- 마크업 구조
- 스타일 미적용 시 모습
- 외곽 영역 꾸미기
- 사진 이미지를 마크업하자
- 기본 스타일 적용하기
- 이미지 자리 잡기
- 양쪽 끝에 띄우기
- 설명문의 길이가 짧아도 모양 유지하기
- 플로트 자체 해제 방식
- 멋지게 꾸미는 마무리
- 이미지 정렬 방식
- 표 모양 만들기
- 배경 이미지 만들기
- 그 밖의 플로트 해제 방법
- 생성된 컨텐트를 이용한 쉬운 해제 방법
방탄웹이 좋은 이유
요약

5장 깨지지 않는 상자 만들기
흔해 빠진 구축 방식
방탄웹이 아닌 이유
방탄웹으로 만들려면?
- 마크업 구조
- 이미지 준비 전략
- 스타일 입히기
방탄웹이 좋은 이유
그 밖의 둥근 모서리 기법 소개
- 브라우즈 해피 사례
박스 힌팅
- 둥근 모서리가 한 개 있는
- 모서리 힌팅
- 늘어나는 화살표
- 제약이 많은 환경에서 새로운 아이디어가 나온다
요약

6장 이미지나 CSS 없이도 볼 수 있게 하기
흔해 빠진 구축 방식
방탄웹이 아닌 이유
방탄웹으로 만들려면?
방탄웹이 좋은 이유
스타일 유무 여부에 관계없는 디자인
- 10초 만에 하는 사용성 검사
- 흔해 빠진 구축 방식
- 방탄웹으로 만들려면?
디그더그 테스트
방탄웹을 만들기 위한 도구 소개
- 패블릿
- 웹 개발 확장기능 툴바
- 웹 접근성 툴바
- 파이어버그
- 유효성 검사도 하나의 도구
요약

7장 쉽게 변환할 수 있는 테이블 만들기
흔해 빠진 구축 방식
방탄웹이 아닌 이유
방탄웹으로 만들려면?
- 마크업 구조
- 스타일 적용하기
방탄웹이 좋은 이유
요약

8장 유동적인 글자비례형 레이아웃 만들기
흔해 빠진 구축 방식
방탄웹이 아닌 이유
- 남용되는 코드
- 끔찍한 유지보수
- 컨텐트 표시 순서 문제
방탄웹으로 만들려면?
- 마크업 구조
- 다단 레이아웃 만들기
- 스타일 적용하기
- 단 간격 지정
- 단 여백 지정
- 최소/최대 너비값 지정
- 이동하는 가짜 단 만들기
- 3단 레이아웃 만들기
방탄웹이 좋은 이유
em 단위 기반의 레이아웃
- 글자비례형 레이아웃 사례
- 마크업 구조
- CSS
- 일관성을 유지하는 것이 이상적
- 유의할 점 - 스크롤바
요약

9장 방탄웹 구축 종합완결편
목표 설정
방탄웹이 좋은 이유
- 유동적인 레이아웃
- 글씨 크기를 마음대로
- 이미지나 CSS 없이도 볼 수 있는 페이지
- 다국어 버전 웹사이트 제작
기초 공사
- 마크업 구조화
- 기본 스타일 지정
- 레이아웃 구조 지정
- 사이드바 메뉴 배경 만들기
- 헤더 영역
- 이벤트 공지사항 영역 꾸미기
- 단 간격 조정
- 컨텐트 영역 꾸미기
- 사이드바 메뉴 영역 꾸미기
- 푸터 영역 꾸미기
인터넷 익스플로러를 위한 CSS 문제 해결
- 핵 관리 방법
- 푸터 문제 해결 방법
- 자체 플로트 해제 문제 해결 방법

댄 씨더홈은 메사추세츠주에 거주하는 웹디자이너이자 작가이며, 작은 디자인 스튜디오인 심플비츠(SimpleBits)의 창업자이기도 합니다. 웹 표준 기반의 웹 디자인 분야에서 널리 알려진 전문가인 저자는 구글, MTV, ESPN, 패스트 컴퍼니(Fast Company), 블로거(Blogger), 오데오(Odeo) 같은 작업을 했습니다. 웹 표준을 기반으로 유연하고 다양한 상황에 적응할 수 있는 디자인을 하는 방법을 자신의 디자인 작업에 적용하고, 이런 기법들에 대해 글을 쓰고 강의를 합니다. 『실용예제로 배우는 웹 표준』과 이 책의 1판, 이렇게 두 권의 베스트셀러 저자입니다. 그가 쓰는 매우 유명한 블로그인 심플비츠(SimpleBits.com)에서는 웹 관련 기술과 일상에 대한 글을 볼 수 있습니다. 또한 우클렐레를 연주하고 야구모자를 즐겨 쓰고 다닙니다.

 


저작자 표시 변경 금지
Posted by (dicafun@paran.com) 디카펀
추천 BOOK&SITE2009/04/26 01:27
XHTML과 CSS를 이용한 올바른 웹 페이지를 만드는 방법을 설명한 웹 표준의 역사와 배경, 웹 기술의 표준화단체, 디자인방법과 웹 사이트를 장식하는 콘텐츠와 전환방법 등을 담아 웹 표준의 원리와 원칙을 정리하였다.

웹표준이 대세

웹표준이 일반 대중에게 알려진 것은 2005년 6월 코리아 인터넷 닷컴에서 진행한 CSS 세미나부터일 것이다. 그뒤 2년 동안 변화가 많았다. 한국 웹 표준화프로젝트 (http:// webstandards.or.kr/), CSS 디자인 코리아 (http://standardmag.org), 한국 웹 접근성
(그룹(http://kwag.net) 등 관련 커뮤니티들이 생겼고,‘ 웹표준의 날’같은 행사도 진행되고
다양한 웹표준 관련 세미나가 열렸다. 또한 팀인터페이스의 UI아카데미에서 웹표준과 웹접근성 교육을 정기적으로 진행하고 있다

웹표준은 웹의 근간
웹표준이 처음 알려질 때만 해도, 많이 사용되는 것이 표준이고 W3C의 표준을 따라갈 필요는 없다거나, 수지타산 이 맞지 않는 투자는 필요 없다거나, 과연 웹표준이 도움이
필요한지 의문이 많았다. 하지만 웹표준에 관한 관심 은 엄청나게 늘어 웹표준을 부정
적으로 또는 옵션으로 바라보는 사람은 거의 찾아볼 수 없게 되었다. 이제는 대규모
포털 업체나 대기업들이 앞장서서 웹표준을 연구하고 적용하고 있다. 웹사이트를 가장 많이 만들지만 별다른 관심이 나 개선점이 보이지 않던 웹에이전시 업계에서도 웹표준을 새롭게
인식하려는 움직임을 보인다. 이제 웹표준은 웹을 올바르게 만드는 데 가장 기본인 근간
기술임에 모든 사람이 동의한다.

실제로 도움이 되도록
이제 인식을 퍼뜨리는 단계는 지났고 다음 단계를 준비할 때이다. 이 순간에도 초기 웹표준 멤버들은 같은 고민을 한다. 현재 가장 필요한 다음 단계는 웹표준이 우리에게 보여준
많은 장점을 믿고 적용하려는 웹사이트 제작자들이 느낄 수 있게 하는 일이다. 그러려면
웹표준 입문서나 기초 교육이 아닌 실제로 도움이 되는 게 필요하다. 한국 소프트웨어
진흥원 도움으로 실전 웹표준 가이드도 나왔고, 더블트랙의 박수만이 번역한 웹표준 관련 서적이 세 권 있고, 웹표준을 적극적으로 도입하여 가능성을 보인 미투데이(http://me2day.
Net) 같은 서비스도 있다. 하지만 웹표준을 처음 접하는 사람이 참고할 책이나 사이트가 부족한 게 현실이다

전문가조차 들춰보게 할 만큼 상세하게 다룸
이렇게 부족함을 공감하던 사람들에게『웹표준 교과서』는 가뭄에 내리는 단비처럼 갈증을 해소할 수 있을 것이다. 기존 번역서들은 친절하고 상세하지만 웹표준의 전체적 규모를
알게 하는 데에는 부족했다.『 웹표준 교과서』는 웹표준에 관해 많이 안다고 자부하던
전문가조차 자료를 다시 들춰보게 할 만큼 상세하다. 다루는 내용도 역사적 관점, 마크업
스타일, 웹 기능, 크로스 브라우징, 웹 접근성, 검색엔진 최적화 등 굉장히 넓다. 기초적 내용부터 전문적 내용까지 모든 내용을 다룬다. 교과서로 삼을만하고 웹을 만들 때 옆에
보는 조언자 구실을 훌륭하게 할 책이다.

제1장 소개-웹표준은 무엇인가
1. 누가 웹표준을 정하는가
2. 인프라와 트렌드에서 생각하는 웹표준
3. 웹표준의 장점
4. 구조언어와 표현언어
5. 그 밖의 언어와 가이드라인

제2장 문서구조-XHTML 웹페이지 구축 시작
1. 웹 구조 이해
2. XHTML의 전체 모양과 서식
3. XML선언, 문서형 선언, 네임 스페이스와 언어코드
4. 타이틀, 문자코드세트, 설명문과 키워드
5. 검색로봇 제어, 그 밖의 메타데이터, 내비게이션 링크
6. 제목, 문단, 작성자 정보, 구분선
7. 인용문, 정형화된 텍스트
8. 항목 목록과 번호 목록, 정의형 목록, 표
9. 링크, 이미지
10. 텍스트를 정의하기 위한 인라인 요소
11. 그룹화 요소, 주석 삽입, 문자참조

제3장 시각표현-CSS 웹페이지를 자유롭게 디자인하기
1. CSS의 역할
2. CSS의 서식
3. CSS 적용방법과 우선순위
4. 선택자와 가상 클래스·가상 요소
5. 박스모델
6. 시각정형모델
7. 시각효과
8. 문자색과 배경
9. 글꼴
10. 텍스트
11. 표
12. 생성내용
13. 목록
14. 사용자 인터페이스
15. @규칙과 미디어 컨트롤

제4장 상호작용-웹 사이트를 장식하는 다양한 콘텐츠
1. 폼 설치
2. 스크립트 삽입
3. 이미지맵 삽입
4. 인라인 프레임 삽입
5. Java애플릿 삽입
6. 오브젝트 삽입
7. 프레임 설정

제5장 리디자인-웹표준으로 매끄러운 전환
1. HTML4.01, XHTML1.0, XHTML1.1의 차이
2. HTML에서 XHTML으로 전환하는 방법
3. XHTML1.1 폐지 요소 대체
4. XHTML1.1 폐지 속성 대체
5. XHTML1.1 추가 요소 해설

제6장 크로스 브라우저 레이아웃-브라우저를 차별하지 않는 레이아웃 기법
1. 브라우저의 구현과 호환성
2. 문서형식 전환과 표현방식
3. CSS핵
4. 외부 스타일시트 만들기
5. 레이아웃 기법(1)-문서본체
6. 레이아웃 기법(2)-내비게이션
7. 레이아웃 기법(3)-링크
8. 레이아웃 기법(4)-텍스트
9. 레이아웃 기법(5)-제목글
10. 레이아웃 기법(6)-인용문
11. 레이아웃 기법(7)-목록
12. 레이아웃 기법(8)-테이블
13. 레이아웃 기법(9)-폼
14. 레이아웃 기법(10)-이미지 대체 기법
15. 레이아웃 기법(11)-다단 레이아웃
16. 레이아웃 기법(12)-인쇄용 스타일

제7장 접근성-다양한 사용자를 배려하는 설계
1. 접근성이란
2. W3C의 대처: WAI
3. 웹 콘텐츠 접근성 지침 1.0(WCAG1.0)
4. 미국 재활법 508조(Section 508)

제8장 메타데이터-효율적인 정보 수집을 지원하는 웹 기술
1. 메타데이터와 시맨틱 웹
2. RSS로 하는 효율 정보 전달
3. FOAF로 하는 인물 프로파일 제공
저작자 표시 변경 금지
Posted by (dicafun@paran.com) 디카펀
추천 BOOK&SITE2009/04/26 01:22
PART I 웹 내비게이션의 기초
Chapter 01 웹 내비게이션 소개 내비게이션 고려하기 내비게이션의 필요성 웹 내비게이션 디자인 요약 질문 더 읽을 거리 Chapter 02 내비게이션 이해하기 정보 검색 온라인 정보 검색 웹 브라우징 행태 정보 형태 정보 경험하기 요약 질문 더 읽을 거리
Chapter 03 내비게이션의 메커니즘 단계 내비게이션 페이징 내비게이션 브래드크럽스 트리 내비게이션 사이트 맵 디렉터리 태그 클라우드 A-Z 인덱스 내비게이션 바와 탭 수직 메뉴 다이내믹 메뉴 드롭다운 메뉴 내비게이션을 시각화하기 브라우저 메커니즘 요약 질문 더 읽을 거리
Chapter 04 내비게이션의 종류 내비게이션의 카테고리 페이지 종류 요약 질문 더 읽을 거리
Chapter 05 내비게이션 라벨링 어휘 문제 좋은 라벨의 조건 시스템 라벨링 설득력 있는 라벨 라벨 번역 라벨의 소스 요약 질문 더 읽을 거리

PART Ⅱ 내비게이션 디자인의 프레임워크
Chapter 06 평가 성공적인 내비게이션의 특성 평가 방법 요약 질문
더 읽을 거리
Chapter 07 분석 비즈니스 목표 콘텐츠 이해하기 기술 이해하기 유저 인텔리전스 USER INTELLIGENCE 주요한 사용자 리서치 수행하기 리서치 결과 통합하기 시나리오 요약 질문 더 읽을 거리
Chapter 08 아키텍처 설득력 있는 아키텍처 내비게이션 콘셉트 정보 구조 유기적인 구조 설계 사이트 맵 요약 질문 더 읽을 거리
Chapter 09 레이아웃 내비게이션 경로 결정하기 시각적 논리 페이지 템플릿 와이어프레임 요약 질문 더 읽을 거리
Chapter 10 프레젠테이션 정보 디자인 내비게이션을 통해 인터랙션하기 그래픽 디자인 내비게이션 설명하기 요약 질문 더 읽을 거리 PART Ⅲ 특수한 상황에서의 내비게이션
Chapter 11 내비게이션과 검색 검색하기 전의 내비게이션 검색을 하고 난 후의 내비게이션 다면 브라우즈 요약 질문 더 읽을 거리
Chapter 12 내비게이션과 소셜 태깅 시스템 태깅 소셜 분류 내비게이션하기 요약 질문 더 읽을 거리 Chapter 13 내비게이션과 리치 웹 애플리케이션 리치 웹 애플리케이션 리치 웹 애플리케이션 내비게이션하기 리치 웹 애플리케이션 디자인하기 요약 질문 더 읽을 거리 참고 문헌


james.kalbach@gmail.com
저자는 법률과 뉴스 정보를 제공하는 LexisNexis의 휴먼 팩터 엔지니어로 웹 기반의 검색 애플리케이션 인터페이스를 개발하고 있다. 이전에는 독일 Razorfish 에서 인포메이션 아키텍처 팀장으로 일했다. 루트게 대학에서 음악 이론, 작곡, 서지 과학으로 박사 학위를 받았다.
경험 정보에 대한 선두적인 온라인 저널인 Boxes and Arrows(www.boxesandarrows.com)의 부 편집자이다. 또한 인포메이션 아키텍처 협회의 자문 위원으로 있으며, 유럽 인포메이션 아키텍처 컨퍼런스 위원회를 조직하였다(www.euroia.org).
독일 함부르크에서 아내 나탈리와 고양이 닐과 함께 살고 있으며 지역 재즈 악단에서 베이스를 연주하고 있다. 직접 양조한 맥주의 열렬한 애호가로 온라인 맥주 커뮤니티(www.ratebeer.com)에 pivo라는 아이디로 정기적으로 기사를 기고하고 있다.
저작자 표시 변경 금지
Posted by (dicafun@paran.com) 디카펀
추천 BOOK&SITE2009/04/25 21:34
무질서한 웹에 질서를 부여하다 !!!

“이제 웹표준은 기준이 되고 규정이 되고 나아가서는 법률이 되고 있다. 처음에 웹이 만들어진 목적으로 다시 돌아가서 웹은 이제 서로 가지고 있던 장벽을 깨고 좀 더 많은 사람들을 위해서 좀 더 편리하게 만들어지는 도구를 얻게 되었다. 그것이 웹표준이다.”

명실상부한 웹표준의 최고 권위자 제프리 젤드만(Jeffrey Zeldman)이 쓴 최고 베스트셀러. 웹표준으로 만들고 접근성이 높은 웹사이트만이 살아남는 Web2.0 시대를 대비하는 필수도서를 만나보자.

베스트셀러 작가이자 디자이너, 웹표준의 전도사인 제프리 젤드만이 업계를 뒤흔들었던 그의 가이드북을 새로이 펴냈다. 초판이 출시되어 표준 기반의 웹디자인을 세상에 알린 이후, 더욱 발전된 웹 디자인 방법들과 새롭게 변화된 브라우저에 대한 내용을 전부 다루고 있다. 매력적이고 재치 넘치는 방식으로 복잡한 내용을 이해하기 쉽게 다루고 있어, 많은 사람들에게 더 빠르게 다가갈 수 있으면서 만들고 유지하기 쉬운 사이트를 만드는 핵심적인 방법을 알려준다.


1부: 이미 문제는 발생해 버렸다

시작하기 전에

비용, 줄어드는 효과
구식화의 악순환 끝내기
호환성이란 무엇인가?
규정도 없고 정석도 없다
이론이 아닌 실행
꼭 이 책을 읽어야 할까?

1장 웹사이트의 99.9%는 시대에 뒤떨어진다

최신 브라우저들과 웹표준
버전 문제
이전 버전에 대한 고려
나쁜 마크업에 좋은 일이 생길 때
해결책

2장 표준에 맞춰 디자인하고 제작하기

고생담
표준화가 도입되기 이전의 디자인 비용
구시대적인 방법으로 만든 현대적인 웹사이트
비참한 왕국
웹표준의 세 가지 요소
실행
절충법의 이점
웹표준 프로젝트: 이식성
A List Apart: 하나의 페이지, 다양한 디자인
앞으로의 발전방향

3장 표준화가 어려운 이유

보기에는 좋지만 실행하기는 끔찍하다
2000년: 브라우저가 완성된 해
너무 적다? 너무 늦었다?
나쁜 브라우저가 나쁜 습관을 만든다
혼동되는 사이트와 갈피를 잡을 수 없는 명칭들
플래시
호환은 나쁜 것이다

4장 파인더빌러티(findability), 조직, 블로그, 팟캐스트(Podcast), 롱테일, Ajax(그리고 표준화가 대세가 되는 다른 여러 가지 이유들)

범용언어 (XML)
XML 애플리케이션과 웹 사이트
호환성
새로운 협력의 시대
웹표준과 저작 프로그램
CSS 레이아웃의 출현
목적 있는 유행 따라가기
웹표준의 주류

2부 디자인과 제작


5장 최신 마크업

낡은 마크업의 숨겨진 오점
재구성
주요 요약
어느 XHTML이 더 우리에게 맞을까?

6장 XHTML: 웹의 재구성

XHTML로의 전환: 간단한 규칙과 손쉬운 가이드라인
실행 요약: XHTML 규칙
비주얼 요소와 구조

7장 확실한 페이지를 더 빈틈없고 견고하게: 엄격한(Strict) 마크업에서의 구조와 메타 구조

모든 요소를 구조적으로 사용해야 할까?
혼합형 레이아웃과 간결한 마크업: 해야 할 것과 하지 말아야 할 것들
구식 방법들

8장 XHTML 예제: 혼합형 레이아웃(1부)

전환형 방법의 장점
기본 접근법(개요)
초기 마크업: 최종 마크업과 같다

9장 CSS 기본

CSS 간략하게 살펴보기
스타일 분석
외부, 내부, inline 스타일
‘최고 브라우저 테스트’ 방식

10장 CSS 활용: 혼합형 레이아웃(2부)

이미지 준비
기본 요소 설정하기
네비게이션 요소 : 첫 번째 단계
네비게이션바 CSS: 두 번째 단계의 첫 번째 시도
네비게이션바 CSS: 마지막 단계
마지막 단계: 외부 스타일과 ‘현재위치’ 나타내기

11장 브라우저 다루기 1부: DOCTYPE 전환과 표준 모드

DOCTYPE 전환의 전설
브라우저 다양성에 축배를!

12장 브라우저 다루기 2부: Box Model, 버그, 차선책

Box Model과 이에 대한 불만들
윈도용 인터넷 익스플로러의 공백 버그
윈도용 인터넷 익스플로러 ‘Float’ 버그
Flash와 QuickTime: 고객의 요구에 의한 Object?

13장 브라우저 다루기 3부: 타이포그라피

사이즈 문제
사용자 조절
구시대 사람들의 공포
드디어 등장한 표준 사이즈
em 단위의 사용: 웃음과 눈물
픽셀에 대한 열정
폰트 사이즈 키워드 방법
최고의 시기

14장 접근성의 기본

책에서의 접근
일반적인 혼란
규정과 레이아웃
접근성에 관한 소문들의 진상
요소별 접근성 팁
Cynthia Says를 애용하자
접근성 계획: 어떤 장점이 있을까

15장 DOM 기반의 스크립트로 작업하기

DOM 관련 서적
DOM이란 무엇인가?

16장 CSS로 디자인하기

조건의 정의

웹에서 가장 유명한 디자이너이면서 작가이다. 개척정신이 투철한 그의 웹사이트 zeldman.com은 1995년부터 수백만의 웹 디자이너와 개발자 그리고 컨텐츠 전문가들에게 조언을 주고 즐거움을 주었다. 1998년 자신들의 브라우저에 같은 기술을 지원하고 CSS를 안정적으로 지원하도록 마이크로소프트와 넷스케이프를 설득한 웹표준화 프로젝트(The Web Standards Project)를 공동 설립했다. 그는 웹에 대한 사람들의 생각을 깨우쳐주고, 권위 있는 웹 제작자들을 위한 온라인 공간인 A List Apart(alistapart.com)의 발행자이면서 크리에이티브 디렉터이고, 표준기반 디자인 컨퍼런스 An Event Apart(aneventapart.com)를 에릭 마이어(Eric Meyer)와 함께 공동으로 만들었다. 또 Taking Your Talent to the web의 저자이기도 하다.
저작자 표시 변경 금지
Posted by (dicafun@paran.com) 디카펀
추천 BOOK&SITE2009/03/14 20:37

"입사 면접에서는 자신의 고민을 드러내고, 들어간 회사에서는 독립의 그날까지 실력을 쌓아라. 창업 후 거물 클라이언트를 잡고 싶으면 그만큼 내 회사가 성숙할 때까지 기다려야 한다. 브로슈어는 낱장으로 만들어, 고객마다 최적화한 맞춤형 서비스를 해야한다. 해외 진출시 현지 파트너와 협력하되, 현금이 아닌 주식을 교환하고, 인간적 유대를 쌓으라. 직원들에게 믿고 따를 수 있는 확고한 디자인 철학을 제시하라."

1970~1980년대 영국 디자인의 부흥을 이끈 디자인 사업가 마르첼로 미날리가 다분야 디자인회사를 설립하고 운영하며 물려주는 방법에 대한 이야기를 담은 책이다. 영국 디자인 산업의 발전을 이끈 거장인 그는 고객을 유치하고, 자금을 관리하는 일부터 능력있는 직원을 고용하고, 대중 선호도를 높이며 국제 네트워크를 구축하는 일까지 세계 최고의 디자인 회사를 어떻게 설립했는지 소상히 보여주었다. 뛰어난 디자이너이자 탁월한 경영자인 저자가 난관을 극복하고 영감과 잠재적 능력을 현실화하는 방법에 대한 놀라운 정보를 담았다.

마르첼로 미날리는 전례 없는 불경기의 금융,사회,경제적 혼란 가운데에서 새로운 시장에 진출하고 다양한 기회를 얻기 위해 노력했던 희비의 쌍곡선까지 꼼꼼하게 기록해 두었다. 그는 영국 디자인계에서 뛰어난 직관력과 독특한 개성을 갖춘 인물로 잘 알려져 있다. 클라이언트를 유치하는 방법, 합리적인 디자인 용역비 산출 방법, 유능한 디자이너를 발굴하고 고용하는 방법 등에 대한 이야기까지 디자인 회사를 경영하는 데 핵심적인 내용을 충실하게 담았다. 본서는 새내기 디자이너, 즉 갓 입학한 대학생부터 전문 디자이너까지 조언을 구하는 모든 사람에게 지침서가 된다.디자이너가 말하는 디자인회사 경영하기
그는 40년 경험으로 축적된 노하우의 정수를 들려준다. 입사 면접에서는 자신의 고민을 드러내고, 들어간 회사에서는 독립의 그날까지 실력을 쌓아라. 창업 후 거물 클라이언트를 잡고 싶으면 그만큼 내 회사가 성숙할 때까지 기다려야 한다. 브로슈어는 낱장으로 만들어, 고객마다 최적화한 맞춤형 서비스를 해야한다. 해외 진출에는 신중하라고 주문한다. 경쟁상대가 없다는 것은 디자인이 대접받지 못하는 환경의 반증일 수도 있으니. 그리고 현지 파트너와 협력하되, 현금이 아닌 주식을 교환하고, 인간적 유대를 쌓으라고. 마지막으로 직원들에게 믿고 따를 수 있는 확고한 디자인 철학을 제시하면, 회사는 내가 없어도 돌아간다는 진실을 잊지 말라!


이러한 충고와 함께 미날리의 30년 디자인회사 경영 노하우가 담긴 초판본(1991년)은 열렬한 지지를 받았다. 책의 발간과 함께 은퇴했던 미날리는 이후 불황 덕에 다시 돌아와 그동안 어떤 일이 벌어졌는지, 컴퓨터가 주요한 도구가 된 시대에 디자인의 미래는 어떠할지에 대한 내용을 추가하여 1996년 개정판을 발간했고, 이 역시 독자들을 매혹했다. 그리고 밀레니엄의 디자인 홍수를 ‘시각적 쓰레기’라 부르고, 컴퓨터를 생각하게 만들 수 있다는 대중 강연이 추가된 개정 증보 3판이 1998년 완성되었다. <디자인 컴퍼니 바이블>은 이 3판을 완역했다.

어느 시대에나 통용되는 지혜를 들려주어 수많은 독자의 찬사를 받으면서도 끊임없이 내용을 업그레이드하는 적극적이고 세심한 조언자 마르첼로 미날리가, 만약 2001년 초 비운의 사고로 갑작스레 별세하지 않았으면 지금 우리는 중국과 EU의 성장, 종교 간 분쟁 등으로 인한 경제 변화 등에 맞춰진 그의 전략과 경험을 들을 수 있었을지도 모른다.

1장 첫걸음 - 제대로 시작하라
2장 디자이너의 세계 - 시작하고 살아남는 법
3장 이미지 관리 - 어떻게 나를 알리고 팔 것인가
4장 본격적인 사업 - '저에게 일을 맡겨 주신다면...'
5장 영토 넓히기 - 유럽 대륙에 미날리 - 테터스필드의 깃발을 꼽다
6장 넓은 시야 - 국제 네트워크를 구축하려면
7장 돈이 문제다 - 우아하고 당당하게 은행과 관계 유지하기
8장 은퇴 준비 - 내가 없어도 회사는 돌아간다
9장 불황의 그늘 - 그래도 일을 계속한다
10장 인터랙티브 - 컴퓨터와 크리에이티브의 공존
11장 진정한 충고 - 관계 맺기보다 더 중요한 것은 없다
12장 새천년을 맞이하며 - '보기에도 좋지만은 않더라'

마르첼로 미날리는 1970~80년대 영국 디자인의 부흥을 이끈 주역이자, 세계 굴지의 다분야 디자인회사 미날리 태터스필드의 창업주다. 이탈리아와 핀란드에서 디자인을 공부하고 런던의 세계적인 광고회사 영앤드루비컴에서 일했다. 그곳에서 만난 브라이언 태터스필드와 함께 1964년 ‘미날리 태터스필드 앤 파트너스’를 창업했다. ‘창의력’ 하나로 영국 내 유명 클라이언트의 작업을 독식하고, 더 넓은 시장을 찾아 유럽은 물론 중동과 호주, 일본에 진출하며 40여 년간 성공가도를 달려왔다. 끝까지 겸손하였던 그는 사내에서 후계자를 양성하고 은퇴했다. (세계를 덮친 90년대 후반의 불황 덕분에 다시 회사로 돌아오긴 했지만...)
지금 그의 회사는 전 세계에 18개의 지사를 두고 있으며, 펜타그램Pentagram과 더불어 세계 최고의 다분야 디자인회사다. 다분야 디자인회사Multi-disciplinary design consultancy란 CI, 포장, 가구, 북 등 모든 분야의 디자인을 하는 회사를 의미한다. 세분화한 분야에서 고도의 전문성을 추구하는 미국 디자인계와 달리, 영국은 한 회사에서 종합 디자인 솔루션을 제공한다. 미날리-태터스필드의 대표적인 클라이언트는 모토롤라, 아르마니, 해러즈 백화점, 템스TV 같은 세계적 기업은 물론, 런던 히드로 공항, 유로스타, 시드니올림픽 등 그 면면이 쟁쟁하다
저작자 표시 변경 금지
Posted by (dicafun@paran.com) 디카펀
추천 BOOK&SITE2009/03/14 14:41
단아한 느낌의 사이트로 아티스트들의 작품을 온라인을 통해 감상할 수 있으며, 관련 전시,공연등의 행사 일정을 얻을 수 있고,
정기적으로 갱신되는 인터뷰 코너를 통해 작가와 의사소통의 간접 기회를 잡을 수 있다.

참신한 기획을 통해 새로운 시도로 운영되고 있는 현재의 사이트가 지속적인 서비스를 할 수 있도록 안정성 확보가 되었으면
하는 마음이며, 작품에 대한 보다 비주얼적인 기능성 보강(플래쉬, AJAX를 적용한)이 이루어졌으면 하는 바램이 남는다.


저작자 표시 변경 금지
Posted by (dicafun@paran.com) 디카펀