간단한 HTML이 왜 공공 서비스와 중요한 웹 정보 전달에 강력한지 보여주는 실제 이야기와 사례.
Terence Eden’s Blog테마 전환기:🌒 다크 🌞 라이트 📰 eInk 💻 xterm 🥴 Drunk 👻 Nude ♻️ 재설정
HTML5웹WeekNotes일 · 댓글 58개 · 700단어 · 조회수 약 70,668회
이 이야기는 제가 여러 콘퍼런스에서 해왔던 것입니다. 하지만 전반적인 상황 때문에, 여기서 다시 들려드리면 좋겠다고 생각했습니다.
몇 년 전 저는 런던의 한 주거급여 사무소에서 정책 연구를 하고 있었습니다. 그런 곳은 하나같이 전혀 사랑스럽지 않습니다. 벽에는 가정폭력을 피해 도망치는 사람들을 위한 도움 서비스를 안내하는 포스터들이 붙어 있어 그나마 조금 밝아 보입니다. 문 앞의 경비원들은 들어오는 사람 누구에게나 조심스럽게 무심합니다. 공기에는 파트너들 사이의 긴장된 대화가 가득하고, 그 위를 아이들의 날카로운 울음소리가 덮어버립니다.
한가운데에 젊은 여성이 딱딱한 플라스틱 의자에 앉아 있습니다. 그녀 주위에는 자신이 가진 모든 소지품이 들어 있는 캔버스 가방들이 놓여 있습니다. 지금 감정적으로 아주 좋은 상태로 보이지는 않습니다. 그녀 손에는 게임기가 꼭 쥐어져 있습니다. PlayStation Portable입니다. 그녀는 그것을 뚫어지게 바라보며 Candy Crush로 세상을 차단하고 있습니다.
적어도, 저는 그렇게 생각했습니다.
그녀 뒤를 지나가며 게임기 화면을 흘끗 봤는데, 저는 그 화면을 알아봤습니다. 그녀는 무료 WiFi에 연결해 주거급여에 관한 GOV.UK 페이지를 보고 있었습니다. 과일을 썰고 있는 게 아니라, 지식으로 자신을 무장하고 있었던 것입니다.
PSP의 웹 브라우저는 좋게 말해도 형편없습니다. 느리고, 메모리가 자주 바닥나며, 한 번에 탭도 3개밖에 열 수 없습니다.
하지만 GOV.UK 페이지는 단순한 HTML로 작성되어 있습니다. 가볍게 동작하도록 설계되어 있어서 형편없는 브라우저에서도 작동합니다. 그래야만 합니다. 이것은 모두를 위한 것이니까요.
모든 사람이 큰 모니터를 갖고 있는 것도 아니고, 테라플롭을 태워가며 돌아가는 멀티코어 CPU를 가진 것도 아니며, 광대역 인터넷 연결을 갖춘 것도 아닙니다.
사진가 Chase Jarvis는 "최고의 카메라는 당신 곁에 있는 카메라다"라는 말을 만들었습니다. 중요한 순간에 형편없는 즉석카메라라도 손에 들고 있는 편이, 세상 최고의 카메라가 차 안에 잠겨 있는 것보다 낫다는 뜻이었습니다.
웹 브라우저도 마찬가지입니다. 스마트 TV가 있다면, 아마 형편없는 브라우저가 들어 있을 것입니다.
TV에 표시된 Twitter의 게스트 모드.
내 예전 차에도 내장된 형편없는 웹 브라우저가 있었습니다.
BMW i3의 대시보드. 중앙 디스플레이에 웹 브라우저가 있다.
둘 다 사용하기 괴롭지만, 작동은 합니다!
노트북과 휴대폰을 둘 다 도난당했다면, 여러분이 가진 최악의 브라우저를 통해 온라인 생활을 얼마나 쉽게 이어갈 수 있을까요? 온라인으로 보험 청구를 해야 한다면, 작성할 수 있는 단순한 HTML 양식을 받게 될까요, 아니면 렌더링조차 안 되는 DOCX를 받게 될까요?
PDF나 끔찍하게 복잡한 웹사이트에 갇혀 있다는 이유만으로, 여러분은 어떤 중요한 정보나 서비스를 이용하지 못하고 있나요?
여러분은 공공 서비스를 개발하고 있나요? 또는 사람들이 절박하게 도움이 필요할 때 접속할지도 모르는 시스템을 만들고 있나요? 평범한 HTML은 작동합니다. 약간의 단순한 CSS만 있어도 보기 괜찮아집니다. JavaScript는 아마 불필요하겠지만, 점진적 향상을 위해 사용할 수는 있습니다. MB당 요금을 내는 사람들도 이미지가 무엇을 위한 것인지 이해할 수 있도록 이미지에 대체 텍스트를 추가하세요. 그리고, 아시다시피 접근성 때문이기도 합니다.
불편한 장소의 불편한 의자에 앉아, 불편할 정도로 작은 화면과 불편할 정도로 낡은 웹 브라우저를 들여다보세요. 여러분이 만든 웹사이트는 얼마나 쓰기 쉬운가요?
나중에 저는 그 젊은 여성과 잠깐 이야기를 나눴습니다. 그녀는 부모에게 쫓겨났고, 친구들이 주거급여 사무소까지 가는 버스비를 모아줬다고 했습니다. 직원들이 얼마나 도움이 되었는지에 대해서는 칭찬밖에 하지 않았습니다. PSP는 형에게서 물려받은 것이었고, 웹 브라우저는 어떠냐고 묻자 그녀는 이렇게 답했습니다. "엉망이에요. 그래도 됐어요."
제가 보기엔, 우리가 바랄 수 있는 건 그게 전부입니다.
여기 GOV.UK를 방문한 게임기 관련 통계가 있습니다.
Matt Hobbs (@TheRealNooshu@hachyderm.io) @TheRealNooshu
@TheRealNooshu에게 답글흥미롭게도 게임기로 GOV.UK를 방문하는 사용자가 3,574명 있습니다:
• Xbox - 2,062
• Playstation 4 - 1,457
• Playstation Vita - 25
• Nintendo WiiU - 14
• Nintendo 3DS - 16
20/22
답글 | idiomdrottning.org의 원래 댓글에 답글2021-01-26 16:06
1. 
2. 
3. 

