[디지털데일리 이상일기자] “기존 웹 개발 방식에서는 웹 사이트의 버튼 색상을 전체적으로 변경 하려 해도, 전체의 스타일 변경에 대해 확인해야 했다. 모던 UI로 변경 하면서, 기획자 –디자이너-개발자간의 컴포넌트 단위로 디자인 스타일이 적용, 개발돼 변경이 수월하게 될 수 있게 됐다”-LG CNS 손정환 팀장
21일 디지털데일리 웨비나 플랫폼 ‘DD튜브’에서 진행된 [오픈 테크넷 서밋 2022] 행사에서 LG CNS 손정환 팀장은 DX서비스 프론트엔드의 개발 전략을 소개했다.
최근 들어 디지털 전환이 가속화됨에 따라 차별화된 고객 경험이 매우 중요해졌다. 때문에 고객과 직접 맞닿는 프론트엔드 역할과 가치가 더욱 높게 평가되며 프론트엔드 기술이 빠르게 발전하고 있다.
손정환 팀장은 “고객 여정 지도상에서 구매 직전에 디지털 채널을 통해 얼마나 차별화된 경험을 제공하는지가 구매 전환에 크게 기여하고 있어 많은 기업이 고객경험 개선을 위해 다양한 시도를 하고 있다”며 “이를 지원하는 프론트엔드가 복잡해지고 다양한 기술도 많이 나오고 있고 이에 대한 전략도 중요한 의사결정 사항이 되고 있다”고 밝혔다.
이에 따라 기업에서는 계속 변화하는 데이터를 반영하는 한편 대규모 애플리케이션 개발에 적합한 모던 UI(Modern User Interface)에 기반한 개발 프로젝트에 나서고 있다. 모던 UI는 최신의 프론트엔드 개발 기술들이 적용된 UI를 뜻하며 손 팀장은 “모던 UI를 위한 준비가 잘 갖춰지면 DX 서비스에서 가장 중요한 부분인 시장의 변화와 고객의 반응에 빠르게 대응할 수 있는 비즈니스 민첩성 확보 가능하다. 때문에 현대화된 앱을 개발하는 프로젝트에서 모던 UI를 주로 사용하고 있다”고 소개했다.
다만 모던 UI를 도입할 경우 ▲개발 방식 ▲개발 프로세스 ▲역할별 태스크 ▲아키텍처 등 측면에서 변화의 폭이 큰 만큼 사전에 모던 UI의 장단점을 파악하는 것이 중요하다.
우선 모던 UI 적용시 조직의 역량과 서비스의 특성을 고려해서 프레임워크를 선정하고 개발 방식과 협업 체계를 구성해 프로젝트를 진행하는 것이 필요하다는 설명이다. 디자인 시스템을 적용할 때에는 비즈니스 환경을 고려하여 디자인 시스템을 무리없이 사용할 인원들이 충분한지, component 기반 재사용이 가능한지, 기획자 & 디자이너 & 개발자간의 소통의 접점이 되어줄 수 있는지 등의 기준을 만드는 것이 중요합니다.
실제 프로젝트에 모던UI를 도입할 때 기준에 대해서 그는 “대규모 시스템이 유리하다. 소규모인데 무리하게 모던 UI를 도입하게 되면 공통 컴포넌트 작업은 오히려 오버헤드가 되고 관리 포인트만 늘어날 수 있다. 차라리 기존 웹 프레임워크를 이용하거나 오픈소스 컴포넌트를 활용한 개발이 효율적일 수 있다”고 지적했다.
개발자 구성도 중요하다는 설명이다. 백엔드와 프론트 엔드가 아키텍처 구성상 나눠지면서 개발 인원도 별도 구성이 필요해지는데 한 사람이 프론트 엔드와 백엔드를 개발하는 것보다 더 많은 사람이 필요하며 동일한 모델에 대한 백엔드의 관점과 프론트엔드 관점이 다를 수 있어 협업도 매우 중요하다는 설명이다.
그는 “프론트엔드에 대한 공통 컴포넌트 작업 및 프로젝트 구성이 매우 중요하고 어려운 작업이므로 이를 리드할 테크니컬 리더가 반드시 필요하다. 우리도 모던 UI의 기본적인 기능을 이해하는데 1개월 이상의 기간이 필요했고 이를 조금 더 응용 개발하기까지 2-3개월이 소요됐다. 실제 프로젝트라면 1인당 평균 2개월의 러닝 커브를 감수하며 투자해야 해 현실적인 고민이나 대안이 필요한 부분”이라고 밝혔다.
모던 UI를 도입하기로 결정했다면 프로젝트 내 인력 역량 수준과 조직 구성을 고려한 도입 전략도 중요하다는 지적이다.
그는 “프로젝트에 적합한 프레임워크 및 언어 선정이 필요하며 적용 영역에 대한 선정, 협업을 위한 도구 검토가 수반되어야 한다. UI/UX 협의체 구성도 중요하다”고 강조했다.
모던 UI 도입을 통한 실제 구축 사례도 소개됐다. LG CNS는 K금융사의 MZ세대를 타깃으로 한 금융 앱 개발 프로젝트를 통해 개발 계획 단계부터 프론트엔드를 리딩할 수 있는 아키텍처를 투입, 공통 영역을 관리했으며 공통 영역이 적절히 사용되고 있는지 품질 관리를 위해 주기적인 코드 리뷰까지 진행했다.
뿐만 아니라 UI/UX 조직 간 긴밀히 협업할 수 있도록 협업 도구를 선정, 함께 활용하는 한편 프로젝트 내 컴포넌트가 잘 공유되고 제대로 관리될 수 있도록 긴밀한 협업을 통해 관리에 나섰다.
손정환 팀장은 “모던 UI가 새로운 기술인 만큼 운영 이슈도 빼놓을 수 없는 주제인데 구축 단계에서 시스템 관리자, 현업 개발자가 참여할 수 있도록 해 운영 기관 이외에도 이슈가 없도록 지원해 성공적인 오픈을 통해 현대화된 애플리케이션의 가치에 대해 공감할 수 있는 좋은 사례를 만들었다”고 소개했다.
뿐만 아니라 모던 UI는 지속적으로 업데이트가 발생하며 변화가 많은 영역이므로 변화 관리와 리스크를 최소화할 수 있는 역량이 중요해 이를 고려한 인력 확보와 프론트에 최적화된 백엔드 아키텍처 검토가 필요하다는 설명이다.