책이 세상을 바꾼다

소프트웨어 개발을 전공으로 가르치는 교수님은 '좋은 학생'이 지원하지 않는다는 걱정을 하시고 졸업을 앞둔 학생은 취업할 만한 '좋은 소프트웨어 개발회사'가 없다고 걱정하며 회사는 뽑을 만한 '좋은 프로그래머'가 없다고 한탄한다. 현직의 프로그래머는 '처우'와 '미래'에 대한 불안감으로 걱정하는 경우가 많아 결국 소프트웨어 분야에서 '행복'을 찾는 일은 매우 어려워 보인다. 무엇이 문제일까? 뛰어난 능력의 프로그래머가 많이 배출되면 처우가 개선되고 미래가 밝아질까? 반대로 처우가 먼저 개선되어 현직의 프로그래머가 만족스런 삶을 살게 되면 능력 있는 사람이 모이고 산업이 발전할까? 높은 급여와 복리후생이 좋은 처우의 전부일까? 닭과 달걀의 문제를 떠나 '소프트웨어 산업' 자체가 행복할 수 없는 근원적 문제를 안고 있는 것은 아닐까? 그리고 이런 고민은 나만 하는 것일까?

 세상살이에 어려움을 느끼는 경우를 보면 “나만 이런 건가?”라는 외로움이 들 때다. 나를 제외하면 아무 문제 없어 보여 고민을 말하는 순간 “그건 당신 탓이야”라는 이야기를 듣게 될 것만 같다. 결국 두려움이 외로움을 낳고 의식은 깊은 곳으로 숨어 소통이 단절된다.

 이 책은 독자에게 “여러분 탓이 아닙니다”라는 공감을 표시한다. 공자는 40세 “미혹하지 않았다(四十而不惑)”라는 의미로 불혹(不惑)을 이야기 했지만 불혹을 넘어선 또는 언저리에 도달한 저자들은 미혹되며 살아가는 모습과 프로그래머의 삶 굽이굽이 돌아가며 마주쳤던 고민과 선택의 경험담을 제공한다. 그렇다고 단순히 푸념을 얼버무려 놓았거나 허황된 희망과 찬사로 치장하지도 않았다. 그렇기에 글을 읽으면 “나만의 고민이 아니구나”라는 동질감과 색다른(?) 희망을 얻을 수 있다.

 통상 책은 지식을 전달하거나 저자의 생각을 설득하기 위한 목적을 갖는다. 그러기에 책의 주제에 부합하는 증거는 선택되어 강화되며 부합하지 못하는 증거는 철저히 배제 당한다. 하지만 이 책은 정확히 그 반대의 모습을 보여준다. 공동저자는 서로의 생각을 독립적으로 작성하였고 동일 사건에 대해 다양한 관점을 제공한다. 앞장에서 주장된 논리가 뒷장에서 반박 당하기도 하며 문제는 공감하지만 원인과 해결책은 전혀 다르게 제시되기도 한다. 지식과 방법론을 외우고 적용하여야만 할 것 같은 참고서가 아닌 다양성을 경험하고 사고와 인식의 폭을 넓힐 수 있는 책으로 기획 되었다. 그럼에도 밑바탕에 견고하게 공유되는 가치는 '행복'이다. 이 책에는 행복한 프로그래머가 되기 위한 저자들의 선택과 실패담이 담겨있다. 게다가 저자들의 이야기는 먼 해외의 사례나 통제된 환경에서의 실험 결과가 아닌 지금 현재를 공유하고 있어 그 가치가 높다. 취업을 고민하고 있는 독자라면 프로그래머에게 필요한 기술 요소와 비기술 요소에 대한 정보를 얻을 수 있으며 경력 관리를 고민 중인 독자라면 프로그래머 내의 다양한 직군 정보를 얻을 수 있다. 조직과 사람 간의 문제를 고민하고 있는 독자라면 조직의 변화를 위해 설득하고 적용하고 피드백을 받으며 변화시킨 경험에서 영감을 얻을 수 있다.

 '공감'하는 사람을 만나는 것이 '행복'의 첫 걸음이다. 이 책의 저자들은 소프트웨어 개발이라는 공감 요소를 가지고 있으며 더 좋은 방향과 지속적인 발전에 관심을 가지고 있다. 이 책이 직접적인 문제 해결에 도움이 되지 않을 수 있지만 '행복한 프로그래머'라는 명제를 이야기 하고 공감하는 데 기여하길 바라는 마음이다.

 끝으로 이 글을 읽는 모든 프로그래머와 예비 프로그래머를 응원한다.

