제2회 접근성캠프서울 Universal design & web

1. UNIVERSAL DESIGN & WEB

2.
스마트미디어그룹

3.
박천수

4. 그룹장

6. BLEND it

7.
플립커뮤니케이션즈는

8. IT가

9. 우리

10. 삶에

11. 조화롭게

12. 스며들어

13. 우리의

14. 삶을

15. 윤택하게

16. 하는

17. 것을

18.
기업의

19. 최우선

20. 목표로

21. 하고

22. 있습니다.
We exist for the purpose of connecting and harmonizing internet technology with the world we live in.
PULLING a TIP
플립커뮤니케이션즈는Pulling a tip을

23. 블렌딧

24. 한

25. 합성어로,
고객의

26. 니즈를

27. 넘어

28. 원츠를

29. 생각하고

30. 제시하는

31. 기업이라는

32. 뜻을

33. 담고

34. 있습니다.

35.
OVERVIEW
㈜플립커뮤니케이션즈

37. ( PULIP COMMUNICATIONS Co.,Ltd )

38.
e-비즈니스

39. 전략컨설팅, UX 컨설팅, 웹서비스

40. 구축

41. 및

42. 운영, 스마트미디어

43. 서비스

44. 구축

45. 및

46. 운영, 오픈

47. 웹

48. 서비스

49. 구축, 온라인

50. 광고/마케팅

51.
160명

53.
서울시

54. 강남구

55. 논현동

56. 7-5 효진빌딩

57. 2~3F
Tel : 02-541-4642
www.pulipinc.com / pulip@pulipinc.com

59. 오늘

60. 이야기의

61. 주제는…

62.
UNIVERSAL DESIGN 이란

63. 무엇인가요

64. ?
웹

65. 접근성과

66. 어떤

67. 차이가

68. 있습니까

69. ?
그래서

70. 어떻게

71. 하면

72. 되나요

73. ?

74. UNIVERSAL DESIGN 이란

75.
“모든

76. 사람들이

77. 제품, 건축, 환경, 서비스

78. 등을

79. 보다

80. 편하고

81. 안전하게

82. 이
용할

83. 수

84. 있도록

85. 설계하는

86. 것

87. “
- 위키피디아

88.
“보편적

89. 디자인”
“포괄적

90. 디자인” (inclusive design)
“모두를

91. 위한

92. 설계” (Design for All)

93. 모두를

94. 위한

95. 시계

96.
vs

97.
The Bradley Designed by 김형수(Eone)

98. 모두를

99. 위한

100. 플러그

101.
Universal Plug Design by 김성우
iF Concept Design 2011 winner

102. 웹

103. 콘텐츠

104. 접근성

105. 지침

107.
4개의

108. 기준, 22개의

109. 가이드라인

110.
Perceivable
Understandable
Operable
Robust

112. UD answers the “Why?”

113.
“보편적

114. 디자인”
“포괄적

115. 디자인” (inclusive design)
“모두를

116. 위한

117. 설계” (Design for All)
“모든

118. 사람들이

119. 웹에서

120. 훌륭한

121. 사용자경험을

122.
얻을

123. 수

124. 있도록

125. 설계

126. 하는것

127. “

129. 모두를

130. 위한

131. 웹

132.
장애인을

133. 위한

134. 접근성

135. 개편이

136. 아닌

138.
2008년

139. 4월

140. 11일부터

141. ‘장애인차별금지

142. 및

143. 권리구제

144. 등에

145. 관한

146. 법률’이

147. 시행되어

148.
5년의

149. 단계적

150. 유예기간이

151. 만료되는

152.
2013년

153. 4월

154. 11일

155. 부로

156. 모든

157. 법인이

158. 저촉대상이

159. 되며

160. 모든

161. 법인이

162. 운영하는

163. 웹사이트가

164. 웹
접근성을

165. 준수

166. 하여야

167. 합니다.
e-Accessibility
_영국

168. 정부의

169. inclusive web design principle

170.
단지

