NAVER TECH CONCERT_FE2019_플랫폼 UI 개발 전략의 모든 것

플랫폼UI개발전략의모든것!
스마트에디터 | 이주용

발표자 소개
이주용
ppyeonam@naver.com
스마트에디터원UI개발
포스트카드형에디터UI개발
스마트에디터3.0UI개발
포스트에디터UI개발

1. 기존설계의문제점
2. 새로운설계방향
3. 구현과문제해결
4. 플랫폼의 UI설계전략
5. QA
Agenda

1. 플랫폼UI스펙 분석전략
2. 플랫폼UI모듈화전략
3. 실전CSS Preprocessor활용법
오늘의 발표는…

플랫폼이란?
공통의 활용 요소를 바탕으로 본연의 역할도
수행하지만, 보완적인 파생 제품, 서비스를
개발할 수 있는 기반
공급자와 수요자 등 복수 그룹이 참여해  
각 그룹이 얻고자 하는 가치를 공정한 거래를
통해 교환할 수 있도록 구축된 환경
https://terms.naver.com/entry.nhn?
docId=2275870&cid=42238&categoryId=51182

스마트에디터 원 플랫폼

기존 설계의 문제점
아무것도 모르고 시작한 스마트에디터 3.0 UI 개발

스마트에디터 3.0 UI 개발 전략은?

스마트에디터 3.0의 CSS 구조
에디터의 공통 스타일
포스트 요구사항 블로그 요구사항 쇼핑 요구사항
서비스 구분이 없이 모든 스타일이 포함 된 CSS

플랫폼을 고려하지 않은 UI개발
커스텀 및 확장을 고려하지 않았기 때문에 
서비스의 요구사항을 수용 하기가 어려움.
플랫폼의 CSS와 서비스의 CSS의 간섭이 
발생하고 스타일의 우선 순위 관리가 어려움.
에디터의 UI 요소간 관계를 파악하기가  
어려워 버그 및 사이드 이펙트 발생.

스마트에디터 개편 프로젝트

새로운 설계 방향
플랫폼이 갖춰야 할 조건

플랫폼 UI 설계는 무엇이 중요할까?
UI 공통화는 디자인 중심이 아닌 기능을 중심으로 이뤄져야 한다.
조건 및 상태에 따라 다른 스타일이 적용 되어야 한다.
각기 다른 요구사항을 빠르고 쉽게 적용할 수 있어야 한다.

UI 공통화는 디자인 중심이 아닌 기능을 중심으로 이뤄져야 한다. 
구조를 먼저 파악하고 디자인은 스킨 개념으로 접근해야 한다.
조건 및 상태에 따라 다른 스타일이 적용 되어야 한다. 

CSS는 정적인 언어지만 설계는 동적 이어야 한다.

CSS는 정적인 언어지만 설계는 동적 이어야 한다.
설정으로 분리하여 하나의 파일에서 모두 변경할 수 있게 하자.

구현과 문제 해결
설계를 시작하기 전에…

Css Methodology
https://wit.nts-corp.com/2015/04/16/3538
Block, Element, Modifiler
Scalable and Modular Architecture
for CSS
 
Object-Oriented CSS
https://wit.nts-corp.com/2015/04/16/3538
OOCSS

CSS의 기능을 확장하여 선택자 상속, 변수,  
조건문, 반복문, 함수 등을 사용할 수 있다.
위 기능을 활용하여 일반적인 CSS로는 불가능
한 복잡한 코드 작성을 쉽게 도와준다.
필요에 따라 하나 또는 그 이상을 조합하여 사
용 할 수도 있다. 
https://www.slant.co/topics/217/~best-css-preprocessors-
postprocessors
CSS Preprocessor

https://www.slant.co/topics/217/~best-css-
preprocessors-postprocessors
커피고민 시간

구현과 문제 해결
플랫폼에서 중요한 설계 포인트

공통 요소의 분리
플랫폼에서 스펙 분석 방법

장소와 일정
일정장소

장소 컴포넌트와 일정 컴포넌트
구현
HTML
<div class="component map">
<div class="component-content">
<div class="module module-map-image"></div>
<div class="module module-map-text"></div>
</div>
</div>
<div class="component schedule">
<div class="module module-schedule">
</div>
</div>
</div>

구현
HTML
<div class="component map">
<div class=“module module-map-text"></div>
</div>
</div>
<div class="component schedule">
<div class="module module-schedule">
</div>
</div>
</div>