2012년 9월

대표저자 유석문

“출판을 하는 또 다른 이유”

남의 글을 빌어서 책을 만들지만, 내 생각이 들어가 있고 내 가치관이 들어가 있어 어찌 보면 출판 또한 편집자인 내 인생의 궤적을 만들어가는 일과 같다고 볼 수 있다. 그렇지 않다고 생각한다면, 단지 남의 생각을 빌어먹는 인생을 살 뿐이며, 의미 또한 없을 것이다.

지금의 숫자는 과거의 치밀한 계획과 열정이 만들어낸 산물이기 때문에 숫자를 높이려면 지금 현재 나의 자세, 일의 패턴, 기획의 방향, 업무 습관, 그리고 마인드 등을 점검해보고 새로운 나로 탈바꿈할 수 있도록 노력하는 것이 가장 중요하다.

난이도가 있는 내용도 얽히고설킨 실타래를 풀 듯, 순리적으로 풀어라. 물론, 시간적 비용이 너무 많이 들면 안 되겠지만, 그렇다고 시간 투자 안하고 좋은 결과는 없다. 이해가 안 되면 다시 읽어보고 그래도 이해가 안 되면 또 읽어보라. 마지막으로 이해가 안 되면 버려라!! 원고를!!!

70세 할머니가 게임을 하는 모습이 TV에 나왔다. 할아버지가 돌아가신 후 외롭게 사시다가 자식과 손자들이 게임하는 것을 옆에서 지켜보면서 물어보고 해보고 하다가 게임을 배우게 되었다 한다. 지금은 9년 째 게임 중이란다. 대단하지 않은가? 아직도 컴퓨터도 켜지 못해 손녀들이 켜주어야 하고 초등학교 문턱도 가지 못해 한글도 제대로 떼지 못했는데, 어린 친구들과 게임을 해서 상위 5%의 고수가 되다니. 참으로 이 세상엔 기이한 일도 많고 뜻하면 이루지 못할 일도 많은 것 같다. 극도의 외로움을 추친력으로 삼은 것 같다. 무엇이든 성공하려면 이를 뒷받침해줄 수 있는 추친력이 반드시 있어야 하는 것 같다. 나에게 지금 그 추진력이란 무얼까? 외로움? 성공에 대한 욕심? 즐거움? 사명감? 돈? 빨리 나에게 로켓 추진동체가 되어줄 것을 찾아야겠다.

오늘도 그다지 생산적이지 못했다. 감수자 제본 의뢰하고 늘상 하는 일인 주문 처리하고 기증건 확인에 증정 요청 전화에 이런 저런 일에 집중할 수 없었다. 이것은 내 일이 아닌가? 당연히 이것도 내일이다. 일을 하다 컨텍스트 스위칭하는 능력을 좀 길러야 할 것 같다. 프로그래머는 외부 인터럽트가 걸리면 그 일을 처리하고 다시 예열하는 데 상당한 시간이 걸린다고 하는데, 나도 그러는 것 같다. 오랜 기간 진행하던 한달이 지나도 원고를 못끝내다가 집중력을 발휘해 3~4일만에 끝내는 일이 다반사다. 단기간의 집중력은 분명 좋은 결과를 가져오지는 않는다. 기간적으로 충분한 여유를 가져야 수정을 할 수 있고 뒤집을 수 있으며 더 많은 아이디어를 보탤 수 있다. 그런 면에서 분명 좋은 습관은 아니다.

뭔가 마음이 어수선하고 일이 손에 잡히지 않을 때는, 주변 정리를 할 필요가 있다. 서류를 깔끔하게 정리해놓는다든지, 마음에 드는 연필과 볼펜을 사놓는다든지, 컴퓨터의 폴더를 정리한다든지 하는 등. 이러한 작업은 나태해졌을 때 다시 열정을 갖고 시작하게 해주는 아주 좋은 습관인 것 같다. 오랫동안 하나의 일을 계속하다보면 태만해질 수밖에 없다. 그럴 때 주변 정리는 정말 좋은 습관이다.