171. 장애인의

172. 인터넷

173. 사용을

174. 가능하게

175. 하는

176. 것에

177. 대한

178. 것이

179. 아니라,
모든

180. 사람에게

181. 훌륭한

182. 인터넷

183. 경험을

184. 가능하게

185. 하는

186. 원칙이다.

187.
“웹의

188. 힘은

189. 그것의

190. 보편성에

191. 있다” _팀

192. 버너스리

193. 7 Principles of UD

194.
by NC State University
(Inclusive Web Design 의

195. 10대원칙

196. by Sandi Wassmer)
01

197.
공평한

198. 사용

199. (equitable use)
가능할

200. 경우

201. 똑같게, 그렇지

202. 않을

203. 경우

204. 동등하게.
02

205.
사용상의

206. 융통성

207. (flexibility in use)
다양한

208. 생활환경

209. 조건에서도

210. 정확하고

211. 자유롭게

212.
03

213.
간단하고

214. 직관적인

215. 사용

216. (simple and intuitive use)
직감적으로

217. 간결하고, 피드백이

218. 있는가? , 좋은

219. 디자인은

220. 최소한의

221. 디자인
04

222.
인지의

223. 용이

224. (perceptive information)
정보구조가

225. 간단하고, 복수의

226. 전달수단

227.
05

228.
오류에

229. 대한

230. 포용력

231. (tolerance for error)
사고를

232. 방지하고, 잘못된

233. 명령에도

234. 원래

235. 상태로

236. 쉽게

237. 복귀가

238. 가능한가?
06

239.
적은

240. 물리적

241. 노력

242. (low physical effort)
무리한

243. 힘을

244. 들이지

245. 않고

246. 자연스런

247. 자세로

248. 사용이

249. 가능한가

250. ?
07

251.
접근과

252. 사용을

253. 위한

254. 충분한

255. 공간

256. (size and space for approach and use)

258. 사용성의

259. 5가지

260. 속성

261.
by Jakob nielsen(제이콥

262. 닐슨)

263.
학습성

267. (Learnability)
_시스템은

268. 학습하기

269. 쉬워야

270. 한다

271.
효율성

275. (Efficiency)
_일단

276. 학습하면

277. 더

278. 높은

279. 생산성을

280. 낼

281. 수

282. 있어야

283.
기억성

287. (Memorability)
_한번만

288. 학습하면
„오류

295. (Error)
_낮은

296. 오류, 복구

297. 용이
만족

304. (Satisfaction)

305.
_사용하기에

306. 즐거워야

308. 한다.

309. 10 Usability Heuristics

310.
by Jakob nielsen(제이콥

311. 닐슨)

312.
01

313.
시스템

314. 상태의

315. 가시성

316. (Visibility of system status)
실세계와

317. 시스템의

318. 일치

319. (Match between system and the real world)
사용자

320. 조작

321. 및

322. 자유도

323. (User control and freedom)

324.
일관성과

325. 표준화

326. (Consistency and standards)

327.
05

328.
실수의

329. 예방

330. (Error prevention)

331.
기억보다

332. 인식

333. (Recognition rather than recall)

334.
유연성과

335. 효율성

336. (Flexibility and efficiency of use)

337.
미적인, 최소한의

338. 디자인

339. (Aesthetic and minimalist design)
실수에

340. 대한

341. 사용자의

342. 인식,진단,복구를

343. 도움

344. (Help users recognize, diagnose, and recover from errors)
10

345.
도움말과

346. 문서화

347. (Help and documentation)

349. 옵션이

350. 많아지면

351. 선택이

352. 힘들어

353. 진다.
- Hick’s Law

355. 타겟이

356. 작으면

357. 누르기

358. 힘들다 - Fitts’s Law

360. Number the steps
- Step 에

361. 숫자를

362. 추가하거나, 상태바로

363. 교체
- 폼의

364. 상단에

365. 위치하도록

366.
Id Password
- 주요

367. instruction 은

368. 입력받기

