7장 순수 하이퍼미디어 설계

왜 HTML인가?

  • HTML은 세상에서 가장 인기 있는 하이퍼미디어 유형이다.

HTML의 기능

  • 텍스트 문서의 중첩 구조를 표현할 수 있다.
  • 택스트 콘텐트와 기타 태그를 표현할 수 있다.

하이퍼미디어 컨트롤

  • HTML은 다음과 같은 하이퍼미디어 컨트롤을 내장하고 있다.
    • <link>, <a>, <img>, …

플러그인 애플리케이션 의미 체계

  • HTML은 사람이 이해할 수 있는 문서를 다룬다.
  • HTML은 원래의 용도 외의 목적으로 사용하기가 매우 쉽다.
  • HTML4는 세 가지 일반 속성을 더 가진다.
    • rel : 연결되는 리소스와 지금 리소스 사이의 관계를 정의
    • id : 문서 내 한 요소를 식별하는 고윳값
    • class : 태그의 애플리케이션 의미 체계를 전달하는 용도(속하는 클래스를 정의)

마이크로포맷

  • hCard같은 마이크로포맷은 HTML에 추가적인 애플리케이션 의미 체계를 더하게 해준다.

hMaze 마이크로포맷

  • 새로운 hCard같은 마이크로포맷을 정의하는 것은 쉽다. 몇개의 클래스의 의미만 정의하면된다.

마이크로데이터

  • 마이크로데이터는 HTML 5용으로 마이크로포맷을 다듬은 것이다.
  • 다섯 개의 새로운 속성이 있다
    • itemprop : 마이크로포맷이 class 속성을 사용하던 방식으로 사용
    • itemscope : boolean. 태그에 마이크로데이터가 있는가를 표시
    • itemtype : 해당 마이크로데이터의 의미를 확인할 수 있는 곳
    • itemid
    • itemref
  • 마이크로포맷을 사용할땐 class=hCard 가 붙은 태그 내부가 모두 hcard 포맷임을 알 수 있다.
  • 마이크로데이터는 그렇지 않다. itemscope 내부는 itemtype 이 가리키는 문서로 작성되어 있다고 표현된다.
  • 예시
1
2
3
4
5

<div itemscope itemtype="https://www.naver.com/...">
	<div itemprope="cell">
	...
	</div>
</div>
  • 마이크로포맷은 rel로 연결 관계를 정의할 수있지만 마이크로데이터는 그렇지 않다.
    • itemtype 문서에는 나타날 것.

리소스 상태 변경하기

  • 스위치를 누르면 리소스의 상태와 관계가 변경된다고 해보자
  • 이 스위치를 조작하는 요청은 하이퍼미디어로 어떻게 구현될까?

폼에 애플리케이션 의미 체계 추가하기

  • rel 속성은 두 리소스 사이의 관계를 나타낸다.
  • ‘리소스 상태를 변경하라’는 의미를 가진 rel 값을 만들 수 있을까?
  • 리소스들이 나열되고 그 리소스를 요청하는 것은 GET 요청이다.
  • 하지만 리소스 상태 변경은 GET 요청을 쓸 수 없다. POST를 써야한다.
  • 이때 HTML이 정의한 하이퍼미디어 폼을 사용하면 된다.
  • 대신, rel 속성은 지원하지 않는다.
  • 이 switch 클래스도 hMaze 마이크로포맷에 추가할 수 있겠다.
1
2
3

<form action="/switches/4" method="post">
	<input class="flip" type="submit" value="Flip it!"/>
</form>

하이퍼미디어의 대체재는 미디어다

  • 요즘 API 문서들에는 많은 메서드가 개별 API 호출로 노출되고, 상세하게 문서화되어 있다.
  • 이는 다시 말해, 사람이 읽을 문서를 하이퍼미디어 대체재로 사용하고 있다는 것이다.
  • 사람 대신, 이 정보를 받도록 의도된 대상(소프트웨어)에 맞춰 작성해야 한다.
  • 스위치를 나타내는 두 버전을 살펴보자
1
2
3
4