우리 딸처럼, “그냥 한번 믿어줘 봐”라는 말로 마눌님께 땡깡 부려봤자 피보는 건 나란 생각이다. 달리 생각해보면 내 인생에서 가장 평온하고 편한 시기가 지금일 수도 있겠다는 생각을 해본다. 물론, 요즘의 창업 초창기 스트레스 때문에 몸의 컨디션이 최악이기는 하지만, 이것은 내가 생각을 잘못하고 있기 때문인 것 같다.

오랜만에 거실의 거추장스런 화분을 베란다로 옮겨놓았다. 참 나도 게으른 사람이다. 자꾸 화분에 무릎을 찧고 했는데도 그걸 그렇게 치우지 않았으니. 소소한 일이기는 하지만, 싹 비워진 빈자리를 바라보니 무더운 폭염에 시원함마저 느끼고 내 안의 에너지가 조금은 충전된 느낌이다. 그래서 사람들은 소소한 일이라도 계속 하는 모양이다. 집을 꾸미고 텃밭을 가꾸고 하는 등. 땀이라는 게 꼭 내 일에서만 흘리는 게 아니라 다른 소소한 일에서도 흘리면서 에너지를 충전해야 한다는 아주 사소한 진리를 깨닫게 되었다.

적벽대전에서 패하고 조조는 부하들을 모아놓고 이런 얘길 한다.

“우리는 지금까지 성공만 해왔다. 승리만 해왔다. 그러다보니 실패하는 법을 몰랐다. 지금까지 성공만 했기 때문에 우리가 이번에 패배한 것이다.”

패배, 실패로부터 배워야 한다는 평범한 진리건만, 연기력이 더해진 탓인지, 내겐 강하게 다가온다. 

저번주에 나온 <스토리로 이해하는 UX 디자인>의 가제본 사진을 보며 그 여운이 아직도 남아 있어 사진과 함께 기록에 남긴다.

꼭 자식 태어날 때 팔다리 온전한지 먼저 보는 것처럼, 대형사고는 없는지부터 보게 된다. 그 떨림이 사진속에 그대로 있는 듯 하다.

그리고, 그 순간에 떠오른 생각, 잽싸게 메모해둔 내용!

책이라는 것, 정말 쉽게 만들면 안 되겠구나......

  ● 저자: 다음커뮤니케이션 UX랩 & 마켓인사이트팀

  ● 페이지: 400

  ● 판형: 4X6배 변형(172 x 225)

  ● 도수: 4도

  ● 정가: 25,000원

  ● 발행일: 2012년 7월 4일

  ● ISBN: 978-89-966598-0-8 93560

[절판되었습니다]

[강컴] [교보] [리브로] [반디] [11번가] [알라딘] [예스24] [인터파크]

sample.pdf

_도서 내용

이야기가 있어 재미있다! 

실전 상황이라 리얼하다!

단계별 UX 기법 설명이 자세하다!

삼박자 두루 갖춘 UX 실전 입문서이다.

‘잇걸' 이라는 태블릿 PC용 앱을 만드는 가상의 프로젝트에 유편리라는 UX 디자이너가 참여하면서 겪는 업무 상황을 배경으로 하고 있다. 유편리가 사용자 경험 디자인 프로세스를 경험하면서 겪는 여러 상황의 스토리와 단계별 이용 기법을 상세한 설명과 함께 제시해준다.

자연스레 프로젝트의 처음과 끝까지 유기적으로 연결되는 UX 디자인 프로세스를 간접적으로 체험해보면서, UX의 실전 지식을 체득할 수 있다.

_대상 독자

UX에 관심 있는 학생, 기획자, 개발자, 디자이너

UX 실무 인력

_목차

1장. UX에 대한 이해

스토리 1. 사용자와 관계를 맺는다는 것

UX는 살아있다

일상에서 찾는 사용자 경험

사용자와 함께 걷기

스토리 2. 다르지만 같은 곳을 보고 있어

D사의 UX 사람들 엿보기

회사가 UX 조직에게 원하는 것

2장 프로젝트 이해와 전략

스토리 3. 20~30대 여성 사용자를 잡아라

좋은 서비스를 만들기 위한 기업의 전략

