[ITNews] 2023년 10월 첫째 주

“자바스크립트 없는 동적 HTML” HTMX의 이해와 기본 활용법

HTMX란

HTMX는 꽤 오래전에 나왔지만 그동안 활동이 다소 뜸했던 프로젝트다. 최근 깃허브 액셀러레이터(GitHub Accelerator)에 발탁된 만큼 분위기가 바뀔 가능성이 높다. 기본적인 개념은 상용구 자바스크립트-HTML 상호작용이 필요한 일반적인 상황에서 자바스크립트 없이 HTML 구문만 사용한다는 것이다. 많은 상호작용이 HTMX를 통해 선언적이 된다. 여기까지만 들어도 귀가 솔깃하다. 웹 개발자라면 누구나 상용구 사례가 많다는 것을 알고 있다. HTMX를 만든 카슨 그로스는 “하이퍼텍스트로 HTML을 완성해 더 진보적인 현대 웹 애플리케이션을 위한 경쟁력 있는 대안이 되도록 표현력을 높이는 것이 목표다”라고 말했다. 

HTMX에 대해 대략적인 감을 잡기 위해 이 데모를 보자. 기본적으로 버튼을 클릭해 사용자 객체의 필드를 편집하는 예제다. 데이터는 백엔드 엔드포인트로 들어간다(PUT). <화면 1>을 보면 Show를 클릭한 이후 하단 프레임의 네트워크 상호작용을 볼 수 있다. 

<예시 1> HTMX 사용자 업데이트

<!-- <HTMX 사용자 업데이트> -->
<div hx-target="this" hx-swap="outerHTML">
    <div><label>First Name</label>: Joe</div>
    <div><label>Last Name</label>: Blow</div>
    <div><label>Email</label>: joe@blow.com</div>
    <button hx-get="/contact/1/edit" class="btn btn-primary">
    Click To Edit
    </button>
</div>
<!-- The edit: -->
<form hx-put="/contact/1" hx-target="this" hx-swap="outerHTML">
  <div>
    <label>First Name</label>
    <input type="text" name="firstName" value="Joe">
  </div>
  <div class="form-group">
    <label>Last Name</label>
    <input type="text" name="lastName" value="Blow">
  </div>
  <div class="form-group">
    <label>Email Address</label>
    <input type="email" name="email" value="joe@blow.com">
  </div>
  <button class="btn">Submit</button>
  <button class="btn" hx-get="/contact/1">Cancel</button>
</form>

<예시 1> 을 보면 어떤 동작이 이뤄지는지 쉽게 알 수 있다. hx-swap 속성은 편집되기 전 div를 위한 HTML을 제공하고, outerHTML은 이것이 프레임워크에 내부의 동적 콘텐츠와 어떻게 관련되는지 알려준다. 편집 가능한 버전은 PUT HTML 메서드와 사용할 엔드포인트를 식별하는 x-put 속성이 포함된 양식(form) 요소로 구현된다. 

여기서 HTMX는 자바스크립트를 전혀 사용하지 않고 이 “swap”과 그 이후의 PUT을 어떻게 구현했을까하는가? 답은 쉽다. 편집 마크업에 HTML의 서버 측 렌더링을 사용하고, 양식 마샬링을 프레임워크로 추상화하는 것이다. 배후에서는 여전히 자바스크립트가 실행된다. 사실상 우리가 보는 것은 전체 페이지 대신 세그먼트만 로드할 수 있고 Ajax 요청을 제출할 수 있는 더 세분화된 HTML 구문이다. 이는 DRY 원칙의 흥미로운 실제 예시다. 리액트(React) 등을 사용해도 한 양식에서 다른 양식으로 정보를 섞을 때는 상용구 코드를 일정 정도 써야 한다. HTMX는 이를 완전히 제거한 것은 아니지만, 그 작업을 서버로 옮겼다.

 

HTMX는 여러 가지 점에서 매우 흥미롭다. 결론은 이 개념이 프로젝트 자체 못지않게 유익하다는 것이다. 점점 성숙해지면서 HTMX가 지금과 똑같이 작동하지 않을 수 있지만, 유익한 영향은 이미 입증됐다. 가장 매력적인 부분은 일반적으로 fatch() 또는 이와 비슷한 것을 사용하는 매우 보편적인 Ajax 스타일의 온갖 다양한 요청을 HTML 속성 하나로만 처리한다는 개념이다. 더 단순하고 깔끔하며 모든 요소를 한 곳에 두는 방식이다. 마크업이 무엇을 하는지가 매우 명확하다. 

 

 

원문보기:

“자바스크립트 없는 동적 HTML” HTMX의 이해와 기본 활용법

---

삼성SDS, 레드닷 디자인 어워드 2개 부문 동시 수상

삼성SDS가 레드닷 디자인 어워드에서 최고 디자인상인 ‘베스트 오브 더 베스트’를 수상했다고 4일 밝혔다.

 

레드닷 디자인 어워드는 iF 디자인 어워드, IDEA와 함께 세계 3대 디자인상 중 하나다. ▲제품 디자인 ▲브랜드·커뮤니케이션 디자인 ▲디자인 콘셉트 등 3개 부문으로 나눠 시상한다.

 

