잃어버린 UI를 찾아서

디자인 시스템

카카오엔터프라이즈 통합검색 FE셀

전우진

INDEX

문제의 원인 찾아보기

KST 프로젝트

경험

시스템이 커지면서 생기는 문제점들

다음 검색에 대해서

Daum Search

바로가기 & 사이트

컬렉션

기업정보

컬렉션

공통 컴포넌트 설명 추가

이러다 보니 문제가 생깁니다

추가 - 변경 - 삭제가 자유롭지 못해요

같은 Tooltip 인데 마크업이 달라요

어느 컬렉션이 최신인가요?

음악 컬렉션 개편중인데

이 동그라미 썸네일 수정해도

다른 컬렉션에 이슈 없을까요?

이 슬라이드 쓰는 곳이 없으면 삭제해도 될까요?

사용중인 컬렉션이 있나요?

스토리 컬렉션이랑 TV컬렉션

합쳐서 구성해보고 싶은데 프리뷰 가능할까요?

문제의 근본적인 원인을 찾아보자!

5 Why

제퍼슨 기념관 건물 부식 사례

건물 부식이 심하다

조명을 늦게 켠다!

비둘기 배설물이 많다

거미가 많다

건물을 자주 청소한다

나방이 많이 모인다

조명을 일찍 켜고 있다

4 Why

UI 추가 - 변경 - 삭제가 힘들다

컬렉션별로 기획-개발이 가이드와 다르게 진행된다

어느 컬렉션에서 사용중인지 알 수 없다

컴포넌트 공통 가이드가 관리되지 않고 있다

WHY?

컴포넌트를 관리 & 재활용 시스템

관리 시스템이 없다

WHY?

code

reusable

communication

KST

Kakao Search Template

special thanks to @edward.happy

Carrier

Block

Brick

마크업 산출물

템플릿 가이드

프로토타이핑

빌더

로깅&검색

KST

Template Guide

logger

Prototype Builder

markup Preview

tech stack

puppeteer

chrome headless

Input using code

crawling

automation

storybook Client API

http://{SERVER}:{PORT}/iframe.html?id=story-crawler-kind--story-crawler-story

// Raw Data
__STORYBOOK_CLIENT_API__.raw();


// Story Data
__STORYBOOK_CLIENT_API__.getStorybook();

이제는 찾을 수 있어요

함께 찾아볼까요?

같은 Tooltip 인데 마크업이 달라요

어느 컬렉션을 참조하는게 좋을까요?

음악 컬렉션 개편중인데

이 동그라미 썸네일 수정해도

다른 컬렉션에 이슈 없을까요?

이 슬라이드 쓰는 곳이 없으면 삭제해도 될까요?

사용중인 컬렉션이 있나요?

스토리 컬렉션이랑 TV컬렉션

합쳐서 구성해보고 싶은데 프리뷰 가능할까요?

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

Feat. todo

Mobx

Simple

Multi Store

react context + react-mobx-lite

Reference

Puppeteer

no usable sandbox!

const browser = await puppeteer.launch({args: ['--no-sandbox', '--disable-setuid-sandbox']});

sudo sysctl -w kernel.unprivileged_userns_clone=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

https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md#setting-up-chrome-linux-sandbox

Storybook - component

<S.Block
	...
	dangerouslySetInnerHTML={{__html: html}}
    ...
/>

asis: Markup Base

<S.Block>
  <Component />
</S.Block>

tobe: react component Base

Content Editable

하위 마크업까지 삭제

React component

editing Layer

https://bit.ly/343oJvS

🙋‍♂🙋‍♀

[AI검색플랫폼] 웹프론트 개발자 모집

에서 카카오엔터프라이즈 채용을 검색하세요

💛

Q&A

deck

By WOOJIN JEON

deck

WOOJIN JEON

Hi-

jeonnoej.github.io