어떤 방법으로 모으고 분석할까

3장. 사용자 조사

스토리 4. 사용자의 마음 읽기

지금은 사용자를 이해해야 할 순간

당신이 알고 싶은 마음을 듣는 법

스토리 5. 여행을 위한 첫 발자국

한 눈에 그려지는 조사 계획서 만들기

조건에 맞는 참여자를 찾는 방법

성공적인 여행을 위하여 마지막 할 일

스토리 6. 만나고 헤어지기까지의 순간들 : 조사 실행

분석을 염두에 두고 실행하라

진행의 기술

스토리 7. 마음의 모자이크 : 조사 분석

데이터에 밑줄 긋기

목적물의 사용자는 누구인가

이들은 어떤 과업을 수행하나

이들은 어떤 환경 속에 놓여있나

조사의 마무리

_주요 내용

사용자의 마음을 읽는 법,

프로젝트 성공의 열쇠입니다.

실전 UX 디자인 프로세스를 체험한다

‘잇걸 프로젝트’라는 가상의 태블릿PC용 앱 프로젝트에서 UX 디자인 프로세스가 어떻게 적용되는지를 보여줌으로써 실제 업무에 적용할 수 있는 살아있는 지식을 배울 수 있습니다.

다양한 캐릭터 그리고 이야기가 있어 마치 소설처럼 읽힌다

UX 팀에 처음 합류한 ‘유편리’’라는 주인공과 동료들의 과업 수행 과정을 이야기처럼 재밌게 꾸몄습니다. 나와 동일시할 수 있는 캐릭터를 찾아보는 것도 큰 재미입니다. 그리고 각 캐릭터의 프로젝트 수행 과정을 벤치마킹 해보는 것도 큰 도움이 됩니다.

이야기로만 끝나는 게 아니라 실제 산출물까지 제시한다

UX의 각 단계별 프로세스마다 주인공 ‘유편리’와 동료들이 협업하여 만들어낸 산출물까지 제공하고 있어 실전적 체험을 할 수 있습니다.

_추천의 글

앞으로 십 년 이십 년 후에 UX나 HCI를 공부하는 사람들이 "옛날 옛적에 유편리가 D사에서 UX를 할 때에.."라는 이야기로 우리나라 UX 분야의 초창기 큰 활약을 이야기하는 그날이 오기까지 이 책은 UX를 학습하려고 하는 많은 분들에게 귀중한 Story가 될 것을 확신합니다.

_김진우(연세대학교 경영대학 교수, HCI 학회장)

이야기에 몰입하게 되면 개념의 이해는 쉽게 따라오기 마련이다. 또한 때에 따라서는 실무에서 일하고 있는 UX 디자이너들에게는 ‘맞아 맞아, 나도 이런 경우가 있었지!’하며 무릎을 칠 수도 있을 것이다.

_이건표(LG전자 디자인경영센터 부사장)

이 책의 가장 큰 미덕은 UX 초심자들에게 마치 선배가 현장에서 조언해주는 듯한 내용을 담았다는 점이다. 현장 경험이 많지 않은 초보자들에게 선배들이 경험한 현장의 팁과 가이드를 프로젝트 상황에 맞게 알려주는 생생한 지침 역할을 제대로 하고 있다. UX에 어느 정도 경험은 있지만 소규모 조직에 있어 제대로 된 코칭(Coaching)을 받지 못한 이들에게도 이 책은 본인의 UX 프로세스 전반과 산출물 전반을 다듬을 수 있는 계기를 마련해 줄 것이다.

_이지현(서울여대 산업디자인학과 교수)

_편집자 코멘트

UX 관련 많은 책들이 국내에 소개되었지만, 편집자의 눈에 많은 UX 책들은 전문 용어가 많고 다양한 학문적 지식이 필요한 지극히 이론적인 내용의 것들로 가득 차 있었습니다. 정말 이런 게 UX적인 걸까? UX는 머리를 싸매고 연구해야 할 것 같은 공학적인 어떤 것일까?

