Graceful Degradation

Graceful Degradation 은 “우아한 낮춤”, “적절한 퇴보”, “성능 저하” 등 여러가지로 번역되고 있습니다.

의미는, 먼저  최신의 기술 기반 혹은 최신의 기기에서 동작하는 기능을 만들고 나서 오래된 기술 기반 혹은 오래된 기기에서도 유사하게 (성능을 낮춰서라도) 동작하도록 조치하는것을 말합니다. 이런 의미에서 위의 번역들은 모두 틀리지 않다고 할 수 있겠습니다. (광의적으로 “성능 저하”도 틀리지는 않지만 웹 개발의 관점에서 보면 사용자 경험을 낮춰서라도 기능을 지원하는 것이기 때문에 “성능 저하”는 맞지 않을 것 같네요.)

※ 컴퓨터 시스템에서의 허용 오차 시스템(Fault tolerant system) 과 유사하다고 할 수 있습니다. 허용 오차 시스템은 프로그램 구동 환경에 문제가 생겨도 프로그램이 정지하지 않고 성능을 낮추면서 프로그램 구동을 지속하도록 하는 시스템을 말합니다.

우리가 잘 알고 있는 예를 들자면 IMG 태그에 alt 속성을 지정하는걸 들 수 있겠네요. 이미지를 표시하는 브라우저에서는 이쁘게 이미지를 표시하지만 텍스트 브라우저라든지 이미지를 렌더링하지 못하는 브라우저에서는 alt 속성에 부여한 대체 텍스트를 표시하도록 구성 합니다. (이 예에서는 성능을 낮춘다기보다 사용자 경험을 낮춰서라도 … 의 표현이 어울리겠네요. )

javascript 관점에서 Graceful Degradation 을 보자면 NOSCRIPT 라는 태그를 들 수 있습니다. 보통 NOSCRIPT 는 두가지 방식으로 사용됩니다.

NOSCRIPT (대체 콘텐츠 제공)

<script type="text/javascript" src="slide.js"></script>
<noscript>
<ul>
<li><a href="some url"><img src="1.jpg" alt="image 1"/></a></li>
<li><a href="some url"><img src="2.jpg" alt="image 2"/></a></li>
<li><a href="some url"><img src="3.jpg" alt="image 3"/></a></li>
</ul>
</noscript>

위의 예제에서 slide.js 는 서버로부터 이미지 3개를 받아 사용자 경험이 풍부한 스라이드 쇼를 만드는 스크립트입니다. (있다고 칩시다 –;) 바로뒤에 NOSCRIPT 태그를 사용해 스크립트가 동작하지 않는 브라우저에게 대신할 수 있는 콘텐츠를 제공하고 있습니다.

꽤 괜찮은 방법이라고 생각합니다. 자바스크립트가 구동되지 않는 환경에서도 콘텐츠에 접근할 수 있으며 IMG에 alt 를 제공하고 링크까지 걸려 있어 검색엔진도 좋아하는 형태입니다.

이 예에서의 문제는 NOSCRIPT 태그의 근본적인 문제입니다. 브라우저는 자바스크립트를 지원하지만 자바스크립트 파일을 통제하는 네트웍 환경 (보안상의 이유로?)에 있거나 자바스크립트를 다운로드 하지 못한 경우 사용자는 아무것도 볼 수 없게 됩니다.

NOSCRIPT (자바스크립트를 켜세요 ?)

<script type="text/javascript"  src="slide.js"></script>
<noscript>
<p>자바스크립트를 지원하는 브라우저를 사용하거나, 자바스크립트를 활성화 시켜 주세요</p>
</noscript>

우리는 사용자가 왜 자바스크립트가 동작하지 않는 브라우저를 사용하는지, 자바스크립트를 비활성화 시켰는지 알지 못합니다. 그런 상황에 사용자에게 “이래라, 저래라” 하는것은 좋은 방법이 아닙니다. 그리고 위 지시 문은 사용자가 자바스크립트가 뭔지 알고 있고, 자바스크립트를 활성화 시킬 수 있다고 가정하고 있습니다. 하지만, 태반의 사용자가 이런 사항 잘 알지 못합니다. 순전히 개발자의 관점에서 작성된 겁니다.

