서비스 운영을 위한 디자인시스템 프로젝트

카카오엔터프라이즈 검색플랫폼프론트파트
김정윤, 전우진 1 . 1

Table of Contents
통합검색 서비스의 구조
1 . 2

Table of Contents
디자인 시스템이 필요한 이유
1 . 2

Table of Contents
KST 프로젝트
1 . 2

Table of Contents
KST 프로젝트
KST Builder
1 . 2

Table of Contents
KST 프로젝트
KST Builder
KST Logger
1 . 2

Table of Contents
KST 프로젝트
KST Builder
KST Logger
KST Dashboard
1 . 2

MSA(MicroService Architecture)
다양한 개별 검색 서비스를 통합해서 노출
2 . 2

#검색 #탭 검색
다음 검색
2 . 12

#검색 #탭 검색 네이트
다음 검색
2 . 12

디자인 개편
한정된 기간
2 . 13

디자인 개편
한정된 기간
한정된 리소스
2 . 13

디자인 개편
한정된 기간
한정된 리소스
우선 순위 선정
2 . 13

3 . 1

다양한 검색 서비스 운영
UI 파편화
3 . 2

다양한 검색어 운영
UI 파편화
3 . 2

다양한 검색어 운영
멀티 플랫폼 운영
UI 파편화
3 . 2

Find
신규 검색 서비스에 이런 UI가 추가
될 예정입니다.
3 . 3

Find
신규 검색 서비스에 이런 UI가 추가
될 예정입니다.
어느 검색 서비스에서 사용 중인지
아시는 분?
3 . 3

Guide
Tooltip 추가하려고 하는데...
어떤 것이 최종 가이드인지
아시는 분?
3 . 4

Guide
아시는 분?
인물 검색 서비스가 최종 인가요?
3 . 4

Guide
아시는 분?
인물 검색 서비스가 최종 인가요?
뮤직 검색 서비스가 최종 인가요?
3 . 4

History
신규 검색 서비스에 SelectBox 추
가해야 하는데 재난문자 검색 서비
스 참고하면 되나요?
3 . 5

History
이자계산기 검색 서비스에 있는
SelectBox랑 마크업이 다르네요
ㅠㅠ
3 . 5

History
이거 히스토리 아시는 분?
이자계산기 검색 서비스에 있는
SelectBox랑 마크업이 다르네요
ㅠㅠ
3 . 5

시스템으로 관리되는 디자인 시스템
3 . 6

KST
Kakao Search Template
4 . 1

이미지 출처 https://bradfrost.com
Atomic Design
4 . 2

Brick
4 . 4
<TextBrick />
<ThumbBrick />
<LinkBrick />
...
...

Block
<ContentTitle />
<ThumbList />
<DescriptionList />
...
...
4 . 5

Carrier
<Carrier_0 />
<Carrier_1 />
<Carrier_2 />
...
...
4 . 6

KST Projects
Builder
Page Mockup
Storybook
Template Guide
Template Logging
5 . 5

http://{STORYBOOK_DOMAIN}/iframe.html
6 . 3

__STORYBOOK_CLIENT_API__.raw()
6 . 4

~/iframe.html?id={STORY_ID}
6 . 5

Puppeteer
chrome headless
Input using code
crawling
automation
6 . 7

<div data-comp="InformationList"></div>
<div data-comp="ItemList" data-comp-type="news"></div>
1
2
Middle Template: Set Data Attribute
<html>
<head>
<title>통합검색 페이지</title>
</head>
<body>
<div>
middle results..
</div>
<script>
SF.compLogger.init();
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
Scrap component information on document load
8 . 2

SF.compLogger
Scrap Elements with data-comp
Create log data
Send log
8 . 3

{
"kst":{
"q":"아이유",
"colls":[
{
"status":"partial", // <all | partial | none>
"dc":"3RC",
"comps":[
{
"name":"CarrierTitle",
"types":[
"CarrierTitle_hidden",
"CarrierTitle_subTitle"
]
},
{
"name":"TooltipLayer",
"types":[
"TooltipLayer"
]
},
{
"name":"ListContainer",
"types":[
"ListContainer"
]
},
{
"name":"ItemList",
"types":[
"ItemList"
]
},
{
"name":"Pagination",
"types":[
"Pagination_fraction"
] 8 . 4

프로젝트 진행 중 기억나는 이슈들
9 . 1

프로젝트 진행 중 기억나는 이슈들
Feat. todo
9 . 1

Puppeteer
no usable sandbox!
const browser = await puppeteer.launch({args: ['--no-sandbox', '--disable-setuid-sandbox']});
1
sudo sysctl -w kernel.unprivileged_userns_clone=1
1
# cd to the downloaded instance
cd <project-dir-path>/node_modules/puppeteer/.local-chromium/linux-<revision>/chrome-linux/
sudo chown root:root chrome_sandbox
sudo chmod 4755 chrome_sandbox
# copy sandbox executable to a shared location
sudo cp -p chrome_sandbox /usr/local/sbin/chrome-devel-sandbox
# export CHROME_DEVEL_SANDBOX env variable
export CHROME_DEVEL_SANDBOX=/usr/local/sbin/chrome-devel-sandbox
1
2
3
4
5
6
7
8
9
10
https://github.com/puppeteer/puppeteer/blob/main/docs/tr
oubleshooting.md#setting-up-chrome-linux-sandbox
9 . 2

Storybook - component
<S.Block
...
dangerouslySetInnerHTML={{__html: html}}
...
/>
1
2
3
4
5
asis: Markup Base
<S.Block>
<Component />
</S.Block>
1
2
3
tobe: react component Base
9 . 3

ContentEditable
하위 마크업까지 삭제
React component

editing Layer
9 . 4

기획
검색 UI 협의체
10 . 4

기획 디자인
검색 UI 협의체
10 . 4

기획 디자인
마크업
검색 UI 협의체
10 . 4

기획 디자인
마크업 개발
검색 UI 협의체
10 . 4

Timeline
트위터 검색 서비스가 종료되었는데
Timeline Template 삭제해도 되나요?
11 . 6

Timeline
트위터 검색 서비스가 종료되었는데
Timeline Template 삭제해도 되나요?
KST Dashboard에서 확인해주세요.
11 . 6

디자인 시스템이 어느 정도 반영되었죠?
11 . 8

Design System
Process
Monitoring
11 . 15

서비스 운영을 위한 디자인시스템 프로젝트

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a 서비스 운영을 위한 디자인시스템 프로젝트

Similar a 서비스 운영을 위한 디자인시스템 프로젝트 (20)

Más de NAVER Engineering

Más de NAVER Engineering (20)

Último

Último (20)

서비스 운영을 위한 디자인시스템 프로젝트