이런 물음에서 출발하여 국내 UX 도입 사례에 UX의 학문적 배경을 투영하여 이야기처럼 꾸민다면 UX를 학습하기 시작한 사람들에게 먼 길을 돌아가지 않을 수도 있겠다는 생각을 했습니다. 실제로 구현된 책을 마주하면서 신간안내를 쓰고 있는 지금, 독자의 마음을 읽어내어 책으로 만들어내야 하는 편집자인 나도 이런 책을 조금만 일찍 만났더라면 좋았을 것을, 하는 생각을 하게 만들 정도로 누구나 공감이 될 수 있게 만들었습니다.

전문 용어가 많고 다양한 학문적 배경이 있어야만 UX적이다라는 선입견을 버리고 편안하게 사용자의 마음에 한 발짝 다가서는 계기가 되었으면 하는 게 이 책을 기획한 편집자의 소박한 바람입니다.

_저자 소개

[대표 저자] 

이윤솔

학부에서 국문학과 심리학을 전공한 후 언론사 문화팀에서 기자 생활을 했다. 이후 KAIST에서 문화기술학을 전공하고 Daum UX랩에 합류하여 모바일 UX에 대한 업무를 담당했으며 현재는 전략 기획 유닛의 마켓인사이트팀에서 사용자와 서비스를 좀 더 사이 좋게 만들기 위한 스토리텔링 연구를 담당하고 있다.

조선영

산업 디자인 전공 후 KAIST 문화기술학 대학원 1기 출신으로 야후 코리아, 롯데닷컴 등에서 UX 스페셜리스트로 다년 간의 경력을 쌓고 2010년 Daum UX랩에 합류했다. 현재는 모바일 UX TFT의 파트장으로 창의적 문제 해결 방법에 대해서 많은 관심을 가지고 있으며 개인, 집단의 창의적 사고 방법의 사내 전파에 앞장 서고 있다.

강동균

국제무역학을 전공하고 다년간의 벤처 활동을 하다가 국민대 테크노 디자인 대학원 졸업 후 Daum UX랩에 합류했다. 클라우드 서비스의 UX 설계와 10대 이용자의 온/오프라인 사용 행태 분석 등의 프로젝트에 참여했다. 현재는 전략 기획 유닛의 마켓인사이트팀에서 전략 수립을 위한 기반/선행 연구를 담당하고 있다.

백인섭

학부와 대학원에서 산업공학(HCI, 인간 공학)을 전공하고 ERP컨설턴트를 거쳐 자동차 내비게이션, 디지털 TV등의 사용성 연구와 UX 설계 경력이 있다. 2007년 다음커뮤니케이션에 합류하여 UX랩을 세팅했다. 현재는 전략 기획 유닛 내 마켓인사이트팀을 담당하고 있으며 Design Thinking, Design Management에 관심을 가지고 있다. 

[공동 저자]

박정은(현 Daum UX랩 연구원)

정유진(현 Daum UX랩 연구원)

허인진(현 Daum UX랩 연구원)

한수정(현 Daum UX랩 연구원)

장석현(현 Daum UX랩 연구원)

이지용(현 Daum 마켓인사이트팀 연구원)

팀 소개

Daum UX랩은 Daum의 전사 UX 관련 주요 리서치와 신규, 개선 프로젝트의 UX 설계 및 검증을 담당하고 있다. 디자인, 심리학, 국문, 영문학, 건축학, 미디어 등의 다양한 전공자들로 구성되어 있으며 사내 직원들을 위한 UX 역량 강화 교육도 함께 담당하고 있다. Daum의 카페 관리 개선, 지도 앱, 마이피플 앱, Daum 앱, 모바일웹 홈, 아이패드용 만화앱, 다음TV 프로젝트에 참여했다. 마켓인사이트팀은 기획자, 디자이너, UX직군 등 사내 각 분야별 전문 인력들로 구성된 팀으로 전사 전략 수립을 위한 사용자 조사 및 시장 조사, 미래 환경 변화 예측과 선행 UX 연구를 담당하고 있다.

_상세 이미지

6월 출간예정도서입니다.

이번에는 UX의 실천적 기본서입니다. 실천적이란 말을 붙인 것은 사용자의 마음을 읽어 서비스에 반영될 때까지의 프로젝트 전과정이 그대로 들어있기 때문입니다.

사용자의 마음을 읽는 법, 프로젝트 성공의 열쇠입니다.

실전 UX 디자인 프로세스를 체험한다

