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

카카오엔터프라이즈 검색플랫폼프론트파트
김정윤, 전우진 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

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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

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

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

More from NAVER Engineering

More from NAVER Engineering (20)

Recently uploaded

Recently uploaded (20)

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