스위치를 조작하려면 다음 주소로 POST 요청을 보낸다.
https://api.example.com/swithches/{id}?action=flip
{id}는 스위치 ID다.
스위치가 있는 셀에 있을 때에만 스위치를 조작할 수 있다.

1
2
3
4
5
6
7

<div class="swithch">
	<span class="position">down</span>
		<form action="/swithches/4" method="post">
			<inpuit class="flip" type="submit" />
		</form>
	</span>
</div>
  • 애초에 하이퍼미디어 컨트롤을 사용할 수 있을 때만 제시되므로, 셀에 있을때에만 조작할 수 있다는 경고문구는 제공할 필요도 없다.

HTML의 제약

  • 기술적으로 HTML은 일반 하이퍼미디어 포맷이 아니라 도메인 특화 표준이다.
  • 여기서 발생하는 한계들이 있다
    • PUT, DELETE는 HTML 하이퍼미디어 컨트롤로는 표현할 수 없다.
    • HTML 4의 폼은 두 가지 종류의 엔티티 바디만 만들 수 있다.
      • application/x-www-form-urlencoded
      • multipart/form-data
    • HTML 4는 JSON과 달리 숫자와 문자열을 구분하지 않는다.
    • HTML 4는 날짜를 표시할 방법을 정의하지 않는다.

HTML5가 문제를 해결해 줄까?

  • 보완점
    • 날짜 문제 ⇒ time 태그로 해결
    • 숫자 문제 ⇒ 일반적으로 동작하지 않음
    • 몇 가지 컨트롤을 더 정의하나, 여전히 유용하지 않음
    • input 태그 검증을 위한 방법 정의
  • 일부는 보완되나, 하이퍼미디어 포맷으로서의 HTML을 급격히 변화시키지는 않는다.

하이퍼텍스트 애플리케이션 언어

  • 웹 API에 특화되어 설계된, HTML의 기본 개념인 하이퍼링크만 가져온 HAL(Hypertext Application Language)가 있다.
  • HAL은 두 가지 방식으로 제공된다.
    • XML(application/hal+xml)
    • JSON(application/hal+json)
  • HTML과 HAL의 차이

    • HTML에는 여러가지 경우에 따라 <a>, <img>, <form> 을 사용한다.

    • HAL은 <resource> 태그로만 말한다.

      • 태그 내의 것들이 어떤 HTML 리소스의 표현임을 말하는 유일한 방식

    • HAL에서 <link> 는 활성화 될 때 어떤 HTTP 요청이든 보낼 수 있다.

      • 따라서 사람이 읽을 수 있는 문서에 이렇게 적혀야 한다.
      1
2

      flip
 switch 안에 나타날 수 있다. POST 요청으로 활성화되면, 스위치를 작동시키는 효과가 있다.
      • 바꾸어말하면, 기계가 읽을 수 있는 방법으로는 프로토콜 의미 체계를 전달할 수 없다.

사이렌

  • 엔티티(entities)라는 데이터의 추상적인 그룹을 표현하기 위해 설계되었음
  • 장점 : 컬렉션 패턴에 잘 들어맞지 않은 상태 전이를 표시할 때 더 유연하다
  • 단점: 클라이언트 측의 더 특별한 프로그래밍이 필요하다.

의미체계의 문제

  • 현재까지 배운 것들
    • HTTP : 클라이언트-서버 인터넷 프로토콜, 각기 다른 요청에 일반적은 의미를 부여
    • 하이퍼미디어 : 서버가 클라이언트에게 다음에 전송할 만한 HTTP 요청을 알려줌
    • 애플리케이션 의미 체계: 특정 HTTP 요청으로 애플리케이션이나 리소스에 어떤 구체적인 일이 일어나는지 하이퍼미디어 컨트롤에 추가해 확장
  • API 구축에 사용할 수 있는 표준
    • 도메인 특화 표준
      • 문서에 적힌대로 클라이언트를 구현하면 된다.
      • 따라서, 사람이 읽어야 한다. 컴퓨터는 읽을 수 없다.
    • Collection+JSON, APP(Atom Publishing Protocol)
    • 마이크로포맷, 마이크로데이터
    • HTML, HAL, 사이렌등의 언어
  • 현재는 모든 것을 만족하는 것은 기술적 한계로 불가능하다.