‘잇걸 프로젝트’라는 가상의 태블릿PC용 앱 프로젝트에서 UX 디자인 프로세스가 어떻게 적용되는지를 보여줌으로써 실제 업무에 적용할 수 있는 살아있는 지식을 배울 수 있습니다.

다양한 캐릭터 그리고 이야기가  있어 마치 소설처럼 읽힌다

UX 팀에 처음 합류한 ‘유편리’’라는 주인공과 동료들의 과업 수행 과정을 이야기처럼 재밌게 꾸몄습니다. 나와 동일시할 수 있는 캐릭터를 찾아보는 것도 큰 재미입니다. 그리고 각 캐릭터의 프로젝트 수행 과정을 벤치마킹 해보는 것도 큰 도움이 됩니다.

이야기로만 끝나는 게 아니라  실제 산출물까지 제시힌다

UX의 각 단계별 프로세스마다 주인공 ‘유편리’와 동료들이 협업하여 만들어낸 산출물까지 제공하고 있어 실전적 체험을 할 수 있습니다. 

화면은 요렇게 구성되어 있습니다.

다양한 등장인물들이 등장해서 스토리를 이어갑니다.

표지는 아직 확정되지 않았지만, 아래 표지로 진행될 가능성이 크네요. ^^

안녕하세요.

도서 2종에 대해 독자 리뷰 이벤트를 합니다.

[이벤트 주요 내용]

1. 해당 도서

 이제 실전이다, HTML5&CSS3 사이트 제작의 모든 것

 IT 아키텍트가 하지 말아야 할 128가지

2. 신청 방법

  이메일 신청: chief@roadbook.co.kr

  이름, 직업, 성별, 나이, 간단한 신청동기를 써주세요. 

3. 선정 인원

  도서당 5명(총 10명) 

4. 마감일과 당첨자 발표

   마감일은 5월 5일이며 조기에 마감될 수 있습니다.

   이메일로 개별 통보합니다.

감사합니다. 

  ● 저자: 양용석

  ● 페이지: 464

  ● 판형: 4X6배 변형(190 x 244)

  ● 도수: 2도

  ● 정가: 25,000원

  ● 발행일: 2012년 4월 20일

  ● ISBN: 978-89-966598-9-1 93560

[절판된 도서입니다]

[강컴] [교보] [리브로] [반디] [11번가] [알라딘] [예스24] [인터파크]

sample.pdf

_도서 내용

HTML5와 CSS3로 다양한 레이아웃 디자인을 해보는 것부터 시작합니다. 실전 첫 단계로 레스토랑 체인점 사이트를 제작해보고 바로 리뉴얼까지 해보면서 CSS의 강력한 기능을 체험할 수 있습니다.

쇼핑몰 웹사이트 디자인은 이 책의 하이라이트입니다. 쇼핑몰은 수많은 디자인 기법들이 적용되기 때문에 아주 많은 고급 기법을 직접 체득할 수 있습니다.

모바일 시대에 각종 기기에 최적화한 사이트를 만드는 능력은 당연히 필수겠죠? CSS의 미디어 쿼리 기술로 태블릿이나 스마트폰 등 다양한 기기에서 맞춘 사이트를 만들어봅니다. 모르면 힘들지만, 알고 나면 정말 쉽고 강력하다는 것을 느낄 겁니다.

그리고 가변길이 사이트까지 섭렵하면, 여러 분은 웹 표준 디자인 전문가로서 큰 자신감을 얻을 수 있을 것입니다.

_대상 독자

아직도 CSS가 익숙지 않아서 매일 디자인 버그에 시달리고 있는 웹 디자이너

리뉴얼도 힘들고 유지보수도 힘든 결과를 내고 있는 웹 디자이너

웹 디자이너가 되기 위해 공부하고 있는 학생

웹 디자이너와 협업을 해야 하는 웹 기획자나 개발자

_목차

1장 HTML5와 CSS3 소개

Section 1 HTML5에서 추가된 새로운 태그

Section 2 CSS3의 새로운 기능

Section 3 HTML5와 CSS3를 이용하여 다양한 레이아웃 만들기

Section 4 포토샵을 이용한 웹 이미지 최적화(GIF, JPG, PNG)

Section 5 드림위버를 사용해 좀 더 편리하게 사이트 작업하기

