큐트리 개발 블로그

Ego sum operarius studens

Seminar2019-04-12

[TECHCON] 플랫폼 UI 개발 전략의 모든 것

2019년 4월 11일, 네이버 프론트엔드 테크콘서트에서 진행되었던 플랫폼 UI 개발 전략의 모든 것 세미나를 듣고 내용을 정리한 글입니다.

플랫폼이란

공통의 활용 요소를 바탕으로 보완적인 파생 상품, 서비스를 개발할 수 있는 기반

기존 설계의 문제점

(스마트 에디터 3.0 사례)

에디터를 사용하는 서비스마다 디자인/요구사항이 조금씩 다름
컴포넌트 사이의 간격이 매우 다양함 : 이미지, 이미지 설명, 인용구 등
UI 개발 전략이 없었음

플랫폼을 고려하지 않은 UI 개발

커스텀, 확장에 대한 고려가 없음 : 서비스 요구사항을 수용하기 어려움
플랫폼 CSS, 서비스 CSS의 간섭이 발생, 우선 순위 관리 어려움
에디터 UI 요소간 관계 파악이 어려워 버그, 사이드 이펙트 발생

(다소 다른 맥락이긴 하지만) 확장앱을 개발하면서 삽입하는 CSS, 기존 CSS 우선 순위 관리가 어려워서 공감되었습니다.

새로운 설계 방향

스마트에디터 원 : 플랫폼이 갖춰야 할 조건 고려

플랫폼 UI 설계에서 중요한 것

UI 공통화 : 디자인 중심이 아닌 기능 중심
조건과 상태에 따라 다른 스타일 적용
각기 다른 요구사항을 쉽고 빠르게 적용

동적인 UI 스타일 로직

컴포넌트 간격과 연관된 UI 스펙 분석과 구현

스펙 분석

인접한 컴포넌트에 따라 간격이 달라질 수 있음 * 제목, 이미지, 이미지 위에 인용구가 있을 때, 이미지 위에 이미지가 있을 때 등
간격과 같은 높이의 숨겨진 UI(텍스트 추가 버튼)가 필요 * 공백 영역(숨겨진 영역)을 클릭하면 새로운 컨텐츠를 삽입할 수 있는 영역이 나옴

스마트 에디터 3.0을 많이 사용했었는데, 개발자분들의 노력을 직접 확인하니 새삼 감사했습니다.

플랫폼 관점에서 설계 포인트

컴포넌트 사이 간격은 서비스별로 요구사항이 다를 수 있음

구현

SCSS를 사용하여 설정 부분을 따로 빼내면, 서비스에 따라 쉽게 수정이 가능

$config: (
        image: (
            component-edge-button: true,
            spacing: (
                base: 30px,
                adjacent: (
                    image: 15px,
                    text: 20px,
                    ...
                )
            )
        )
    )
    @include spacing-and-hidden-button-style(image);

플랫폼 UI 설계 전략

모듈화

디자인보다는 각 요소가 하는 기능에 집중하여 모듈화
현재 요구사항에 맞게 최소한의 기능으로 모듈화하고, 확장 가능성은 배제 * 확장 가능성을 초기부터 고려하면 복잡해질 수 있음
같은 기능을 사용하는 요소는 동일한 HTML 구조를 사용

설정과 공통 코드

간격, 색상, 서체, 폰트 사이즈 등 서비스 별 변경이 쉽도록 설정으로 관리
반복적인 코드는 css pre-processor의 기능을 활용하여 구현
연관된 UI, 수치는 반드시 공통으로 묶어 관계를 명확하게 함

플랫폼은 만능이 아님

모든 요구사항을 플랫폼 공통 코드로 소화할 수 없음
때로는 스펙 협의, 커뮤니케이션이 설계보다 중요할 수 있음
플랫폼 공통 코드는 불변이 아니며, 지속적 리팩토링이 필요

Ego sum operarius studens