답글 | twitter.com의 원래 댓글에 답글2021-01-26 18:19
답글 | scholar.social의 원래 댓글에 답글2021-01-26 19:19

답글 | twitter.com의 원래 댓글에 답글2021-01-27 00:34

답글 | twitter.com의 원래 댓글에 답글2021-01-27 03:16
1. 
답글 | soc.luciferi.st의 원래 댓글에 답글2021-01-27 09:26
그리고 Angular 같은 단일 페이지 앱은 끔찍해요. 어떤 때는 아예 렌더링이 안 되거나, 클릭해도 작동하지 않는데 왜 그런지 전혀 알 수가 없죠.
제가 links(텍스트 모드 브라우저)에서 쓸 수 없으면, 제 기준에선 망가진 겁니다. 이게 극단적이라는 건 알지만, 원래 웹은 그런 걸 위해 존재했잖아요. 답글2021-01-27 10:46
답글 | twitter.com의 원래 댓글에 답글2021-01-27 12:46

답글 | twitter.com의 원래 댓글에 답글2021-01-27 14:37

답글 | twitter.com의 원래 댓글에 답글2021-01-27 14:56

답글 | twitter.com의 원래 댓글에 답글2021-01-27 14:59

"불편한 장소의 불편한 의자에 앉아, 불편할 정도로 작은 화면과 불편할 정도로 낡은 웹 브라우저를 들여다보세요. 여러분이 만든 웹사이트는 얼마나 쓰기 쉬운가요?" 답글 | twitter.com의 원래 댓글에 답글2021-01-27 15:26

답글 | twitter.com의 원래 댓글에 답글2021-01-27 16:14
많은 사람이 지적한 TLS 문제 때문에, 로그인이나 개인정보가 중요한 경우를 제외하고는 제 사이트에 https를 강제하지도 않습니다. 모든 것이 다 보안이 필요하지는 않으니까요. 특히 접근성이 필요한 것들은요. 답글2021-01-27 17:08
1MB Club https://1mb.club/ 답글2021-01-27 18:00
답글 | tabletop.social의 원래 댓글에 답글2021-01-27 19:24

