추가 적립 안내

정전계(static electric field), 정자계(static magnetic field) 로 부터 시작하여, 시변(time-varying) 전자계의 각종 이론이 현장 전기설비 관리 중에 어떠한 모습으로 나타나는 지를 경험을 통해 소개하고, 마지막으로 맥스웰 방정식 유도까지를 물리적 개념으로 설명하였다.

이 책의 전반부는 비즈니스 모델과 서비스 기획 그리고 기획자의 자질 및 프로젝트 관리방법 등 기획관련 요소 중 전공자들이 자칫 간과하기 쉬운 내용 위주로 구성되어 있습니다. 그리고 후반부에는 무수한 문법적 요소들 중에서 가장 기초적인 태그 30개만 엄선하여 수록함으로써 학생들이 스스로 HTML5 로 서비스의 골격을 세우고 CSS3 로 심미적인 완성도를 높일 수 있는 기초역량을 함양하는데 초점을 맞추었습니다. 다음은 이러한 취지에 맞춘 이 책의 강의 원고로 수업을 들은 학생들에게서 받은 피드백들입니다.
- ？그동안 접한 강좌에서는 기술에 대해서만 배웠는데 이 수업을 통해서는 실제 서비스에 필요한 지식을 배울 수 있었습니다.
- ？웹프로그래밍은 내가 개발하고 있는 과정을 직접적으로 볼 수 있는 흥미로운 코딩과정이라는 것을 알게 되었습니다.
- ？단순히 다운로드해서 썼던 앱에 서비스전략과 기획방향이 반영된다는 사실이 신기했고 새로운 가치를 제공하는 창구로서의 웹 또는 앱 구축 기술이 4차산업시대에 왜 필요한지 깨달았습니다.
- ？웹프로그래밍은 밀당인 것 같습니다. 전공수업이 어려워 힘들어하고 있었는데 이 수업 덕분에 끈을 놓지 않을 수 있었습니다. 진로선택에 도움이 되었고 앞으로의 길을 찾게 해주는 가치있는 내용을 배웠습니다.
- ？웹프로그래밍은 단순한 코딩이 아니라 하나의 창작과정이라는 것을 알게 되었고 내가 하고 싶은 것이 무엇인지 그리고 앞으로 어떤 방향으로 스스로를 발전시키면 좋을지를 생각하게 해 준 수업이었습니다.
위와 같이 이 책은 독자들에게 웹과 앱의 체계를 잡아주는 실용 위주의 지식들로 가득 차 있습니다. 실습을 병행하며 끝까지 잘 학습한 독자라면 필자의 제자들처럼 시장조사와 고객에 대한 이해를 거쳐 애플리케이션 전략 수립과 HTML5+CSS3 를 활용한 서비스 구현에 이르기까지 서비스를 직접 기획하고 설계할 수 있는 탄탄한 기초실력을 갖출 수 있게 될 것입니다.

저자 서문 V

1장 비즈니스 모델 1
1.1 비즈니스 모델 개요 1
1.2 전통적 비즈니스 모델 2
1.3 성공적인 비즈니스 모델 3
1.4 보완적 자산 모델 3
1.5 GBF 비즈니스 모델 4
1.6 비즈니스 지속성 모델 5
1.7 네트워크 효과 5
1.8 비즈니스 모델의 9대 요소 6
1.9 BMC 모델 7
1.10 비즈니스 모델 수립시의 고려사항 8
1.11 비즈니스 모델의 치명적 결함 9
1.12 비즈니스 모델 점검사항 10
연습문제 11

2장 서비스 기획 13
2.1 서비스 기획 사이클 13
2.2 시장분석 14
2.3 고객분석 19
2.4 정보구조 24
2.5 와이어프레임 26
2.6 피그마(Figma) 27
2.7 플로우차트 28
2.8 스토리보드 29
2.9 디스크립션 30
2.10 프로토타입 31
2.11 최소기능 서비스 31
2.12 A/B 테스트 32
연습문제 35