구현
SCSS
.map {
.module-map-image {
// 장소 컴포넌트의 지도 스타일
}
.module-map-text {
// 장소 컴포넌트의 주소 스타일
}
}
.schedule {
.module-map-image {
// 일정 컴포넌트의 지도 스타일
}
.module-map-text {
// 일정 컴포넌트의 주소 스타일
}
}

단일 이미지와 이미지 나란히 놓기
이미지 나란히 놓기단일 이미지

단일 이미지와 이미지 나란히 놓기
구현
SCSS
.module-image {
.icon-360 {
// 360도 아이콘 스타일
}
.image-delete {
// 삭제 버튼 스타일
}
}

플랫폼의 스펙 분석 전략
디자인(꾸미는 요소)보다는 기능(구조)에
중심의 분석.
동일한 기능을 하는 요소는 동일한 HTML
구조를 가질 수 있을지 검토.
공통화 요소 중 일부 UI가 다른 경우는 전
체 스펙으로 구현 검토.

동적인 UI 스타일 로직
컴포넌트 간격과 연관 된 UI 스펙 분석과 구현

이미지 기본 간격
스펙 분석

이미지가 연속 될 때
스펙 분석

이미지가 연속 되고, 캡션이 있을 때
스펙 분석

이미지 위에 제목이 있을 때
스펙 분석

이미지 위에 본문이 있을 때
스펙 분석

이미지 위에 스티커가 있을 때
스펙 분석

이미지 위에 인용구가 있을 때
스펙 분석

이미지 간격
구현
SCSS
.image {
margin-top: 30px;
.caption {
margin-bottom: 20px;
}
+ .image {
margin-top: 15px;
}
.title + &,
.text + &,
.sticker + & {
margin-top: 20px;
}
.quotation + & {
margin-top: 40px;
}
}

다른 컴포넌트의 간격 가이드들…
스펙 분석

간격과 같은 높이의 숨겨진 UI
스펙 분석
컴포넌트 사이 간격과 동일한 높이의 
텍스트 추가 버튼이 필요.

간격과 같은 높이의 숨겨진 UI
스펙 분석

스펙 분석
스펙 정리
인접한 컴포넌트에 따라 간격이 달라질 수 있다.
간격과 같은 높이의 텍스트 추가 버튼이 필요하다.
플랫폼 관점에서 설계 포인트
컴포넌트 사이 간격은 서비스별로 요구사항이 다를 수 있다.

조건에 따른 간격과 숨겨진 버튼 UI
구현
HTML
<div class=“=component image">
<button class="hidden-button"></button>
/* 생략 */
</div>
</div>
<div class="component image">
<button class="hidden-button"></button>
/* 생략 */
</div>
</div>

조건에 따른 간격과 숨겨진 UI
구현
SCSS
$config: (
image: (
component-edge-button: true,
spacing: (
base: 30px,
adjacent: (
image: 15px,
text: 20px,
...
)
)
)
)
@include spacing-and-hidden-button—style(image);

스마트에디터 3.0의 CSS 구조
서비스1 요구사항 서비스2 요구사항 서비스3 요구사항
서비스 구분이 없이 모든 스타일이 포함 된 CSS

스마트에디터 One의 CSS 구조
서비스2 요구사항 서비스3 요구사항
서비스1 CSS
서비스1 요구사항
서비스2 CSS 서비스3 CSS

플랫폼 UI설계 전략
다시 한번 되 짚어 보기

모듈화
디자인보다는 각각의 요소가 하는 기능에
집중하여 모듈화
현재의 요구사항에 맞게 최소한의 기능으로 
모듈화, 확장 가능성은 배제
같은 기능을 하는 요소는 동일한 HTML 
구조를 사용

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

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

Q&A
나중에 ppyeonam@naver.com 로 문의 주셔도 됩니다.

NAVER TECH CONCERT_FE2019_플랫폼 UI 개발 전략의 모든 것

NAVER TECH CONCERT_FE2019_플랫폼 UI 개발 전략의 모든 것

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à NAVER TECH CONCERT_FE2019_플랫폼 UI 개발 전략의 모든 것

Similaire à NAVER TECH CONCERT_FE2019_플랫폼 UI 개발 전략의 모든 것 (20)

Plus de NAVER Engineering

Plus de NAVER Engineering (20)

NAVER TECH CONCERT_FE2019_플랫폼 UI 개발 전략의 모든 것