shkspr.mobi/blog/2021/01/t… 답글 | twitter.com의 원래 댓글에 답글2021-01-27 20:12
1. 

답글 | twitter.com의 원래 댓글에 답글2021-01-27 20:35

저도 이 글에 크게 동의합니다. 그리고 이건 공공 서비스만의 문제가 아니라, "애플리케이션"이라기보다 "문서"에 가까운 모든 것에 해당한다고 생각해요. 사실 웹의 상당수가 그렇죠. 답글 | twitter.com의 원래 댓글에 답글2021-01-27 20:41

답글 | twitter.com의 원래 댓글에 답글2021-01-28 01:33

답글 | twitter.com의 원래 댓글에 답글2021-01-28 08:47

danluu.com/web-bloat/ 답글 | twitter.com의 원래 댓글에 답글2021-01-28 09:12

답글 | twitter.com의 원래 댓글에 답글2021-01-28 10:15

중요한 건 가장 번쩍이는 걸 만드는 게 아니라, 여러분의 것이 쓸 수 있도록 만드는 겁니다. 모두가 접근할 수 있도록요. 사용자 대상 서비스를 만든다면, 대충 Wii 같은 데서도 테스트해봐야 합니다. 답글 | twitter.com의 원래 댓글에 답글2021-01-28 10:26

답글 | twitter.com의 원래 댓글에 답글2021-01-28 13:55

답글 | twitter.com의 원래 댓글에 답글2021-01-28 19:29
답글 | scholar.social의 원래 댓글에 답글2021-01-28 21:37

via @dajbelshaw via @johnjohnston 답글 | twitter.com의 원래 댓글에 답글2021-01-29 20:12

여기에 대해 사람들이 단계적 기능 축소graceful degradation라느니 자바스크립트 없는 웹 개발이라느니 그런 기술적인 논의가 많지만, 나는 GOV.UK라는 서비스를 가능케 한 정부 디지털 서비스(GDS, gds.blog.gov.uk)가 훨씬 중요하다 생각한다. 답글 | twitter.com의 원래 댓글에 답글2021-02-11 10:27
답글 | css-tricks.com의 원래 댓글에 답글2021-02-13 19:37
답글 | news.hada.io의 원래 댓글에 답글2021-02-14 16:31
1. 

답글 | twitter.com의 원래 댓글에 답글2021-07-15 18:01
답글 | lexoral.com의 원래 댓글에 답글2022-03-03 10:01