2장 실전 웹사이트 제작 

Section 1 웹사이트 제작에 들어가기 전 기획 및 설계

Section 2 디자인(레이아웃) 작업 프로세스

Section 3 페이지 제작에 앞서 해야 할 준비 작업

Section 4 사이트의 구조 확인 및 HTML 태그 작업

Section 5 헤더(header)와 메인 메뉴(nav) 부분 처리

Section 6 본문(article)과 푸터(footer) 부분 처리

Section 7 프론트 페이지 정리 및 jQuery를 이용한 슬라이드 효과

Section 8 jQuery를 이용한 드롭다운 메뉴의 추가

Section 9 서브 페이지 제작

Section 10 브라우저 호환성 확인

_주요 내용

웹 표준 디자인 전문가로 가는 길을 제시한다!

실전! HTML5 & CSS3 웹 디자인의 모든 것

레스토랑 체인점 웹사이트 개발

HTML5 사이트의 구조를 어떻게 만드는지, 그에 따른 디자인 처리는 CSS3로 어떻게 하는지 자세하게 설명합니다.

빠르고 쉽게 웹사이트를 리뉴얼한다!

기본적인 HTML 구조는 거의 유지한 상태에서 CSS를 이용하여 사이트를 리뉴얼하는 과정을 상세하게 배울 수 있습니다.

쇼핑몰 웹사이트 제작을 통한 다양한 기법 습득

쇼핑몰 사이트 요소에 다양한 기법이 적용되기 때문에 웹 표준 디자인에 대한 전문적인 스킬을 배울 수 있어 자신감을 높일 수 있습니다.

미디어 쿼리를 이용한 모바일 및 가변길이 사이트 제작

미디어 쿼리를 이용하여 앞서 개발한 쇼핑몰 사이트를 모바일 기기에 최적화하는 방법을 소개합니다. CSS를 이용하여 PC, 태블릿, 스마트폰에서 볼 때 각각 다른 사이트로 만들 수 있는 기법이 소개됩니다.

Q&A 사이트를 운영하여 언제든지 궁금한 점을 물어볼 수 있고 빠르게 답해드립니다.

http://roadbook.zerois.net/qna

_편집자 코멘트

이 책은 제목 그대로 “실전 감각”을 익히는 책입니다. HTML5와 CSS3로 다양한 레이아웃 디자인을 해보는 것부터 시작합니다. 이후 실전 첫 단계로 레스토랑 체인점 사이트를 디자인해봅니다. 그리고 이 사이트의 리뉴얼을 해보면서 CSS의 강력한 기능을 체험할 수 있습니다.

쇼핑몰 웹사이트 제작 부분이 압권입니다. 쇼핑몰은 복잡한 것 같지만, 사실 구조는 간단합니다. 하지만 CSS로 디자인을 제어할 수 있는 수많은 기법들이 적용되기 때문에 아주 많은 고급 기법을 직접 체득하고 내 디자인 능력으로 만들 수 있습니다.

모바일 시대에 각종 기기에 최적화한 사이트를 만드는 능력은 당연히 필수겠죠? CSS의 미디어 쿼리 기술로 태블릿이나 스마트폰 등 다양한 기기에서 맞춘 사이트를 만들어봅니다. 모르면 힘들지만, 알고 나면 정말 쉽고 강력하다는 것을 느낄 겁니다.

그리고 가변길이 사이트까지 섭렵하면, 여러 분은 웹 표준 디자인 전문가로서 큰 자신감을 얻을 수 있을 것입니다.

_상세 이미지

HTML5로 사이트 구조 설계를 어떻게 하고 CSS로 디자인을 어떻게 제어하는지 확실하게 연습할 수 있습니다.

웹 표준 사이트는 어떻게 리뉴얼을 할까요? CSS만 바꾸어도 사이트는 확실하게 달라질 수 있습니다.

쇼핑몰 디자인? 어렵지 않아요~. 복잡해 보이지만, 사실 무척 간단합니다. 스티키 윈도우도 한 번 구현해볼까요? 쇼핑몰 사이트 디자인을 잘 배워두면 어떤 복잡한 웹 디자인도 거뜬히 해낼 수 있을 것 같은데요~.