369. 전에

370. 표시
- 에러메시지는

371. inline

372.
HealthCare.gov’s Account Setup: 10 Broken Usability Guidelines by JEN CARDELLO

373. vs

375. Barnes Noble Nook, error message in Action Sheet;
Square, error message in dialog

376.
Inline feedback for user name availability

377.
Mobile Design Pattern Gallery, O’REILLY

378. Shake animation feedback
Collecting Payment Information
Within a Single Input

379. Top 10 Mistakes in Web Design
by JAKOB NIELSEN

380. Google 음성

381. 검색

382. 및

383. 답변
Google Calendar

384. Horizontal labels can end up truncated

385.
Vertical labels and watermark label

386.
Mobile Design Pattern Gallery, O’REILLY

387. Transparency invitation

388.
Tour invitation help

389.
Mobile Design Pattern Gallery, O’REILLY

390. Using the sound vibration feedback

391.
Google racer, rollit with html5 web audio api

393. 모두가

394. 훌륭한

395. 사용자

396. 경험을

397. 얻을

398. 수

399. 있는

400. 웹에

401. 대한

402. 고민이

403. 필요
이제는

404. 통합적

405. 디자인

406. 사고가

407. 필요

408. !
포괄적인

409. 디자인을

410. 할

411. 때
부모님이

412. 사용할

413. 수

414. 있을까

415. ?
애들도

416. 사용이

417. 가능한가

418. ?
장애인이나

419. 장애적인

420. 상황에서

421. 사용

422. 가능한가

423. ?

424. 모바일구축

425. 사례

426.
구분
발주처
사업명
ING생명

427.
ING생명

428. Customer

429. 모바일

430. 웹

431. /

432. APP,

433. e-learning

434. 모바일

435. APP

436.
롯데카드

437.
스마트롯데

438. 모바일

439. 웹

440. /

441. APP

442.
아모레퍼시픽

443.
아웃백

444.
삼성화재

445.
동부화재

446.
KCB

447.
Mobile We
b
/ App
모바일

448. 쇼핑몰

449.
아웃백

450. 모바일웹

451. /

452. APP

453.
삼성화재

454. 모바일

455. 웹

456. /

457. APP

458.
스마트

459. 영업지원

460. 컨텐츠

461. 및

462. 길라잡이

463. APP

464.
올크레딧

465. /

466. 하우머니

467. 모바일웹

468.
IBK

469. 기업은행

470.
IBK

471. 모바일웹

472.
IBK

473. 스마트

474. 터치

475. APP

476.
IBK카드

477. 모바일APP

478. /

479. IBK

480. 퇴직연금

481. 모바일

482. APP

483.
LIG손해보험

485.
LIG손해보험

486. 모바일

487. 웹

488.
올림푸스

489.
엠넷

490.
현대카드

491.
현대캐피탈

492.
ING생명

493.
Mobile
SFA
한화손해보험

494.
올림푸스

495. 모바일

496. 웹

497.
슈퍼스타K

498. 3

499. 모바일

500. 웹

501.
현대카드

502. iPhone

504. 안드로이드

505. APP,

506. 현대카드

507. M포인트몰

508. 아이폰

509. APP,

511.
현대카드

512. M포인트몰

513. 아이

514. 폰

515. APP,

516. 현대카드

517. 슈퍼시리즈

518. 통합

519. APP

520.
현대캐피탈

521. iPhone

523. 안드로이드

524. APP

525.
모바일

526. 영업지원

527. 시스템

528. UX/UI

529. 컨설팅

530. 디자인

531.
한화손해보험

532. Mobile

533. SFA

534. 디자인

535.
교보생명

536.
모바일

537. 영업지원

538. 시스템

539. UX/UI

540. 디자인

541.
삼성증권

542.
은퇴설계

543. 시스템

544. 구축(Web

545. Version

547. Tablet

548. Version)

550. 감사합니다.

551.
박천수

552. 그룹장

553.
pcs@pulipinc.com