@blog 이것은 핵심 기능을 강조하면 아주 쉽게 피할 수 있는, 현대의 비대해진 웹사이트가 만들어내는 문제를 보여주는 환상적인 현실 사례입니다. 기본 레이아웃을 오래된 브라우저의 최소 기능을 가정하고 만들면 반응형 웹 디자인도 오래된 브라우저를 고려할 수 있습니다.https://www.sitepoint.com/support-old-browsers-responsive-web-design/
https://www.w3schools.com/Css/css_rwd_intro.asp 답글 | infosec.exchange의 원래 댓글에 답글2023-12-28 15:58
우리가 설계하고 만들어야 할 대상은 바로 그런 사람입니다. 답글 | glammr.us의 원래 댓글에 답글2024-09-17 17:47
답글 | morgan.zoemp.be의 원래 댓글에 답글2024-09-18 10:58
답글 | dkolf.de의 원래 댓글에 답글2025-06-24 18:50
답글 | 원래 댓글에 답글2026-06-10 12:45
노트북과 휴대폰을 둘 다 도난당했다면 – 여러분이 가진 최악의 브라우저를 통해 온라인 생활을 얼마나 쉽게 이어갈 수 있을까요? 온라인으로 보험 청구를 해야 한다면 – 작성할 수 있는 단순한 HTML 양식을 받게 될까요, 아니면 렌더링조차 안 되는 DOCX를 받게 될까요? PDF나 끔찍하게 복잡한 웹사이트에 갇혀 있다는 이유만으로, 여러분은 어떤 중요한 정보나 서비스를 이용하지 못하고 있나요? 여러분은 공공 서비스를 개발하고 있나요? 또는 사람들이 절박하게 도움이 필요할 때 접속할지도 모르는 시스템을 만들고 있나요? 평범한 HTML은 작동합니다.
여러분도 눈치챘을지 모르겠지만, 저는 어젯밤 이 사이트의 디자인을 4년 만에 바꿨습니다. 예전에는 미적으로 pleasing한 테마를 추구했지만, 그것들이 얼마나 많은 데이터를 쓰고 얼마나 느린지 깨닫고 나서 생각이 바뀌었어요. 고마워요 Lighthouse. 이보다 더 “깔끔한” 테마도 있겠지만 아직 진행 중입니다. 그래도 HTML과 가독성은 언제나 제 우선순위일 겁니다. 사이트가 HTML보다 JavaScript에 의존하면, 그게 깨졌을 때 화면은 텅 비게 됩니다. HTML은 “깨져도” 여전히 작동할 수 있습니다. 5페이지짜리 사이트를 위해 백만하고도 하나의 JavaScript 라이브러리에 믿음을 걸기 전에 그 점을 생각해보세요.함께 보기: Tatiana Mac on Hacking Digital Style Guides for Accessibility관련 2021-01-30 22:24
모든 댓글은 검토를 거치며 즉시 게시되지 않을 수 있습니다. 이메일 주소는 공개되지 않습니다.
댓글:
허용되는 HTML 요소 보기:
<a href="" title="">
<abbr title="">
<acronym title="">
<b>
<blockquote cite="">
<br>
<cite>
<code>
<del datetime="">
<em>
<i>
<img src="" alt="" title="" srcset="">
<p>
<pre>
<q cite="">
<s>
<strike>
<strong>
이름(필수): 이메일(필수): 웹사이트(선택):
자신의 웹사이트에서 응답하려면, 이 글에 대한 링크를 포함한 글을 작성한 다음 여기 이 페이지의 URL을 입력하세요. WebMentions에 대해 더 알아보기.
글의 URL/고유주소
검색어:
8월
9월
10월
11월
12월
2025
2024
2023
2022
2021
2020
2019
2018
2017
2016
2015
2014
2013
2012
2011
2010
2009
2008
3월 게시물 2개4월 게시물 3개5월 게시물 2개 6월
7월 게시물 1개8월 게시물 3개9월 게시물 1개10월 게시물 3개11월 게시물 2개12월 게시물 1개
2월
3월
4월
5월
6월
7월
8월
9월
10월
2월
3월
4월 게시물 1개 5월
6월
7월
8월
9월
10월
11월 게시물 1개 12월
2월
3월 게시물 1개 4월
5월
6월
7월
8월
9월 게시물 1개 10월
11월
12월
3월
4월
5월 게시물 5개6월 게시물 3개7월 게시물 1개 8월
9월
10월
11월
12월
2월
3월 게시물 2개 4월
5월
6월
7월
8월
9월
10월
11월
12월
2월 게시물 1개 3월
4월 게시물 3개 5월
6월
7월
8월
9월
10월
11월
12월
2월
3월
4월
5월
6월
7월 게시물 1개 8월
9월
10월 게시물 1개 11월
12월
2월
3월 게시물 1개 4월
5월
6월
7월
8월
9월
2월
3월
4월
5월
6월
7월
8월
9월 게시물 1개 10월
11월
2월
3월
4월
5월 게시물 1개 6월
7월
8월
9월
10월
11월
12월
3월
4월
5월
6월
7월
8월
9월
10월
11월
12월
2월
3월 게시물 1개 4월
5월 게시물 1개 6월
7월
8월
9월
10월
11월
12월
2월
3월
4월 게시물 1개 5월
6월
7월
8월
9월
10월
11월
12월
2월
3월
4월
5월
6월 게시물 1개 7월
8월 게시물 1개 9월
10월
11월
12월
2월
3월
4월
5월
6월
7월
8월
9월
10월
11월
2월
3월
4월
5월
6월
7월
8월
9월
10월 게시물 1개 11월
12월
노드를 드래그해서 재배치하세요.
ISSN 2753-1570ⅯⅯⅩⅩⅥ ⓒ Terence Eden