3장 서비스 기획자의 자질 37
3.1 T자형 인재 37
3.2 인터넷 기술에 대한 이해 38
3.3 도메인 지식 39
3.4 사용자경험에 대한 이해 39
3.5 프로젝트 관리에 대한 이해 40
3.6 시간관리 능력 40
3.7 협상 능력 41
연습문제 41

4장 시간 관리 43
4.1 제1상한 44
4.2 제2상한 45
4.3 제3상한 45
4.4 제4상한 46
4.5 긴급성의 중독 46
4.6 중요성의 원리 47
연습문제 48

5장 프로젝트 관리 49
5.1 프로젝트 관리자의 역할 49
5.2 프로젝트 팀 50
5.3 팀워크 52
5.4 경영진과의 관계 53
5.5 소통 문제가 야기되는 지점 53
5.6 프로젝트의 주요 실패원인 54
5.7 프로젝트 실패의 여파 55
5.8 프로젝트 관리의 필요성 56
5.9 일정관리 56
5.10 간트차트 57
5.11 WBS 58
5.12 작업 60
5.13 위험관리 62
연습문제 65

6장 협상 67
6.1 협상에 대한 오해 68
6.2 협상이론 68
6.3 협상방안 71
6.4 협상 십계명 73
연습문제 78

7장 HTML5 79
7.1 웹편집기와 웹브라우저 79
7.2 웹표준 80
7.3 HTML5 와 CSS3 81
7.4 HTML 의 버전 82
7.5 HTML5 지원 브라우저 82
7.6 HTML 문서 작성 도구 83
7.7 Visual Studio Code 84
7.8 HTML 태그의 구조 85
7.9 간단한 HTML 코드 구현 86
7.10 HTML 문서의 기본 구조 87
7.11 웹호스팅 88
7.12 파일 업로드 89
7.13 HTML5 주요 태그 90
연습문제 97

8장 CSS3 101
8.1 스타일 형식 102
8.2 스타일 표기법 103
8.3 스타일시트 103
8.4 선택자 106
8.5 케스케이딩 114
8.6 스타일 상속 114
8.7 CSS3 116
8.8 박스모델 131
8.9 레이아웃 149
8.10 멀티미디어 159
8.11 고급 선택자 166
8.12 반응형 웹 170
8.13 미디어쿼리 179
8.14 플렉스 187
연습문제 202

찾아보기 214

1.1 비즈니스 모델 개요
비즈니스 모델 (Business Model)은 비즈니스의 논리와 그 구성 요소들 간의 관계를 설명하는 개념이다. 이는 고객에게 가치를 제공하고 수익을 창출하기 위해 수행하는 활동들의 집합으로, 시장에서 어떻게 가치를 창출하는지를 설명하며 가치 창출을 위한 핵심 로직과 전략적 선택을 집약적으로 표현한 것이다. 비즈니스 모델에 포함되어야 하는 주요 요소로는 다음과 같은 것들이 있다.
첫째, 가치 정의 (Value Definition)이다. 비즈니스 모델은 고객에게 제공하는 가치가 명확하게 정의되어 있어야 한다. 고객이 필요로 하는 욕구와 문제를 해결하거나 만족시켜 줄 수 있는 가치를 담고 있어야 한다.
둘째, 가치 창출 과정과 가치의 전달 과정 (Creation and Delivery)이다. 이는 서비스의 개발, 생산, 유통, 마케팅, 판매 등과 관련된 일련의 활동들이 포함되어 있어야 한다.
셋째, 수익과 지속 가능성 (Profit & Sustainability)이다. 비즈니스 모델은 수익 모델, 비용 구조, 수익성, 자금 조달 등과 관련된 요소 등을 설명하고 있어야 한다.
비즈니스 모델은 비즈니스의 핵심을 간단하고 명확하게 표현하는 도구이다. 명확한 비즈니스 모델을 가지고 있어야 기업은 가치와 수익 창출을 통해 경쟁력을 향상시키고 지속 가능한 성장을 이루어 갈 수 있다.