삼성SDS는 통합경험(TX)을 활용한 지식자산 플랫폼 ‘TX360’으로 디자인 콘셉트 부문 최고 디자인상과 브랜드·커뮤니케이션 디자인 부문 본상(Winner) 등 2개 부문 동시 수상의 영광을 얻었다.

통합경험은 사용자경험(UX), 고객경험(CX), 임직원경험(EX), 다중경험(MX), 브랜드경험(BX), 제품경험(PX), 서비스경험(SX) 등 고객이 특정 제품이나 서비스를 이용하면서 발생하는 다양한 경험들을 하나로 통합해 관리하는 전략을 의미한다.

 

삼성SDS는 고객경험 업무를 수행하면서 확보한 프로세스와 방법론, 디자인 자산 등 관련지식을 활용해 고객에게 최상의 통합경험을 제공하기 위해 내부 플랫폼인 TX360˚을 보유하고 있다.

 

삼성SDS는 레드닷 디자인 어워드 디자인 콘셉트 부문에 참가하면서 기존 TX360˚에 생성형 AI 기술을 적용한 미래 콘셉트를 선보였다. 이 콘셉트는 고객 여정*(Customer Journey)에 따라 발생하는 경험 데이터를 기반으로 개선이 필요한 디자인을 생성형 AI의 추천을 통해 자동 반영하는 등 디지털 경험 혁신성을 더했다.

 

이를 통해 고객경험 전문가가 아니더라도 플랫폼에서 제공하는 지식자산을 활용해 문제를 해결하는데 도움을 받을 수 있다.

 

웹사이트 관리자는 TX360˚을 통해 고객들이 웹사이트를 사용하며 겪는 다양한 불만이나 문제점을 분석하고, 준비된 해결방안과 디자인 자산을 적용해 쉽고 빠르게 개선하는데 도움을 받을 수 있다.

 

 

원문보기:

삼성SDS, 레드닷 디자인 어워드 2개 부문 동시 수상

---

SAP, 생성형 AI 비서 ‘쥴’ 발표

SAP는 생성형 인공지능(AI) 코파일럿 솔루션 ‘쥴(Joule)’을 공개했다고 4일 밝혔다.

 

쥴은 SAP의 클라우드 엔터프라이즈 포트폴리오 전반에 내장돼 다양한 SAP 솔루션 포트폴리오는 물론 제3자 소스를 기반으로 상황에 맞는 선제적 인사이트를 제공한다. 실무 데이터의 복잡한 네트워크를 빠르게 분류하고 맥락을 부여함으로써 임직원이 작업을 더욱 빠르게 처리하고 규정을 준수하면서 더 나은 비즈니스 결과를 도출할 수 있도록 지원한다.

 

SAP는 향후 쥴을 인사부터 재무, 공급망, 조달, 고객 경험 및 SAP 비즈니스 테크노롤지 플랫폼(SAP BTP) 등 다양한 SAP 애플리케이션에 탑재할 예정이다. 이를 통해 사용자는 마치 항상 명석한 해답을 제시하는 동료와 대화를 나누듯이 SAP 애플리케이션을 사용할 수 있다.

사용자는 평문으로 질문하거나 문제를 제시하면, SAP 포트폴리오 및 제3자 소스에서 가져온 비즈니스 데이터 정보를 바탕으로 맥락에 맞는 지능적인 답변을 구할 수 있다. 일례로, 쥴에게 판매 성과 개선을 위해 도움을 요청할 수 있다. 쥴은 판매 실적이 부진한 지역을 식별하고 공급망 시스템에 자동으로 연결해 잠재적인 해결책을 제공할 수 있다. 쥴은 모든 SAP 솔루션에 대한 새로운 시나리오를 지속적으로 제공할 것이다. 일례로, 인사 부문에서는 규정을 준수하는 직무 기술서를 작성하고 관련 인터뷰 질문 개발 등 일부 작업을 지원할 것이다.

 

쥴은 올해 말 SAP 석세스팩터스 솔루션 및 SAP 스타트에서 사용 가능하며, SAP S/4HANA 클라우드 퍼블릭 에디션에는 내년 초에 탑재될 예정이다. SAP 고객 경험 및 SAP 아리바, SAP BTP 등에도 추후 탑재된다. SAP 커넥트, SAP 스펜드커넥트 라이브, SAP 고객 경험 라이브, SAP 테크에드 등의 행사에서 SAP 포트폴리오 전반에 대한 업데이트 사항을 공개할 예정이다.

 

쥴은 SAP의 기존 비즈니스 AI 제품군을 기반으로 구축 및 강화한다. 2만 6천여 곳 이상의 SAP 클라우드 고객사는 현재 SAP 비즈니스 AI에 다양한 시나리오와 파트너 솔루션을 통해 액세스 가능하다.

 

크리스찬 클라인 SAP CEO는 “전 세계적으로 약 3억 명의 기업 사용자가 SAP 클라우드 솔루션을 지속적으로 활용하고 있는 가운데 쥴은 비즈니스와 사용자의 작업 방식을 재정의할 수 있는 힘을 지니고 있다”며 “쥴은 비즈니스와 기술의 접점에 있는 SAP의 독보적인 위치를 바탕으로 구축되며 비즈니스 AI에 대한 관련성, 신뢰성, 책임감의 접근 방식을 기반으로 한다”고 밝혔다.

 

 

원문보기:

SAP, 생성형 AI 비서 ‘쥴’ 발표

 

---