scant

scant

Be kindly

마이크로서비스 모델링 ⑤ : FrontEnd 설계

Updated:

마이크로서비스 모델링 ⑤ :프론트 엔드 모델링

웹과 모바일 기술의 발전에 따라 사용자 경험에 민감하게 반응할 수 UI기술 및 개념들이 등장하게 되었고 이를 잘 지원할 수 있는 다양한 프론트엔드 프레임웍이 등장했다. 대표적인 프레임웍으로 앵귤러(Angular js) , 리액트(React.js), 뷰(Vle.js)등이 있고 모두 사용자 경험을 잘 지원하는 SPA (Single-page application) 를 지원하고 있다.

이러한 경향은 프론트 엔드에서 수행해야 할 일들이 점점 많아지고 중요하게 되었음을 의미한다. 이에 따라 아키텍처 영역에서 언급하였었던 바와 같이 프론트 엔드 영역의 모노리스 구조를 분리하기 위한 마이크로 프론트 등의 패턴들이 등장하고 있으며 여러가지 유연한 아키텍처등이 소개되고 있다.

그렇지만 여기서는 깊게 논하지 않고 프론트 엔드 설계 관점에서 어떠한 절차 및 준비가 필요한지 간략히 살펴보기로 한다. 많은 요소가 있겠지만 최소한의 설계 영역은 다음과 같다.

프론트 아키텍처 정의

  • 사용자 요건에 적절한 아키텍처를 정의해야 한다. 물론 시스템의 성격이나 사용자에 따라 결정되었겠지만 B2C의 경우의 최근 요건은 모바일이 이미 웹 만큼이나 대중화 되었기 때문에 모바일,앱,웹의 채널을 모두 고려하고 어떤 매체에서나 사용자 경험에 민감하게 반응할 수 있는 반응 형 UI을 지향하는 경향이 높아지고 있다.
  • 따라서 최근에는 이를 모두 지원하는 앞서 언급한 프론트엔드 프레임웍이 많이 등장했는데 최근 추세는 리액트 와 뷰를 많이 사용하고 있다. 이 프레임웍들은 컴포넌트 구조의 재사용 가능한 구조를 지원하고 마이크로 프론트 패턴을 적용할 수 도 있다. 일부 B2C의 경우 X-internet 이라고도 부르는 RIA1전문 기반 클라이언트 전문 툴을 사용하는 경우도 있는데 이런 경우 백엔드의 REST API형식을 온전히 지원하지 않는 경우2 도 있으니 검토가 필요하다.
  • 프론트 프레임웍이 정의되었으면 백엔드 API와 연계되는 스파이크 솔루션(spike solution)3을 수행해 아키텍처가 사용자 요건을 만족하는 지 필요가 있다.
  • 프론트 아키텍처 수립 시 프론트 엔드 프로그램의 패키지 구조도 정의해야 하는데 마이크로서비스팀이 책임이 있는 업무를 고려하여 결정되어야 한다. 프론트 패턴을 적용하여 백엔드와 마찬가지로 명확히 분리할 수도 있고, 모노리스 구조를 유지한다면 패키지 별로 명확히 오너쉽(Owner ship)이 구분되게 하자.

표준 화면 유형 정의

  • 프론트 프레임웍의 기술 특성을 고려하려 표준 화면 레이어아웃을 정의해야 한다. 보통 비지니스 처리를 위해 많이 사용되는 목록, 조회, 수정, 삭제 등의 업무 대표 화면 유형을 정의하고 그에 맞는 사용자 경험을 검토해서 정의한다.

  • 이런 표준 화면 유형 정의 시 화면을 표현하는 구성요소등의 위치 및 방식,모양 등도 고려해야 하는데 이런 화면 구성요소는 표, 그리드, 입출력 폼, 표준버튼등이 될 수 있다.
  • 화면 유형 정의 시 웹,앱,모바일,리포트 등 각 채널 특성에 고유한 화면 유형을 별도로 정의할 수 있다.

UI레이아웃 설계

  • 표준 유형을 기반으로 개별 UI 레이아웃을 정의한다. 각 기능을 만족할 UI를 정의하는 과정이다. 화면에 입출력이 될 속성 정보를 식별하고 기능을 수행할 버튼 등을 정의한다
  • 보통 UI레이아웃 정의 시 업무 흐름에 맞게 UI흐름이 도출되고 빠짐없이 설계가 되는데 이를 UI스토리 보드 라고도 한다.
  • UI 디자인 및 UI레이아웃 반영
  • 표준 화면 유형에 맞는 UI 디자인을 정의한다. 보통 디자이너가 수행하는데 UI에 반영하기 위해서는 프론트 엔지니어와 긴밀한 협의가 필요하다.
  • 마이크로서비스 팀에 디자이너가 속해 있으면 협의가 원할 것이다.
  • 프론트 엔지니어는 디자이너의 디자인 의도를 반영하여 디자인을 적용한다.

이벤트 설계

  • 화면의 이벤트 변화에 따라 백엔드 API를 호출하는 방식을 정의한다.

  1. 리치 인터넷 애플리케이션(Rich Internet Application; RIA)은 웹 애플리케이션의 장점은 유지하면서 기존 웹 브라우저 기반 인터페이스의 단점인 늦은 응답 속도, 데스크톱 애플리케이션에 비해 떨어지는 조작성 등을 개선하기 위한 기술의 통칭이다. 즉, 별도의 설치가 필요 없는 웹 브라우저 기반의 애플리케이션 배포 장점과 서버 측 웹 서비스와의 연동, 마크업 언어 기반의 선언적 애플리케이션 구성 등은 유지하면 서 데스크톱 애플리케이션과 대등한 사용자 경험을 주는 것을 목표로 하는 기술이다. ↩

  2. 보편적으로 사용되는REST API 라 불리우는 리소스형식과 http메소드 규칙을 사용하고, JSON으로 표현하는 형태가 충족되지 않고 특정방식( 단순히 http프로토콜로 통신하고 POST방식으로만 통신)으로만 사용해야하는 도구들도 존재한다. ↩

  3. Extreme Programming(XP) 방법론에서 나온 용어로 문제영역을 해결하기 위해 실제로 간단히 구현해 보는 프로그램을 의미. ↩

You May Also Enjoy