8장. CSS3
스타일은 웹 문서의 시각적인 요소들을 꾸며주는데 사용되며 텍스트의 글꼴, 크기, 색상, 배경, 간격 등을 설정할 수 있다. 스타일 시트는 이러한 스타일들을 한 곳에 모아놓은 것으로 여러 개의 HTML 문서에서 공통적으로 사용되는 스타일을 중복해서 작성하지 않고 한 번에 관리할 수 있도록 도와준다.
스타일 시트는 주로 CSS (Cascading Style Sheets)라는 언어를 사용하여 작성된다. CSS는 HTML과는 별도의 파일에 작성되며 HTML 문서에서는 〈link〉 태그를 사용하여 스타일 시트 파일을 연결한다. 이렇게 스타일 시트를 별도로 작성하고 HTML 문서와 연결하면 스타일을 일관성 있게 적용할 수 있고 웹문서의 유지보수와 관리가 편리해진다.
웹 기반의 서비스를 디자인 할 때 스타일을 사용하는 이유가 여러가지 있는데 가장 큰 이유로는 디자인과 내용을 분리할 수 있다는 점이다. 다시말해 스타일을 사용하면 웹 문서의 디자인을 코드와 분리할 수 있다. 내용은 HTML로 작성하고 스타일은 CSS로 표현함으로써 코드를 독립적으로 관리할 수 있다는 것을 의미한다. 이렇게 분리함으로써 개발자와 디자이너가 웹 문서의 구조와 디자인을 독립적으로 변경 관리할 수 있다는 점은 큰 장점으로 작용한다. 또 다른 이유로는 일관성을 유지할 수 있기 때문이다. 스타일을 사용하면 여러 웹 페이지에 일관된 디자인을 적용할 수 있다. 그 외에도 유지보수와 관리의 편의성을 제고할 수 있다. 스타일 시트를 사용하면 스타일을 한 곳에서 관리할 수 있어 유지보수가 편리해지고 스타일을 변경할 때에는 스타일 시트 파일만 수정하면 되므로 여러 개의 웹 페이지를 일일이 수정할 필요가 없다. 더욱이 디자인 변경의 용이성도 꼽을 수 가 있다. 스타일을 사용하면 웹 페이지의 디자인을 쉽게 변경할 수 있는데 스타일 시트를 수정하거나 새로운 스타일을 추가함으로써 웹 페이지의 전체적인 디자인을 변경하기가 상당히 용이하다. 디자인의 유연성과 확장성이 높아지게 되는 것이다.
이렇게 웹을 표준화하면 얻을 수 있는 효과가 있다. 웹 브라우저에서 웹 페이지가 일관된 방식으로 표시되므로 사용자들이 서로 다른 브라우저를 사용하더라도 동일한 경험을 제공받을 수 있게 되고 호환성 문제로 인한 사용자 경험 저하를 방지할 수 있으며 PC 나 스마트폰 태블릿 등 다양한 기기와 플랫폼에 맞춰 웹 페이지를 제작할 수 있다. 특히 반응형 웹(Responsive Web) 디자인 기법을 활용하면 사용자가 어떠한 기기를 사용하더라도 최적화된 레이아웃과 사용자 경험을 제공할 수 있다. 또한 시맨틱한 HTML 구조와 명확한 태그 사용을 지향하면 웹 접근성 지침에 따라 스크린 리더(Screen Reader) 같은 보조 기기 등을 활용하는 사용자들이 웹 페이지를 더욱 쉽게 이용할 수 있게 된다. 아울러 코드의 일관성과 가독성을 유지할 수 있으며 코드의 재사용성과 유지보수성이 향상되고 앞서 설명한 것 처럼 스타일 시트를 통해 디자인과 내용을 분리함으로써 디자인 변경이 용이해지고 웹 페이지의 개발과 유지보수 과정에서의 효율성을 높일 수 있다.