반성합니다 !! 저도 두번째 예제 코드를 무수히 만들었습니다. 변명을 하자면 KADO-WAH 초기 버전에서 (지금은 안 그렇죠?) SCRIPT 태그 이후에 NOSCRIPT 가 없는 경우 오류 (경고?)로 잡았었습니다. 그래서 기계적으로 SCRIPT 태그가 있는 곳에 NOSCRIPT (자바스크립트를 켜세요) 를 넣었고, 이게 또 HEAD 안에서는 P 태그 등이 올 수 없기 때문에 모든 SCRIPT/NOSCRIPT 태그를 BODY 밑으로 내리는 작업을 했습니다.  반성합니다.

Graceful Degradation 접근 방법

위의 두가지 예제를 보면 구현 모양은 다르지만 동일한  Graceful Degradation 접근 방법을 사용하고 있습니다.

자바스크립트로 slide.js 라는 사용자 경험 풍부한 기능을 먼저 만들고 자바스크립가 지원되지 않는 환경을 위해 NOSCRIPT를 이용해 추가(개선) 작업을 하고 있습니다. 이것이 뒤에서 말하려는 Progressive Enhancement 과 대조되는 부분입니다.

Progressive Enhancement

“점진적 향상” 이라고 번역할 수 있겠습니다.

말 그대로 기능을 점진적으로 향상시키는것을 말합니다. 바로 웹과 결부해서 말하자면

1. HTML 로만 콘텐츠를 구성합니다. (CSS 를 지원하지 않는 브라우저에서도 접근 가능합니다.)
2. CSS 로 시각적인 향상을 꾀합니다. (HTML은 이미 구성되었으므로 외부 CSS파일이 적당하겠네요.)
3. Javascript 를 적용해 사용자 경험을 향상 시킵니다. (역시 외부 js 파일을 두고 이벤트를 가로채는 방법으로 사용해야겠네요)

1.2.3 의 순서로 점차적으로 향상 시키고 있습니다. 이렇게 구현했을 때 나중에 나온 기술(css, javascript)들이 지원되지 않더라도 콘텐츠에 접근하는데 무리가 없습니다. 추가로 얻을 수 있는 장점은 이 방법을 사용하면 밑에 예제를 봐도 알겠지만 구조, 표현, 동작이 자연스럽게 분리된다는 점입니다. 단계적으로 html, css, js 가 추가되기 때문입니다. (솔깃하네요.)

직접 Progressive Enhancement 방법을 사용해 구현을 해 보겟습니다. 예제로는 어느 사이트에나 있는 FAQ를 사용합니다.

1. HTML 구성

<h1>자주답변하는 질문들</h1>
<dl id="faq-list">
<dt>백업파일(*.bak)을 생성하지 않는 방법은?</dt>
<dd>'기본설정'->'파일' 에서 '저장시 백업 파일 생성' 옵션을 제거하시면 됩니다.</dd>
<dt>업그레이드 후 이전 설정이 없어진 경우.</dt>
<dd>이전 버전을 올바르게 설치하지 않은 경우 일어나는 현상입니다. 이런 경우에는 '도구'->'INI 파일 디렉토리' 메뉴 옵션을 실행해서 이전 설정 (*.ini 파일)이 있는 디렉토리를 지정해 주십시오.</dd>
<dt>사용자 정의 stx, acp, ctl 파일을 추가하는 방법은?</dt>
<dd>
<p>*.STX 파일과 *.ACP 파일을 설정하는 방법</p>
<ol>
<li>'기본설정' 대화상자에서 '설정 및 구문강조' 페이지를 선택합니다.</li>
<li>원하는 파일 종류를 선택하거나 원하는 파일 종류가 없는 경우 '추가' 버튼을 누른 후 '파일 확장자' 란에 파일 확장자를 지정합니다.</li>
<li>STX 와 ACP 파일의 완전한 경로를 '구문 파일' 과 '자동 완성' 란에 지정합니다.</li>
</ol>
</dd>
</dl>

위의 FAQ는 에디트플러스 사이트에서 가져왔습니다. FAQ 목록에 DL 을 사용하는게 적절한지는 논외로 하겠습니다. HTML 만 사용했을 때 질문과 답변을 구분할 수 있도록 하는 목록 태그로는 적절하다고 생각해서 사용했습니다.

HTML만 적용된 화면