어떤 다른 모양의 모바일 디바이스에서건 웹사이트가 잘 보여야겠죠? 가변길이 사이트도 아주 자세히 설명해드립니다.

“다양한 웹 제작 툴도 소개합니다. 워드프레스나 제로보드도 소개합니다. 개발 환경에 관한 전체적인 그림을 그릴 수 있도록 도움을 드립니다.” 

_저자 소개

양용석 ugpapa@gmail.com

아름다운 섬 제주도에서 프리랜서로 활동하고 있다. IT 관련 강의 및 집필 활동을 하고 있으며 다양한 웹사이트 제작을 하고 있다.

<처음부터 다시 배우는 HTML5&CSS3>(로드북)을 집필하였으며, 최근에 제작한 사이트로는 두바이 아시아나호텔(www.asianahoteldubai.com), 스마트북스(www.smartbooks.so) 등이 있으며, 지금까지 30여 개가 넘는 다양한 사이트를 개발하였다.

HTML5와 CSS3 그리고 jQuery에 많은 관심이 있으며, 전세계 인터넷 트렌드에 발 빠르게 대응하려 노력하고 있다. 또한 사진 및 사진 장비(DSLR)에 대해서도 열정적이며 제주의 풍경을 즐겨 촬영하고 있다.

개인 블로그(ugpapa.tistory.com)에서도 저자를 만날 수 있다.

현재 두 딸과 아들 그리고 아내와 함께 살고 있다.

(오탈자 신고: chief@roadbook.co.kr 또는 댓글로 남겨주세요)

(2012년 8월 8일 현재)

-----p.29(중간 부분)-------------------------------------------

(bokhanb님 제공)

오류: http://goo.gl/kAn11 

수정: http://css3pie.com/

---------------------------------------------------------------

-----p.46(소스 마지막 주석)----

(박상도님 제공)

오자: 폰트 사이트

수정: 폰트 사이즈

---------------------------------------------

-----p.56(3째줄)-------------------------------------------

( bokhanb님 제공)

오류: "</nav>과 <article> 사이에 있는 <div class="clear"></div>는 제거해 주기 바랍니다."

수정: "</nav>과 <article> 사이에 있는 <div class="clear"></div>과 </article>과 <footer> 사이에 있는 <div class="clear"></div> 부분을 제거해주시기 바랍니다.

-----------------------------------------------------------

-----p.56(그림1.3-20 오른쪽 float:left 두 개)----

(zooo님 제공)

오자: float:left

수정: float:right

---------------------------------------------

-----p.62-------------------------------------------

(bokhanb님 제공)

오류: Ctrl+Alt+s

수정: Crtl+Alt+Shift+s

----------------------------------------------------

 -----p.71(아래에서 3째줄)----

(zooo님 제공)

오자: 주는 ㅌ것이

수정: 주는 것이

---------------------------------------------

-----p.69, 73, 85, 79------------------------------

(zooo님 제공)

오자: WISIWYG, WYSYWIG

수정: WYSIWYG

----------------------------------------------

-----p.104(그림 2.3-5)-------------------------------------------

(bokhanb님 제공)

둥근 넘버링 10번이 가르키는 곳은 "웹 URL" 부분으로 수정되어야 합니다.

-----------------------------------------------------

-----p.110-------------------------------------------

(bokhanb님 제공)

body부분의 background-color:#FFF; 부분의 그림도 추가되어야 합니다.

아래 그림 참고하세요.

-------------------------------------------------

-----p.137(아래에서 2번째)-------------------------------

오류: article #front_box.box1 { border-right:none; }

수정: article #front_box .box1 { border-right:none; }

----------------------------------------------------------------------

-----p.144(박스 안 코드 마지막 li 태그 부분)-------------------------------

(bokhanb님 제공)

오류: <li><img src="images/slide2.jpg" width"900" height="496"></li>

수정: <li><img src="images/slide3.jpg" width"900" height="496"></li>

----------------------------------------------------------------------

-----p.197(소스 중복)---------------------------------------------------

오류: nav ul.menu li a 중복

수정: 처음 나오는 nav ul.menu li a { } 제거

----------------------------------------------------------------------

-----p.212(소스 2~3번째줄)----

(대막리지님 제공)

오자: 소스 2째줄 (padding:0 5px;)

수정: 제거해야 함

---------------------------------------------