1단계에서 중용한 건 의미 있는 마크업을 논리적인 순서에 따라 구축하는게 중요하겠습니다. 물론, 이를 만족하기 위해서는 웹 표준을 준수하는게 우선되어야 할거고요.

하지만, 기획팀 으로부터 넘어온 스토리보드, 화면설계와 디자인팀으로 부터 잘려 넘어온 이미지들을 보고 있으면 당최 논리적으로 짜보기가 두려워 집니다. 뭐, 이런걸 잘 하는것도 우리의 능력중의 하나라고 봐야겠습니다. (전 멀었습니다.;;)

2. CSS 적용

body,dl,dt,dd {margin:0; padding:0;}
html {font-size:78%;}
html body {font-size: 1em;}
h1 {border:1px dotted #ccc; background:#eee; margin: 0 0 5px 0; padding:5px; font-size:1.4em;}
dt,dd {border-bottom:1px solid #ccc;line-height:1.5em;}
dt {background:black url(images/q.png) no-repeat left center; color:white; padding:7px 0 7px 25px; cursor:pointer;}
dd {background: #eee; padding:10px;}

CSS 까지 적용된 화면

네, 이쁘지 않은거 압니다. 제 미적감각이 이정도입니다. (사실, 최선을 다하지 않았다고 변명을 … ㅠㅠ)

3. javascript 적용

window.onload = function() {
var selectedQ = 0;
var dts = document.getElementsByTagName('dt');
var dds = document.getElementById('faq-list').getElementsByTagName('dd');
for(var i = 0, n = dts.length; i < n; i++) {
dds[i].style.display = (i == 0) ? 'block' : 'none';
dts[i].idx = i;
dts[i].onclick = function() {
if (selectedQ != this.idx) {
dds[selectedQ].style.display = 'none';
dds[this.idx].style.display = 'block';
selectedQ = this.idx;
}
};
}
};

javascript 까지 적용된 화면

네, 썩 좋지 않은거 압니다. (사실, 돌아가게 만드는게 우선이엇다는 변명을 … ㅠㅠ 정말 오랜만에 mootools 없이 javascript 만들어봤네요;;)

좋지 않은 예이긴 하지만, HTML → CSS → javascript 수순으로 점진적으로 향상시키고 있음을 주목해주세요.

위의 예는 faq.htm 에서 보실 수 있습니다. (ie8, firefox 에서만 테스트 되었습니다.)

정리

구현할 때 “누가 요새 javascript 안되는 브라우저를 쓰겠어?” 라는 생각이 들 정도로 자바스크립트는 대부분의 브라우저에서 지원하고 있는게 사실입니다. 사실, 그냥 막 써도 이로인한 불평(자바스크립트가 안되는 환경에서의 불평)도 들어본적이 없습니다. 아마, 사용자들 스스로가 감내하고 있겠지요. 하지만, 웹 접근성을 생각하고 이를 보장하고자 한다면 자바스크립트에 의존하는 코드를 사용해서는 안되겠습니다. href=”javascript:…” , href=”#” onclick=”" 이러 코드 때문에 얼마나 많은 시간을 웹 접근성 개선을 위해 허비했는지 … Progressive Enhancement  방법을 수행하는게 쉬운것만은 아닙니다. 아마 Graceful Degradation 과 비교해서 시간, 노력 등의 자원을 더 필요로 할겁니다. 기 구축된 사이트를 개선하는 작업에 있어서는 Progressive Enhancement 보다 Graceful Degradation 을 선택하는게 더 현명한 방법일지도 모르겠습니다. 하지만 잊지말아야 할 원칙 하나는 “Web for All”. 팀 버너스 리의

웹의 힘은 그것의 보편성에 있다. 장애에 구애없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다.
(The power of the Web is in its universality, Access by everyone regardless of disability is an essential aspect.)

라는 것이겠지요.

관련 지침

• 3.3.1 (콘텐츠의 선형화) 콘텐츠는 논리적인순서로 제공해야 한다.
• 4.1.1 (마크업 오류 방지) 마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.

이런겁니다. 콤보박스가 나오고 목록에서 항목을 선택하면 새창으로 해당 사이트가 열립니다. 코드는 아래와 같습니다.

<!-- 코드 #1 -->
<p>
관련 사이트 바로가기
<select onchange="if(this.value != '') window.open(this.value);">
<option value="">관련사이트 목록</option>
<option value="http://twitter.com/yangkun7">양군의 트위터</option>
<option value="http://picasaweb.google.com/yangkun7">건이네 웹앨범</option>
<option value="http://www.greenfarm.pe.kr/">푸른농장 (준혁,서영이네)</option>
</select>
</p>

#1. 문제점

• SELECT 양식에 대한 설명이 필요합니다 . (KWCAG 1.0 항목 3.3 온라인 서식 구성)
• 키보드만 이용할 때, 해당 컨트롤로 포커스가 이동하고 이동 키(↓↑)를 이용해 그 목록을 보려 하면 바로 첫 번째 항목의 사이트로 이동해 버립니다. (KWCAG 1.0 항목 2.4 키보드로만 운용 가능)

#1. 개선

1. SELECT 양식에 대한 LABEL 추가
2. onchange 이벤트 제거
3. [이동] 버튼 추가
4. [이동] 버튼 클릭 시 해당 사이트로 이동하도록 변경.

개선된 코드는 다음과 같습니다.

<!-- 코드 #2 -->
<p>
<label for="relSites">관련사이트 바로가기<label>
<select id="relSites">
<option value="">관련사이트목록</option>
<option value="http://twitter.com/yangkun7">양군의 트위터</option>
<option value="http://picasaweb.google.com/yangkun7">건이네 웹앨범</option>
<option value="http://www.greenfarm.pe.kr/">푸른농장 (준혁,서영이네)</option>
</select>
<input type="button" value="이동" onclick="window.open(document.getElementById('relSites').value);"/>
</p>

#2. 문제점

여전히 문제가 남아 있습니다.

• 자바스크립트가 지원되지 않는 환경에서는 위의 기능을 사용할 수 없습니다. (KWCAG 1.0 항목 4.1 신기술의 사용)

#2. 개선

1. SELECT 양식 값을 전달할 수 있도록 FORM 삽입
2. SELECT 양식에 name 설정
3. SELECT 양식 값을 전달할 수 있도록 일반 버튼을 submi 버튼으로 변경
4. 전달받은 URL로 이동할 수 있는 서버측 로직 구성

개선된 코드

<!-- 코드 #3 -->
<p>
<form action="redirect.php" method="post" target="_blank">
<label for="relSites">관련사이트 바로가기<label>
<select id="relSites" name="url">
<option value="http://twitter.com/yangkun7">양군의 트위터</option>
<option value="http://picasaweb.google.com/yangkun7">건이네 웹앨범</option>
<option value="http://www.greenfarm.pe.kr/">푸른농장 (준혁,서영이네)</option>
</select>
<input type="submit" value="이동"/>
</form>
</p>

서버측 코드

<?php
// redirect.php
// 필요하면 카운팅 로직 추가
header('Location: ' . $_POST['url']);
?>

개선점

#3의 코드는 그대로 완벽한 것 같지만 개선의 여지가 남아 있습니다.

• 코드대로 실행하면 선택한 사이트가 새창으로 열리게 되는데 이에 대해 알리는 부분이 없습니다. (KWCAG 1.0 항목 2.6 반응시간의 조절기능)
• 자바스크립트가 사용 가능한 환경에서는 굳이 서버 로직을 거치지 않고 선택한 사이트로 이동하게 하고 싶을 수도 있습니다.

최종 개선 코드

<!-- 코드 #4 -->
<script type="text/javascript">
function gotoUrl(id) {
window.open(document.getElementById(id).value);
return false;
}
</script>
<p>
<form action="redirect.php" method="post" target="_blank" onsubmit="return gotoUrl('relSites');">
<label for="relSites">관련사이트 바로가기<label>
<select id="relSites" name="url">
<option value="http://twitter.com/yangkun7">양군의 트위터</option>
<option value="http://picasaweb.google.com/yangkun7">건이네 웹앨범</option>
<option value="http://www.greenfarm.pe.kr/">푸른농장 (준혁,서영이네)</option>
</select>
<input type="image" src="btn_move.gif" alt="이동 (새창)"/>
</form>
</p>

관련 지침

• (키보드 사용 보장) 모든 기능은 키보드만으로도 사용할 수 있어야 한다.

NARADESIGN:BLOG 에 같은분이  HTML 어떻게 읽는것이 좋을까? 라는 포스트를 발행하셨네요.

이에 대해 “내 맘대로 보는 세상” 을 운영하시는 정태영님 께서는 RE: HTML 어떻게 읽는것이 좋을까? 라는 포스트로 다른 생각을 전하고 있습니다.

저역시, HTML 어떻게 읽는것이 좋을까? 라는 포스트에 트래백을 걸 요량으로 이글을 작성합니다.

일단, naradesign 님은  DIV 태그에 대해서 ‘디비전’이라 읽어야 한다는 이유로

1. ‘디브’라 읽는것은 듣기가 좀 그렇다(?)
2. 비전전문가가 들었을 때 그 의미와 용도를 쉽게 이해할 수 있다.

정도로 들고 있습니다. 1번이야 개인 취향이니 별 이유가 되지 못합니다. 뭐, 동료나 부하 직원들에게는 압박할 수 있는 이유가 되긴 하겠군요.

2번의 이유가 납득이 안갑니다.

일단, 비전문가(HTML을 전혀 모르는)에게 태그 이름을 직접 열거하면서 뭔가 설명하고 있다면, 설명이 잘못 되었다고 생각합니다. 실제로 그런 상황이 있을지도 모르겠고요. 설사, 태그 이름을 직접 거론하면서 설명을 한다쳐도 “디비전 태그”라는 말을 듣고 영어를 알고 있다면, “아, 뭔가를 나누는거구나” 정도로 이해할 수 있지 않겠나 싶습니다.  하지만, 실제 DIV 태그를 거론할 때에는 “뭔가를 나누는” 경우 외에도 많은 경우가 있을겁니다.  정태영님 말씀대로 “용어에 너무 익숙해진 전문가들의 착각” 일겁니다. 비전문가에게는 그가 이해할 수 있는 말들로 설명해야 할겁니다.

그리고 간과하고 계시는 부분이 있는데. HTML = English 라고 가정하신것 같은데. 당연히 알고 계시겠지만 HTML 은 영어로 표기하고는 있지만 Hyper Text Markup Language 입니다. 즉, 사람이 쓰고 브라우저가 이해하는 다른 언어인겁니다. naradesign님의 말씀 대로라면 영어를 주 언어로 사용하는 미국인들은 HTML 을 따로 배울 필요 없이 DIV 가 division 에서 왔다라는것만 알아도 슥슥~ HTML 코드를 만들어내겠네요. 그렇지 않잖아요. 유래한 단어의 뜻은 알지라도 그 의미나 용법이 완전히 다르잖아요. 결국 새로운 언어이기 때문에 새로 배워야 합니다. 물론, 교육 과정에서 DIV 는 division, ABBR 은 abbreviation의 줄임말이다 라는것을 알려주면 교육 효과가 상승하는 이점은 있겠지만 그렇다고 그게 DIV 태그를 ‘디비전’이라고 읽어야할 이유가 되지는 않는다고 생각합니다. 게다가, 여기는 주변에 영어 사용을 꺼리는 사람도 많은 “한국”이잖아요.

(추가로, 위의 교육방법은 미국이나 우리나라의 대학 정도에서 효과가 있으면 있었지 우리나라의 나머지 대상들에게는 역효과가 있지 않을까요 ? 말씀대로 누구나 쉽게 배울 수 있는 HTML 을 지향하는데 “ABBR 은 abbreviation에서 왔으면 발음은 ‘어브리비에이션’ 입니다. 용도는 …..” 영어 공부도 같이해야 하는 상황이 될 것 같네요. 거리가 더 멀어집니다.)

요컨데, HTML 은 영어가 아닌 다른 언어입니다. 그 시작에서 읽는 방법이 명시되지 않았다면 의사소통이 가능한 범위 안에서 자유롭게 읽을 수 있다는게 제 생각입니다. 미쿡에서도 그렇게 하고 있을거라 감히 예상하고요. 그래서 현재 작업하고 계시는 HTML 의”권장 표현”은 주로 커뮤니케이션 하시는 사내에서 하시는게 적당할거라고 생각합니다. “여러가지 읽는 방법”으로 변경해, 다양하게 읽히고 있는 발음들을 모으시는게 더 유의미 하지 않나 생각합니다.

덧)

HTML 도 HTML이지만, 아스키 기호들은 어떻게 읽고 계신지 궁금합니다. 저는 이부분이 더 혼란스러운 것 같아요.

아래는 아스키 기호들에 대해 지금까지 들어봤던 표현들을 묶어 봤습니다. 여러분은 어떻게 읽으시나요 ?

• |  : 수직 바, 오어, v-bar, vertical var, 원 표시 위에꺼 (전화상으로 듣고 오호~), 파이프 (정태영님 제보)
• & : 앤드, 앰퍼샌드, 눈사람 (귀엽죠), 앰프 (& 를 아시는분)
• * : 별표, 별, 아스타리스크, 와일드카드
• < : 꺽쇠, 여는 꺽쇠, 꺽쇠 열고, 엘티 (오~ &lt; 이거 알어…)
• > : 꺽쇠, 닫는 꺽쇠, 꺽쇠 닫고, 쥐티 (ㅋ)
• ~ : 물결, 틸드 (나만 이렇게 읽음)
• @ : 골뱅이, 앹
• ^ : 위 꺽쇠, 제곱 (–;)
• ” : 큰 따옴표, 더블퀕, 쿼테이션 마크
• : : 땡땡, 콜론
• # : 샾, 우물정 (옛날 컴퓨터 학원에서…)
• - : 다시, 대시, 하이픈
• _ : 밑줄, 언더바, 언더스코어
• ` : 물결 밑에꺼, 빽퀕 (얼마전에 찾아보고 알았음)

이런 아스키 코드 공식 명칭표가 있나요 ?

참고로 정태영님께서 링크 걸어주신 프로그래밍에 쓰이는 영단어와 발음 문제. 쓰레드도 죽~ 보면 참고가 될것 같습니다.
※ database : 다타바세 (압권이군요 ㅎㅎ)

에디트플러스는 HTML 태그를 편하게 입력할 수 있도록 하는 HTML 도구모음을 제공하고 있습니다. 각 버튼을 클릭하면 해당 되는 태그가 입력되고, 내용을 선택한 상태에서 도구모음 버튼을 클릭하면 해당 내용을 태그로 감싸줍니다. 이 글에서는 기본적으로 정의된 HTML 도구모음의 버튼 태그를 변경하는 방법을 소개합니다.

HTML 도구모음은 …

에디트플러스의 HTML 도구모음은 2가지 있습니다. 설정 > 일반에서 XHTML 태그 사용을 선택했을 때와 선택하지 않았을 때 이렇게 2가지 입니다. 차이점은 XHTML 태그 사용을 선택했을 때는 XHTML 표준에 맞는 태그를 넣어줍니다. <br/>, <img …/> 과 같이 말이죠.

HTML 도구모음 정의파일

HTML 도구모음에서 제공하는 태그들은 특정 파일들에 정의되어 있습니다. 그 파일은 에디트플러스가 설치된 디렉토리 혹은 지정한 설정 디렉토리에 htmlbar.acp 와 xhtmlbar.acp 이렇게 두개의 파일입니다. XHTML 태그 사용을 선택했을 때는 xhtmlbar.acp 를 사용하며 그렇지 않은 경우에는 htmlbar.acp 파일을 사용합니다.

정의 파일 내용

xhtmlbar.acp 파일의 내용은 이렇습니다.

#TITLE=XHTML
; EditPlus Auto-completion File v1.0 written by ES-Computing.
; This file is intended to be used by HTML Toolbar of EditPlus.
; <WARNING>
; This file is required for EditPlus to run correctly.
; You can modify only the content of each entry.
; Do not add/remove any entry.
; Do not modify title of each entry.

#CASE=y

#T=B
<b>^!</b>
#T=I
<i>^!</i>
#T=U
<u>^!</u>
<후략>

• #T=B : 각 버튼을 의미합니다.
• 그 밑에 내용이 에디터에 입력 됩니다.
• 선택한 내용이 있을 때는 ^! 부분이 선택된 내용으로 대체 됩니다.
• 선택한 내용이 없을 때는 해당 태그가 입력되고 커서가 ^! 위치에 놓입니다.

수정 예

#T=B
<strong>^!</strong>
#T=I
<em>^!</em>

등과 같이 수정하면 되겠습니다.