SlideShare a Scribd company logo
1 of 159
Download to read offline
SOCAR

DESIGN SYSTEM

FRAME
발표대상
디자인시스템 

도입을검토하고있는,구축예정인,구축진행중인 

개발자,디자이너
쏘카디자인시스템 | p.2
발표대상
디자이너입장에 

살짝포커싱
쏘카디자인시스템 | p.3
디자인시스템 

도입을검토하고있는,구축예정인,구축진행중인 

개발자,디자이너
1.쏘카프레임의시작
2.다크모드와컬러시스템
3.개발자와컴포넌트구축하기
4.컴포넌트구축프로세스와우선순위
목차
1)구축배경
2)TF운영과개발방식
쏘카프레임의시작1.
1.쏘카프레임의시작
1)구축배경
작년5월,앱리뉴얼런칭
2019년봄,앱리뉴얼을런칭했습니다.
쏘카디자인시스템 | p.6
앱 리뉴얼을 진행하면서 마련한 디자인 스타일 가이드입니다.
1. 쏘카프레임의 시작
1) 구축 배경
스타일가이드와 

디자인라이브러리는있지만

개발에반영되지않은상황
1.쏘카프레임의시작
1)구축배경
개발인원도계속늘고
앱리뉴얼을이후쏘카의개발상황입니다.
쏘카디자인시스템 | p.9
1.쏘카프레임의시작
1)구축배경
유관서비스도계속늘고
페어링 비즈니스 플랜
앱리뉴얼을이후쏘카의개발상황입니다.
쏘카디자인시스템 | p.10
1.쏘카프레임의시작
1)구축배경
화면도계속늘고
앱리뉴얼을이후쏘카의개발상황입니다.1.쏘카프레임의시작
1)구축배경
개발인원계속늘고

유관서비스도늘고

화면도늘고
앱리뉴얼을이후쏘카의개발상황입니다.
쏘카디자인시스템 | p.12
1.쏘카프레임의시작
1)구축배경
개발인원들계속늘고

유관서비스도늘고

화면도늘고
디자인시스템 

도입적기!!
쏘카디자인시스템 | p.13
앱리뉴얼을이후쏘카의개발상황입니다.1.쏘카프레임의시작
1)구축배경
프로덕트디자인팀
하면좋겠다!

추진해보자!
디자인시스템진행을결심하고선행공부하며설득한과정입니다.
쏘카디자인시스템 | p.14
1.쏘카프레임의시작
1)구축배경
프로덕트디자인팀
하면좋겠다!

추진해보자!
선행공부와

밑밥&공감대형성
디자인시스템진행을결심하고선행공부하며설득한과정입니다.1.쏘카프레임의시작
1)구축배경
쏘카디자인시스템 | p.15
프로덕트디자인팀
하면좋겠다!

추진해보자!
선행공부와

밑밥&공감대형성
디자인시스템진행을결심하고선행공부하며설득한과정입니다.1.쏘카프레임의시작
1)구축배경
쏘카디자인시스템 | p.16
설명회진행

TF결성!!

정기회의시간확보
1.쏘카프레임의시작
1)구축배경
쏘카디자인시스템 | p.17
1.쏘카프레임의시작
어떤방식으로TF를운영하며

개발을진행해야할까?
2)TF운영과개발방식
한정된자원에서디자인시스템구축을어떻게진행했는지,그개발방식을설명합니다.
쏘카디자인시스템 | p.18
모든개발실무자가이해도를가져야하는프로젝트
TF가디자인시스템을전담할수없는환경
장기적인프로젝트
한정된자원에서디자인시스템구축을어떻게진행했는지,그개발방식을설명합니다.
쏘카디자인시스템 | p.19
1.쏘카프레임의시작
2)TF운영과개발방식
모든개발실무자가이해도를가져야하는프로젝트
TF가디자인시스템을전담할수없는환경
장기적인프로젝트
쏘카개발규모에 

적합한개발방식을

찾아가는과정
한정된자원에서디자인시스템구축을어떻게진행했는지,그개발방식을설명합니다.
쏘카디자인시스템 | p.20
1.쏘카프레임의시작
2)TF운영과개발방식
 쏘카프레임 구축 배경과 과정
 쏘카프레임 구축 배경과 과정
어밴져스
어벤져스가결성되어,파운데이션을구축하고,최초의1개컴포넌트구축하면서쏘카프레임의토대와

구축프로세스를만들었습니다.
어벤져스
design
iOS
web
design
Android
쏘카디자인시스템 | p.23
1.쏘카프레임의시작
2)TF운영과개발방식
design
iOS
web
design
Android
구축한 내용과 개념을 각 담당자가 각각의 팀에 잘 전파하였습니다.
쏘카 디자인 시스템 | p. 24
1. 쏘카프레임의 시작
2) TF운영과 개발 방식
design
아이콘 

구축
iOS
webAndroid
design
Android
태그 

구축
iOS
web
design
Android
로딩

구축
iOS
web
이후로는 각각의 팀에서 리소스가 있고 컴포넌트에 관심이 있는 다른 개발자가 번갈아 가면서 참여하여,

각각의 컴포넌트에 오너쉽을 가지고 구축하였습니다.
쏘카 디자인 시스템 | p. 25
1. 쏘카프레임의 시작
2) TF운영과 개발 방식
이후로는 각각의 팀에서 리소스가 있고 컴포넌트에 관심이 있는 다른 개발자가 번갈아 가면서 참여하여,

각각의 컴포넌트에 오너쉽을 가지고 구축하였습니다.
쏘카 개발 규모에 

적합한 개발 방식 !
쏘카 디자인 시스템 | p. 26
1. 쏘카프레임의 시작
2) TF운영과 개발 방식
1.쏘카프레임의시작Check Point!
디자인시스템을도입하기적절한시기라고 

판단되면공감대미리미리형성
각회사의상황에맞는TF구성
1)다크모드도입의배경
2)컬러시스템의구조부터뒤엎게된과정
3)새로운컬러시스템
4)컬러시스템,어떻게툴에반영했을까?
다크모드와컬러시스템2.
다크모드도입배경
2.다크모드와컬러시스템
1)다크모드도입의배경
쏘카디자인시스템 | p.29
작년 6월, 애플이 WWDC발표에서 iOS13의 다크 모드에 대해 공식 발표를 하였고 9월에 정식 버전이 런칭되었습니다.
쏘카 디자인 시스템 | p. 30
2. 다크모드와 컬러 시스템
1) 다크모드 도입의 배경
저시력자를위한접근성향상

어두운환경에적합(취침전휴대폰탐색등)

취향(Private,Premium감성)

배터리절감(OLED+검정배경일때)

컨텐츠집중(넷플릭스등)
다크모드도입의이유와효용성에는다음과같은것들이있습니다.
쏘카디자인시스템 | p.31
2.다크모드와컬러시스템
1)다크모드도입의배경
다크모드시작!
2.다크모드와컬러시스템
1)다크모드도입의배경
일!
다크모드 시작!
2. 다크모드와 컬러 시스템
1) 다크모드 도입의 배경
일! 이!
다크모드 시작!
2. 다크모드와 컬러 시스템
1) 다크모드 도입의 배경
일! 이! 삼!
다크모드 시작!
2. 다크모드와 컬러 시스템
1) 다크모드 도입의 배경
일! 이! 삼! 사!
다크모드 시작!
2. 다크모드와 컬러 시스템
1) 다크모드 도입의 배경
일! 이! 삼! 사! 오!
다크모드 시작!
2. 다크모드와 컬러 시스템
1) 다크모드 도입의 배경
일! 이! 삼! 사! 오! 유...욱흑!
다크모드 시작!
2. 다크모드와 컬러 시스템
1) 다크모드 도입의 배경
유...욱흑!
다크모드를 가장 마지막으로 대응하게 되면 해당 앱을 켰을 때 예상되는 사용자 경험입니다.2. 다크모드와 컬러 시스템
1) 다크모드 도입의 배경
아..지금부터고민해야겠당^^
2.다크모드와컬러시스템
1)다크모드도입의배경
실제로 iOS13 정식 런칭 이후에 다음과 같은 앱들이 일주일 단위로 다크모드를 런칭하고 있었습니다.
쏘카 디자인 시스템 | p. 41
2. 다크모드와 컬러 시스템
1) 다크모드 도입의 배경
그럼다크모드를 

어떻게,어디서부터시작해야할까
2.다크모드와컬러시스템
2)컬러시스템구조부터뒤엎게된과정
쏘카디자인시스템 | p.42
단순하게 생각하면

그냥 기존를 컬러 반전 하면 안될까?
쏘카 디자인 시스템 | p. 43
2. 다크모드와 컬러 시스템
2) 컬러 시스템 구조부터 뒤엎게 된 과정
쏘카 디자인 시스템 | p. 44
2. 다크모드와 컬러 시스템
2) 컬러 시스템 구조부터 뒤엎게 된 과정
쏘카 디자인 시스템 | p. 45
2. 다크모드와 컬러 시스템
2) 컬러 시스템 구조부터 뒤엎게 된 과정
쏘카 디자인 시스템 | p. 46
2. 다크모드와 컬러 시스템
2) 컬러 시스템 구조부터 뒤엎게 된 과정
쏘카 디자인 시스템 | p. 47
2. 다크모드와 컬러 시스템
2) 컬러 시스템 구조부터 뒤엎게 된 과정
2.다크모드와컬러시스템
2)컬러시스템구조부터뒤엎게된과정
쏘카디자인시스템 | p.48
그럼어떻게해야할까?
쏘카디자인시스템 | p.49
2.다크모드와컬러시스템
2)컬러시스템구조부터뒤엎게된과정
Google Material
2. 다크모드와 컬러 시스템
2) 컬러 시스템 구조부터 뒤엎게 된 과정
Google Material
2. 다크모드와 컬러 시스템
2) 컬러 시스템 구조부터 뒤엎게 된 과정
Google Material
2. 다크모드와 컬러 시스템
2) 컬러 시스템 구조부터 뒤엎게 된 과정
Apple

HIG
2. 다크모드와 컬러 시스템
2) 컬러 시스템 구조부터 뒤엎게 된 과정
Apple

HIG
2. 다크모드와 컬러 시스템
2) 컬러 시스템 구조부터 뒤엎게 된 과정
grey010 ↔ ️grey010
쏘카 디자인 시스템 | p.55
2. 다크모드와 컬러 시스템
2) 컬러 시스템 구조부터 뒤엎게 된 과정
grey010 ↔ ️grey010
쏘카 디자인 시스템 | p. 56
2. 다크모드와 컬러 시스템
2) 컬러 시스템 구조부터 뒤엎게 된 과정
backgroundcolor↔️backgroundcolor
쏘카디자인시스템 | p.57
2.다크모드와컬러시스템
2)컬러시스템구조부터뒤엎게된과정
backgroundcolor↔️backgroundcolor
쏘카디자인시스템 | p.58
2.다크모드와컬러시스템
2)컬러시스템구조부터뒤엎게된과정
명도에따라분류된색상이아닌,

컬러가사용되는목적에따라분류된 

새로운컬러시스템이필요
쏘카디자인시스템 | p.59
2.다크모드와컬러시스템
2)컬러시스템구조부터뒤엎게된과정
그래서 컬러 시스템 어떻게 구축했다고?
2. 다크모드와 컬러 시스템
3) 새로운 컬러 시스템
쏘카 디자인 시스템 | p. 60
AS-IS

COLOR
2. 다크모드와 컬러 시스템
3) 새로운 컬러 시스템
AS-IS
TO-BE
명도에 따라 분류된 색상이 아닌,

컬러가 사용되는 목적에 따라 

분류된 컬러 시스템
2. 다크모드와 컬러 시스템
3) 새로운 컬러 시스템
2.다크모드와컬러시스템
3)새로운컬러시스템
시멘틱컬러
semantic:의미론의,의미의
앞서설명했던명도에따라분류된색상이아닌컬러가사용되는목적에따라분류된컬러시스템을 

시멘틱컬러라고명명하였습니다.
쏘카디자인시스템 | p.64
2.다크모드와컬러시스템
3)새로운컬러시스템
2.다크모드와컬러시스템
3)새로운컬러시스템
시멘틱컬러작업방식

들여다보기
시멘틱컬러의작업방식을자세히들여다보겠습니다.
쏘카디자인시스템 | p.66
2.다크모드와컬러시스템
3)새로운컬러시스템
기본팔레트의기능을하는베이직컬러를매핑해서시멘틱컬러에사용함으로써 grey010이라는베이직컬러의
hex값이변경되면해당컬러가적용된시멘틱컬러도일괄변경될수있도록작업하였습니다.
쏘카디자인시스템 | p.67
2.다크모드와컬러시스템
3)새로운컬러시스템
스케치 작업 방식에 적용한 컬러 매핑 방식입니다.
쏘카 디자인 시스템 | p. 68
2. 다크모드와 컬러 시스템
3) 새로운 컬러 시스템
코드에서도 시멘틱 컬러에 베이직 컬러가 매핑되어 있는 것을 확인 할 수 있습니다.
쏘카 디자인 시스템 | p. 69
2. 다크모드와 컬러 시스템
3) 새로운 컬러 시스템
AdobeSpectrum
컬러매핑관련레퍼런스사이트입니다.2.다크모드와컬러시스템
3)새로운컬러시스템
CarbonDesignSystem
컬러매핑관련레퍼런스사이트입니다.2.다크모드와컬러시스템
3)새로운컬러시스템
스케치,제플린작업방식
2.다크모드와컬러시스템
4)컬러시스템,어떻게툴에반영했을까?
이렇게정리된디자인시스템을어떻게툴에반영하였는지알아보겠습니다.
쏘카디자인시스템 | p.72
베이직컬러와시멘틱컬러의반영
쏘카디자인시스템 | p.73
2.다크모드와컬러시스템
4)컬러시스템,어떻게툴에반영했을까?
베이직 컬러와 시멘틱 컬러의 스케치 작업 방식과 제플린 업로드 방식입니다.
쏘카 디자인 시스템 | p. 74
2. 다크모드와 컬러 시스템
4) 컬러 시스템, 어떻게 툴에 반영했을까?
시멘틱컬러를스케치로작업한방식입니다.
쏘카디자인시스템 | p.75
2.다크모드와컬러시스템
4)컬러시스템,어떻게툴에반영했을까?
시멘틱컬러를제플린에서확인하는방식입니다.
쏘카디자인시스템 | p.76
2.다크모드와컬러시스템
4)컬러시스템,어떻게툴에반영했을까?
라이트,다크모드의관리
쏘카디자인시스템 | p.77
2.다크모드와컬러시스템
4)컬러시스템,어떻게툴에반영했을까?
라이트, 다크 모드 두 개의 라이브러리를 하나의 작업파일에 연결하였습니다.
쏘카 디자인 시스템 | p. 78
2. 다크모드와 컬러 시스템
4) 컬러 시스템, 어떻게 툴에 반영했을까?
클릭1번이면 

라이트&다크모드 

전환가능
Camilo플러그인사용
2.다크모드와컬러시스템
4)컬러시스템,어떻게툴에반영했을까?
쏘카디자인시스템 | p.79
다크모드화면을항상간편하게같이챙길수있음
쏘카디자인시스템 | p.80
2.다크모드와컬러시스템
4)컬러시스템,어떻게툴에반영했을까?
다크모드 

라이브러리로전환하여,

디자인시스템연결안된것도
바로식별가능!
쏘카디자인시스템 | p.81
2.다크모드와컬러시스템
4)컬러시스템,어떻게툴에반영했을까?
2.다크모드와컬러시스템Check Point!
다크모드대응:언젠가는해야할숙제가아닌가..
다크모드대응을위해서는의미론적컬러시스템이필요
컬러시스템은툴에어떤방식으로적용할지항상같이검토!
그런데 말입니다.
잠깐!!
잠깐!!
잠깐!!
잠깐!!
네이버맵다크모드가선행되어야

쏘카앱의다크모드가가능합니다ㅎㅎ
잠깐!!
혹시네이버맵개발자, 

디자이너분듣고계신다면
잠깐!!
잘부탁드립니다.
잠깐!!
1)기존작업방식과문제점
2)컴포넌트네이밍룰
3)개발방식(Origin,Option)
4)컴포넌트컬러
개발자와컴포넌트

구축하기
3.
3.개발자와컴포넌트구축하기
1)기존작업방식과문제점
똑같은UI리소스어떻게재활용할까?
쏘카디자인시스템 | p.91
3.개발자와컴포넌트구축하기
1)기존작업방식과문제점
디자이너들은스케치심볼기능을활용해형태를공유하고UI스타일가이드를활용해

최소한의용법과사용규칙을공유했습니다.
쏘카디자인시스템 | p.92
디자이너는?
스케치심볼기능+UI스타일가이드
3.개발자와컴포넌트구축하기 개발자들은기존코드를재활용하거나,새로구축하는방식으로작업했습니다.
쏘카디자인시스템 | p.93
개발자는?
기존코드복붙or새로구축
1)기존작업방식과문제점
3.개발자와컴포넌트구축하기 기존의UI리소스작업방식은다양한문제점을야기했습니다.
쏘카디자인시스템 | p.94
문제점1. 형태적,기능적일관성저하
문제점2. 모든화면을찾아일일히수정해야함
문제점3. 화면이많아질수록유지보수비용폭발적으로증가
1)기존작업방식과문제점
문제점 1. 형태적, 기능적 일관성 저하
문제점 2. 모든 화면을 찾아 일일히 수정해야 함
문제점 3. 화면이 많아질수록 유지보수 비용 폭발적으로 증가
3. 개발자와 컴포넌트 구축하기 이런 상황이 지속되다보니 자연스럽게, 컴포넌트 구축에 대한 논의가 이어졌습니다.
쏘카 디자인 시스템 | p. 95
타이밍 이즈 나우!
1) 기존 작업 방식과 문제점
3.개발자와컴포넌트구축하기
2)컴포넌트네이밍룰
쏘카디자인시스템 | p.96
컴포넌트구축의첫걸음,

네이밍통일하기a.k.a말모이
새롭게컴포넌트를구축하기로한우리는,우선각디자이너와개발자가다르게부르던
네이밍을통일하기로했습니다.
영화말모이를보면,전국의말을모아표준어를만드는장면이나오는데요,

저희가처음컴포넌트의이름을통일하는과정도이와크게다르지않았습니다.
쏘카디자인시스템 | p.97
3.개발자와컴포넌트구축하기
2)컴포넌트네이밍룰
✂ 가위?가새?강우?????
기존에는같은버튼을디자이너와각플랫폼의개발자들이서로다른기준으로다르게
부르고있었고,이를통일할필요가있었습니다.
쏘카디자인시스템 | p.98
3.개발자와컴포넌트구축하기
2)컴포넌트네이밍룰
각자 사용하는 툴이 다르고, 중요하게 생각하는 기준이 다르니 컴포넌트의 이름이 다른
건 당연한 일이었습니다.
쏘카 디자인 시스템 | p. 99
3. 개발자와 컴포넌트 구축하기
2) 컴포넌트 네이밍 룰
Design
iOS Android
Web
새로운 컴포넌트 네이밍 룰을 정하기에 앞서, 개발자들과 여러차례 논의를 통해 몇가지
좋은 의견을 발견했습니다.
쏘카 디자인 시스템 | p. 100
개발자 1.
“ 컴포넌트 명이 가장 뒤에 나오는게 사용할 때 편리해요. [무슨 _무슨_Button] 이렇게요! ”
개발자 2.
“ 컴포넌트를 구분할 땐 용도보다 실제 형태(Size, Style 등)를 기준으로 하는게 의미 있어요. ”
3. 개발자와 컴포넌트 구축하기
2) 컴포넌트 네이밍 룰
최종적으로정해진컴포넌트네이밍룰입니다.위계에따라컴포넌트특성을열거한다
음,마지막에는컴포넌트명과테마명를기재합니다.
쏘카디자인시스템 | p.101
3.개발자와컴포넌트구축하기
2)컴포넌트네이밍룰
Size
컴포넌트특성 컴포넌트명 테마
_ _Type Button[Theme]
실제 쏘카프레임의 버튼 컴포넌트 명을 조합할 수 있는 세부 항목입니다.
large fill button blue
regular line grey
small text coral
쏘카 디자인 시스템 | p. 102
3. 개발자와 컴포넌트 구축하기
2) 컴포넌트 네이밍 룰
Size
컴포넌트 특성 컴포넌트 명 테마
_ _Type Button [Theme]
컴포넌트 명 뒤에 오는 테마란, 동일한 컴포넌트지만 다양한 컬러 조합에 따라 달라지는
컴포넌트를 쉽게 정의할 수 있는 개념입니다.
쏘카 디자인 시스템 | p. 103
3. 개발자와 컴포넌트 구축하기
2) 컴포넌트 네이밍 룰
테마
[Theme]
large_fill_button
large_fill_button
large_fill_button
[blue]
[grey]
[coral]
쏘카 디자인 시스템 | p. 104
3. 개발자와 컴포넌트 구축하기
2) 컴포넌트 네이밍 룰
컴포넌트 네이밍룰을 사용해 적용한 쏘카프레임의 모든 버튼입니다.
실제 실무에서는, 스케치와 제플린을 사용하기 때문에 각 툴을 고려해 개발자와 작은 규
칙을 정해 컴포넌트 명을 확인하고 있습니다.
쏘카 디자인 시스템 | p. 105
3. 개발자와 컴포넌트 구축하기
2) 컴포넌트 네이밍 룰
개발자가 확인하는 영역디자이너만 사용하는 영역
regular_fill_button[grey]103 button/2 regular/1 fill/regular_fill_button[grey]103 button/2 regular/1 fill/
쏘카 디자인 시스템 | p. 106
어떻게 해야 사용하기 편하고

유연하게 확장할 수 있을까?
컴포넌트 개발,
3. 개발자와 컴포넌트 구축하기
3) 개발 방식 (Origin, Option)
쏘카 디자인 시스템 | p. 107
컴포넌트 개발 방식을 최대한 개발 친화적으로 접근하기 위해 개발자의 목소리에 집중
했습니다.
개발자
“ 각 컴포넌트마다 변하지 않는 고정 속성과 

자주 변하는 가변 속성을 구분해서 알려주세요! ”
3. 개발자와 컴포넌트 구축하기
3) 개발 방식 (Origin, Option)
컴포넌트 개발에 필요한 Origin(고정 속성)과 Option(가변 속성) 이라는 개념을 만들어
디자이너와 개발자가 원활하게 소통합니다.
쏘카 디자인 시스템 | p. 108
3. 개발자와 컴포넌트 구축하기
3) 개발 방식 (Origin, Option)
Origin과 Option
고정 속성 가변 속성
Origin(고정속성)은,말그대로변하지않는컴포넌트의아이덴티티와고유한속성입니
다.주로크기나텍스트스타일과같은형태가해당됩니다.
쏘카디자인시스템 | p.109
3.개발자와컴포넌트구축하기
3)개발방식(Origin,Option)
1
1
2
2
Origin
고정속성
Size(높이): 64
Textstyle: subtitle2
Option(가변속성)은변하거나,변할여지가있는속성입니다.주로각Origin의컬러
에해당합니다.이옵션조합에따라테마가결정됩니다.
쏘카디자인시스템 | p.110
3.개발자와컴포넌트구축하기
3)개발방식(Origin,Option)
1
1
2
2
Option
가변속성
Basecolor: blue050
Textcolor: white
실무에서,디자이너는스케치Manageoverrides기능을활용해Origin과Option값
을설정합니다.
쏘카디자인시스템 | p.111
3.개발자와컴포넌트구축하기
3)개발방식(Origin,Option)
개발자는각개발플랫폼에맞게Option값을손쉽게정의할수있도록셋팅한뒤사용
합니다.
쏘카디자인시스템 | p.112
3.개발자와컴포넌트구축하기
3)개발방식(Origin,Option)
쏘카 디자인 시스템 | p. 113
3. 개발자와 컴포넌트 구축하기
4) 컴포넌트 컬러
컴포넌트 컬러
쏘카컬러시스템에는베이직컬러와시멘틱컬러가있습니다.컴포넌트컬러는시멘틱
컬러에속하는컴포넌트만을위해정의된컬러셋입니다.
쏘카디자인시스템 | p.114
3.개발자와컴포넌트구축하기
4)컴포넌트컬러
컴포넌트컬러
시멘틱컬러
컴포넌트 컬러는 다른 시멘틱 컬러와 마찬가지로, 일부 컴포넌트에서 라이트와 다크모
드일 때 베이직 컬러가 1:1 매칭되지 않는 상황이 발생하면서 생긴 개념입니다.
쏘카 디자인 시스템 | p. 115
3. 개발자와 컴포넌트 구축하기
4) 컴포넌트 컬러
쏘카 디자인 시스템 | p. 116
3. 개발자와 컴포넌트 구축하기
4) 컴포넌트 컬러
https://twitter.com/ogu_official_kr
https://twitter.com/ogu_official_kr
처음부터 계획한건 아니었습니다. 컴포넌트를 개발하다 보니 예상치 못하게 문제가 발
생했고, 이를 해결하기 위해 컴포넌트 컬러를 도입했습니다.
컴포넌트 컬러는 시멘틱 컬러에 속하며, 각 컴포넌트 별로 구분한 뒤 각 컴포넌트에 필요
한 컬러를 라이트와 다크 1벌씩 매치합니다.
쏘카 디자인 시스템 | p. 117
3. 개발자와 컴포넌트 구축하기
4) 컴포넌트 컬러
컴포넌트 컬러를 활용하면 라이트 모드와 다크 모드에서 각각 다른 베이직 컬러를 하나
의 이름으로 정의할 수 있습니다.
쏘카 디자인 시스템 | p. 118
3. 개발자와 컴포넌트 구축하기
4) 컴포넌트 컬러
쏘카 디자인 시스템 | p. 119
3. 개발자와 컴포넌트 구축하기
4) 컴포넌트 컬러
쏘카 디자인 시스템 | p. 120
3. 개발자와 컴포넌트 구축하기
4) 컴포넌트 컬러
현재 컴포넌트 컬러의 한계
컴포넌트컬러도비례해서증가컴포넌트종류가늘어날수록,
현재컴포넌트컬러는각컴포넌트마다정의되고있어,컴포넌트의수가많으면많을수
록비효율적이고관리비용이증가하게되는한계를가지고있습니다.
쏘카디자인시스템 | p.121
3.개발자와컴포넌트구축하기
4)컴포넌트컬러
컴포넌트컬러체계까지완벽히구성하자
VS
우선개발한뒤점진적으로개선하자
쏘카디자인시스템 | p.122
3.개발자와컴포넌트구축하기
4)컴포넌트컬러
컴포넌트컬러체계까지완벽히구성하자
VS
우선개발한뒤점진적으로개선하자
쏘카디자인시스템 | p.123
3.개발자와컴포넌트구축하기
4)컴포넌트컬러
일단빨리만들어서

디자인시스템을검증하고,

문제가있으면수정하자!
쏘카디자인시스템 | p.124
3.개발자와컴포넌트구축하기
4)컴포넌트컬러
쏘카 디자인 시스템 | p. 125
3. 개발자와 컴포넌트 구축하기
4) 컴포넌트 컬러
우리가 바라는 컴포넌트 컬러의 최종 꼴은 통합 컴포넌트 컬러 체계를 구축해서, 모든 컴
포넌트가 동일한 컬러 조합을 사용하는 것입니다.
쏘카 디자인 시스템 | p. 126
3. 개발자와 컴포넌트 구축하기
4) 컴포넌트 컬러
https://twitter.com/ogu_official_kr
3.개발자와컴포넌트구축하기Check Point!
시작은네이밍통일부터!
편리함과확장성을고려한개발방식정하기
필요하면컴포넌트컬러따로조합하기
1)컴포넌트구축프로세스
2)컴포넌트우선순위워크샵
컴포넌트구축 

프로세스와우선순위
4.
4.컴포넌트구축프로세스와 

우선순위
1)컴포넌트구축프로세스
이미프로덕트규모가어느정도있는상태에서시작하는디자인시스템은, 

처음부터새로구축하는것보다어려움이많습니다.
쏘카디자인시스템 | p.129
디자인시스템?필요하죠!But...

중간부터시작하는디자인시스템
4.컴포넌트구축프로세스와 

우선순위
저희팀도처음디자인시스템을시작할때는열정이가득한만큼한번에
완벽한디자인시스템을구축할기대에부풀어있었습니다.
1)컴포넌트구축프로세스
쏘카디자인시스템 | p.130
한번에멋있게짜잔!완성!

하고싶었지만...
4.컴포넌트구축프로세스와 

우선순위
기존히스토리파악부터컴포넌트교체까지일감은2배인데,기존업무도무리없이진
행해야하니리소스는 절반혹은그보다없는셈이죠.
1)컴포넌트구축프로세스
쏘카디자인시스템 | p.131
일감은2배

리소스는0.5배
4.컴포넌트구축프로세스와 

우선순위
하지만울지말고,꾸준히디자인시스템을구축할수있는방법을열심히찾아봅니다.
1)컴포넌트구축프로세스
쏘카디자인시스템 | p.132
4.컴포넌트구축프로세스와 

우선순위
1)컴포넌트구축프로세스
쏘카디자인시스템 | p.133
느리지만,완성도는높게!
이터레이션안에컴포넌트1개완성를목표로!
4.컴포넌트구축프로세스와 

우선순위
반복되는컴포넌트구축을원활하게진행하기위해개발이터레이션에맞는컴포넌트
구축프로세스를만들었습니다.
1)컴포넌트구축프로세스
쏘카디자인시스템 | p.134
4.컴포넌트구축프로세스와 

우선순위
1)컴포넌트구축프로세스
쏘카디자인시스템 | p.135
중요한포인트는,컴포넌트구축도기존프로젝트와최대한비슷하게진행하고관리하
는것입니다.
4.컴포넌트구축프로세스와 

우선순위
1)컴포넌트구축프로세스
쏘카디자인시스템 | p.136
1.기획+2.킥오프
3.검토
4.제작
기존프로젝트관리툴과순서에따라아래와같이각컴포넌트별로구축프로젝트를
따로운영했습니다.
4.컴포넌트구축프로세스와 

우선순위
가장중요한과정은바로검토과정입니다.다양한플랫폼의개발자와함께협업해야하
는디자인시스템특성상,개발방식이나프로젝트관리과정에서끊임없이변수가생길
수있기때문에반드시본격적인개발을진행하기전꼼꼼한검토는필수입니다.1)컴포넌트구축프로세스
쏘카디자인시스템 | p.137
4.컴포넌트구축프로세스와 

우선순위
본격적인개발이시작되면디자이너는개발자에게컴포넌트에대한모든정보가담긴
가이드를전달합니다.
1)컴포넌트구축프로세스
쏘카디자인시스템 | p.138
4.컴포넌트구축프로세스와 

우선순위
가이드에는Origin과Option그리고각테마와상태값등을포함하며,라이트모드와
다크모드컴포넌트정보가모두담겨있어야합니다.
1)컴포넌트구축프로세스
쏘카디자인시스템 | p.60
4.컴포넌트구축프로세스와 

우선순위
가이드를전달할땐,컴포넌트의스펙도꼼꼼히정리해서전달합니다.
1)컴포넌트구축프로세스
쏘카디자인시스템 | p.140
4.컴포넌트구축프로세스와 

우선순위
2)컴포넌트우선순위워크샵
이제모든준비가완료되었습니다!컴포넌트를개발을시작하기만하면됩니다!

근데,뭐부터개발하죠?
쏘카디자인시스템 | p.141
개발합시다!근데,뭐부터?

컴포넌트우선순위워크샵
4.컴포넌트구축프로세스와 

우선순위
2)컴포넌트우선순위워크샵
쏘카디자인시스템 | p.142
1.
2.
디자이너의생각
버튼개발완료후두번째컴포넌트로,디자이너는비슷한형태와기능을지닌“칩”을
제안했습니다.
4.컴포넌트구축프로세스와 

우선순위
2)컴포넌트우선순위워크샵
하지만,보기와달리칩은복잡한개발이필요한상황이었고,빠듯한개발기간에맞춰
다시개발이쉬운컴포넌트를찾느라시간을허비했습니다.
쏘카디자인시스템 | p.143
1.
2.
개발자의생각
X
4.컴포넌트구축프로세스와 

우선순위
2)컴포넌트우선순위워크샵
컴포넌트개발순서도합리적인의사결정을통해효율적으로관리할필요가있다고생
각했습니다.
쏘카디자인시스템 | p.144
https://uxdesign.cc/workshop-how-to-prioritize-your-design-system-components-744aa99f07d7
4.컴포넌트구축프로세스와 

우선순위
2)컴포넌트우선순위워크샵
다이어그램에개발하고싶은컴포넌트를배치해,효과적인컴포넌트개발우선순위를
정할수있습니다.
쏘카디자인시스템 | p.145
https://uxdesign.cc/workshop-how-to-prioritize-your-design-system-components-744aa99f07d7
4.컴포넌트구축프로세스와 

우선순위
2)컴포넌트우선순위워크샵
쏘카디자인시스템 | p.146
디자인시스템어벤저스팀을포함한관심있는사람이모두모여워크샵을진행했습니
다.인원이많아,개발자와디자이너그룹으로나누어진행했습니다.
4.컴포넌트구축프로세스와 

우선순위
2)컴포넌트우선순위워크샵
쏘카디자인시스템 | p.147
각개발자와디자이너가완성한다이어그램입니다.

차이가보이시나요?
4.컴포넌트구축프로세스와 

우선순위
2)컴포넌트우선순위워크샵
크게보면두다이어그램은이런차이를가지고있습니다.
쏘카디자인시스템 | p.148
개발자:

어려운건일단미래에(?)
디자이너:

빨리완성하고싶다아!!!
4.컴포넌트구축프로세스와 

우선순위
2)컴포넌트우선순위워크샵
쏘카디자인시스템 | p.149
자세히살펴보면,개발자와디자이너의의견이일치하는부분이보입니다.

이런부분은추가논의필요없이넘어갑니다.
4.컴포넌트구축프로세스와 

우선순위
개발자와디자이너의생각이크게다른경우도있습니다.이런경우에는서로가왜그렇
게생각했는지이야기를나눕니다.
2)컴포넌트우선순위워크샵
쏘카디자인시스템 | p.150
4.컴포넌트구축프로세스와 

우선순위
2)컴포넌트우선순위워크샵
그러다보면...어느새극적타협을이룬개발자와디자이너를볼수있습니다.
쏘카디자인시스템 | p.151
(극적타협)
4.컴포넌트구축프로세스와 

우선순위
2)컴포넌트우선순위워크샵
이렇게완성된최종다이어그램을기반으로컴포넌트구축계획을세웁니다.
쏘카디자인시스템 | p.152
4.컴포넌트구축프로세스와우선순위Check Point!
현실적인컴포넌트개발목표세우기!
목표와일하는방식에맞는프로세스구축하기
컴포넌트구축우선순위도개발자와함께정하기
쏘카 디자인 시스템 | p. 154
쏘카프레임은 계속 달리는 중!
쏘카프레임의 미래
쏘카 디자인 시스템 | p. 155
쏘카프레임의 미래 쏘카 디자인 시스템을 위해 긴 시간을 달려오면서 얻은 가장 소중한 가치는 디자이너와
개발자가 서로를 이해하는 것 자체에 있다고 생각합니다.
디자인 시스템을 지탱하는 힘 =  

디자이너와 개발자가 꾸준히 서로를 이해하겠다는 합의!
쏘카프레임웹사이트
https://socarframe.socar.kr/
쏘카 디자인 시스템 | p. 60
쏘카 테크 블로그
https://tech.socarcorp.kr/
Thank you!
Q & A
product_design@socar.kr

More Related Content

What's hot

디자인 시스템 디자인하기
디자인 시스템 디자인하기디자인 시스템 디자인하기
디자인 시스템 디자인하기sangyong lee
 
서비스 운영을 위한 디자인시스템 프로젝트
서비스 운영을 위한 디자인시스템 프로젝트서비스 운영을 위한 디자인시스템 프로젝트
서비스 운영을 위한 디자인시스템 프로젝트NAVER Engineering
 
UX 디자인에서 사용자를 정의하는 3가지방법
UX 디자인에서 사용자를 정의하는 3가지방법 UX 디자인에서 사용자를 정의하는 3가지방법
UX 디자인에서 사용자를 정의하는 3가지방법 Dongsik Yang
 
UX Academy 18th 롯데온 UX/UI 개선 프로젝트
UX Academy 18th  롯데온 UX/UI 개선 프로젝트UX Academy 18th  롯데온 UX/UI 개선 프로젝트
UX Academy 18th 롯데온 UX/UI 개선 프로젝트RightBrain inc.
 
UX 아카데미 오픈프로젝트 [ 배달의민족 - UX/UI 개선]
UX 아카데미 오픈프로젝트 [ 배달의민족 - UX/UI 개선]UX 아카데미 오픈프로젝트 [ 배달의민족 - UX/UI 개선]
UX 아카데미 오픈프로젝트 [ 배달의민족 - UX/UI 개선]RightBrain inc.
 
Better. Faster. UXier. — AToMIC Design
Better. Faster. UXier. — AToMIC DesignBetter. Faster. UXier. — AToMIC Design
Better. Faster. UXier. — AToMIC Designjennifer gergen
 
[메조미디어] Media&Market Report_2023.04
[메조미디어] Media&Market Report_2023.04[메조미디어] Media&Market Report_2023.04
[메조미디어] Media&Market Report_2023.04MezzoMedia
 
UX 아카데미 오픈프로젝트 [29cm - UX/UI 개선]
UX 아카데미 오픈프로젝트 [29cm - UX/UI 개선] UX 아카데미 오픈프로젝트 [29cm - UX/UI 개선]
UX 아카데미 오픈프로젝트 [29cm - UX/UI 개선] RightBrain inc.
 
라이트브레인 UX/UI Trend 2022
라이트브레인 UX/UI Trend 2022라이트브레인 UX/UI Trend 2022
라이트브레인 UX/UI Trend 2022RightBrain inc.
 
소프트웨어 아키텍처
소프트웨어 아키텍처소프트웨어 아키텍처
소프트웨어 아키텍처영기 김
 
Design System in Figma A to Z.pdf
Design System in Figma A to Z.pdfDesign System in Figma A to Z.pdf
Design System in Figma A to Z.pdfAtiqur Rahaman
 
UX 아카데미 오픈프로젝트 [지그재그 - UX/UI 개선]
UX 아카데미 오픈프로젝트 [지그재그 - UX/UI 개선] UX 아카데미 오픈프로젝트 [지그재그 - UX/UI 개선]
UX 아카데미 오픈프로젝트 [지그재그 - UX/UI 개선] RightBrain inc.
 
[메조미디어] MZ세대 건강관리 트렌드 리포트
[메조미디어] MZ세대 건강관리 트렌드 리포트[메조미디어] MZ세대 건강관리 트렌드 리포트
[메조미디어] MZ세대 건강관리 트렌드 리포트MezzoMedia
 
UX 디자인사례와 커뮤니케이션
UX 디자인사례와 커뮤니케이션UX 디자인사례와 커뮤니케이션
UX 디자인사례와 커뮤니케이션Bryan Woo
 
UX 디자인 기본 개념과 프로세스
UX 디자인 기본 개념과 프로세스UX 디자인 기본 개념과 프로세스
UX 디자인 기본 개념과 프로세스Hyun-june Kwon
 
UX 아카데미 오픈프로젝트 [쿠팡이츠 - UX/UI 개선]
UX 아카데미 오픈프로젝트 [쿠팡이츠 - UX/UI 개선]UX 아카데미 오픈프로젝트 [쿠팡이츠 - UX/UI 개선]
UX 아카데미 오픈프로젝트 [쿠팡이츠 - UX/UI 개선]RightBrain inc.
 
UX Academy 18th 네이버 쇼핑 UX/UI 개선 프로젝트
UX Academy 18th 네이버 쇼핑 UX/UI 개선 프로젝트UX Academy 18th 네이버 쇼핑 UX/UI 개선 프로젝트
UX Academy 18th 네이버 쇼핑 UX/UI 개선 프로젝트RightBrain inc.
 
[메조미디어] Media&Market Report_2023.05
[메조미디어] Media&Market Report_2023.05[메조미디어] Media&Market Report_2023.05
[메조미디어] Media&Market Report_2023.05MezzoMedia
 

What's hot (20)

디자인 시스템 디자인하기
디자인 시스템 디자인하기디자인 시스템 디자인하기
디자인 시스템 디자인하기
 
서비스 운영을 위한 디자인시스템 프로젝트
서비스 운영을 위한 디자인시스템 프로젝트서비스 운영을 위한 디자인시스템 프로젝트
서비스 운영을 위한 디자인시스템 프로젝트
 
UX 디자인에서 사용자를 정의하는 3가지방법
UX 디자인에서 사용자를 정의하는 3가지방법 UX 디자인에서 사용자를 정의하는 3가지방법
UX 디자인에서 사용자를 정의하는 3가지방법
 
UX Academy 18th 롯데온 UX/UI 개선 프로젝트
UX Academy 18th  롯데온 UX/UI 개선 프로젝트UX Academy 18th  롯데온 UX/UI 개선 프로젝트
UX Academy 18th 롯데온 UX/UI 개선 프로젝트
 
UX 아카데미 오픈프로젝트 [ 배달의민족 - UX/UI 개선]
UX 아카데미 오픈프로젝트 [ 배달의민족 - UX/UI 개선]UX 아카데미 오픈프로젝트 [ 배달의민족 - UX/UI 개선]
UX 아카데미 오픈프로젝트 [ 배달의민족 - UX/UI 개선]
 
Better. Faster. UXier. — AToMIC Design
Better. Faster. UXier. — AToMIC DesignBetter. Faster. UXier. — AToMIC Design
Better. Faster. UXier. — AToMIC Design
 
[메조미디어] Media&Market Report_2023.04
[메조미디어] Media&Market Report_2023.04[메조미디어] Media&Market Report_2023.04
[메조미디어] Media&Market Report_2023.04
 
Design System.pdf
Design System.pdfDesign System.pdf
Design System.pdf
 
UX 아카데미 오픈프로젝트 [29cm - UX/UI 개선]
UX 아카데미 오픈프로젝트 [29cm - UX/UI 개선] UX 아카데미 오픈프로젝트 [29cm - UX/UI 개선]
UX 아카데미 오픈프로젝트 [29cm - UX/UI 개선]
 
라이트브레인 UX/UI Trend 2022
라이트브레인 UX/UI Trend 2022라이트브레인 UX/UI Trend 2022
라이트브레인 UX/UI Trend 2022
 
소프트웨어 아키텍처
소프트웨어 아키텍처소프트웨어 아키텍처
소프트웨어 아키텍처
 
Design System in Figma A to Z.pdf
Design System in Figma A to Z.pdfDesign System in Figma A to Z.pdf
Design System in Figma A to Z.pdf
 
UX 아카데미 오픈프로젝트 [지그재그 - UX/UI 개선]
UX 아카데미 오픈프로젝트 [지그재그 - UX/UI 개선] UX 아카데미 오픈프로젝트 [지그재그 - UX/UI 개선]
UX 아카데미 오픈프로젝트 [지그재그 - UX/UI 개선]
 
[메조미디어] MZ세대 건강관리 트렌드 리포트
[메조미디어] MZ세대 건강관리 트렌드 리포트[메조미디어] MZ세대 건강관리 트렌드 리포트
[메조미디어] MZ세대 건강관리 트렌드 리포트
 
UX 디자인사례와 커뮤니케이션
UX 디자인사례와 커뮤니케이션UX 디자인사례와 커뮤니케이션
UX 디자인사례와 커뮤니케이션
 
UX 디자인 기본 개념과 프로세스
UX 디자인 기본 개념과 프로세스UX 디자인 기본 개념과 프로세스
UX 디자인 기본 개념과 프로세스
 
UX 아카데미 오픈프로젝트 [쿠팡이츠 - UX/UI 개선]
UX 아카데미 오픈프로젝트 [쿠팡이츠 - UX/UI 개선]UX 아카데미 오픈프로젝트 [쿠팡이츠 - UX/UI 개선]
UX 아카데미 오픈프로젝트 [쿠팡이츠 - UX/UI 개선]
 
UX Academy 18th 네이버 쇼핑 UX/UI 개선 프로젝트
UX Academy 18th 네이버 쇼핑 UX/UI 개선 프로젝트UX Academy 18th 네이버 쇼핑 UX/UI 개선 프로젝트
UX Academy 18th 네이버 쇼핑 UX/UI 개선 프로젝트
 
React vac pattern
React vac patternReact vac pattern
React vac pattern
 
[메조미디어] Media&Market Report_2023.05
[메조미디어] Media&Market Report_2023.05[메조미디어] Media&Market Report_2023.05
[메조미디어] Media&Market Report_2023.05
 

Similar to 쏘카프레임 구축 배경과 과정

SW 아키텍처 분석방법
SW 아키텍처 분석방법 SW 아키텍처 분석방법
SW 아키텍처 분석방법 YoungSu Son
 
『이펙티브 디버깅』 - 디버깅 지옥에서 탈출하는 66가지 전략과 기법
『이펙티브 디버깅』 - 디버깅 지옥에서 탈출하는 66가지 전략과 기법『이펙티브 디버깅』 - 디버깅 지옥에서 탈출하는 66가지 전략과 기법
『이펙티브 디버깅』 - 디버깅 지옥에서 탈출하는 66가지 전략과 기법복연 이
 
How to build Design System?
How to build Design System?How to build Design System?
How to build Design System?John Kim
 
220319 해외 아티클 스터디 5기 : 1주차 발표
220319 해외 아티클 스터디 5기 : 1주차 발표220319 해외 아티클 스터디 5기 : 1주차 발표
220319 해외 아티클 스터디 5기 : 1주차 발표Minho Lee
 
SNU UX Lab 패턴랭귀지 (The origin of Pattern Language)
SNU UX Lab 패턴랭귀지 (The origin of Pattern Language)SNU UX Lab 패턴랭귀지 (The origin of Pattern Language)
SNU UX Lab 패턴랭귀지 (The origin of Pattern Language)Hyun-Soo Ji
 
Essencia ui ux specification 2014 10 15
Essencia ui ux specification 2014 10 15Essencia ui ux specification 2014 10 15
Essencia ui ux specification 2014 10 15uEngine Solutions
 
분석과 설계
분석과 설계분석과 설계
분석과 설계Haeil Yi
 
NAVER TECH CONCERT_FE2019_플랫폼 UI 개발 전략의 모든 것
NAVER TECH CONCERT_FE2019_플랫폼 UI 개발 전략의 모든 것NAVER TECH CONCERT_FE2019_플랫폼 UI 개발 전략의 모든 것
NAVER TECH CONCERT_FE2019_플랫폼 UI 개발 전략의 모든 것NAVER Engineering
 
프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)
프로그래머로 부터  배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)프로그래머로 부터  배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)
프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)Mayuko Sekiya
 
xUnitTestPattern/chapter8
xUnitTestPattern/chapter8xUnitTestPattern/chapter8
xUnitTestPattern/chapter8hyun soomyung
 
딥러닝을 이용한 사용자 선호도 기반 의상 추천 알고리즘 Ppt 선수강
딥러닝을 이용한 사용자 선호도 기반 의상 추천 알고리즘 Ppt 선수강딥러닝을 이용한 사용자 선호도 기반 의상 추천 알고리즘 Ppt 선수강
딥러닝을 이용한 사용자 선호도 기반 의상 추천 알고리즘 Ppt 선수강Minji Kang
 
Domain driven design ch3
Domain driven design ch3Domain driven design ch3
Domain driven design ch3HyeonSeok Choi
 
실용주의 아키텍트
실용주의 아키텍트실용주의 아키텍트
실용주의 아키텍트Haeil Yi
 
법안 검색 시스템 PPT
법안 검색 시스템 PPT법안 검색 시스템 PPT
법안 검색 시스템 PPTGwangho Kim
 
소프트웨어공학 프로젝트 최종발표.pptx
소프트웨어공학 프로젝트 최종발표.pptx소프트웨어공학 프로젝트 최종발표.pptx
소프트웨어공학 프로젝트 최종발표.pptxGwangho Kim
 
Curie: Deep-linking & App-indexing based mobile search engine
Curie: Deep-linking & App-indexing based mobile search engineCurie: Deep-linking & App-indexing based mobile search engine
Curie: Deep-linking & App-indexing based mobile search engineWonkyung Lyu
 
딥러닝 세계에 입문하기 위반 분투
딥러닝 세계에 입문하기 위반 분투딥러닝 세계에 입문하기 위반 분투
딥러닝 세계에 입문하기 위반 분투Ubuntu Korea Community
 
작품요약서 이영식
작품요약서 이영식작품요약서 이영식
작품요약서 이영식Yeongsik
 

Similar to 쏘카프레임 구축 배경과 과정 (20)

SW 아키텍처 분석방법
SW 아키텍처 분석방법 SW 아키텍처 분석방법
SW 아키텍처 분석방법
 
『이펙티브 디버깅』 - 디버깅 지옥에서 탈출하는 66가지 전략과 기법
『이펙티브 디버깅』 - 디버깅 지옥에서 탈출하는 66가지 전략과 기법『이펙티브 디버깅』 - 디버깅 지옥에서 탈출하는 66가지 전략과 기법
『이펙티브 디버깅』 - 디버깅 지옥에서 탈출하는 66가지 전략과 기법
 
How to build Design System?
How to build Design System?How to build Design System?
How to build Design System?
 
220319 해외 아티클 스터디 5기 : 1주차 발표
220319 해외 아티클 스터디 5기 : 1주차 발표220319 해외 아티클 스터디 5기 : 1주차 발표
220319 해외 아티클 스터디 5기 : 1주차 발표
 
SNU UX Lab 패턴랭귀지 (The origin of Pattern Language)
SNU UX Lab 패턴랭귀지 (The origin of Pattern Language)SNU UX Lab 패턴랭귀지 (The origin of Pattern Language)
SNU UX Lab 패턴랭귀지 (The origin of Pattern Language)
 
Essencia ui ux specification 2014 10 15
Essencia ui ux specification 2014 10 15Essencia ui ux specification 2014 10 15
Essencia ui ux specification 2014 10 15
 
분석과 설계
분석과 설계분석과 설계
분석과 설계
 
교바사
교바사교바사
교바사
 
NAVER TECH CONCERT_FE2019_플랫폼 UI 개발 전략의 모든 것
NAVER TECH CONCERT_FE2019_플랫폼 UI 개발 전략의 모든 것NAVER TECH CONCERT_FE2019_플랫폼 UI 개발 전략의 모든 것
NAVER TECH CONCERT_FE2019_플랫폼 UI 개발 전략의 모든 것
 
프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)
프로그래머로 부터  배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)프로그래머로 부터  배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)
프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)
 
xUnitTestPattern/chapter8
xUnitTestPattern/chapter8xUnitTestPattern/chapter8
xUnitTestPattern/chapter8
 
딥러닝을 이용한 사용자 선호도 기반 의상 추천 알고리즘 Ppt 선수강
딥러닝을 이용한 사용자 선호도 기반 의상 추천 알고리즘 Ppt 선수강딥러닝을 이용한 사용자 선호도 기반 의상 추천 알고리즘 Ppt 선수강
딥러닝을 이용한 사용자 선호도 기반 의상 추천 알고리즘 Ppt 선수강
 
Shader Driven
Shader DrivenShader Driven
Shader Driven
 
Domain driven design ch3
Domain driven design ch3Domain driven design ch3
Domain driven design ch3
 
실용주의 아키텍트
실용주의 아키텍트실용주의 아키텍트
실용주의 아키텍트
 
법안 검색 시스템 PPT
법안 검색 시스템 PPT법안 검색 시스템 PPT
법안 검색 시스템 PPT
 
소프트웨어공학 프로젝트 최종발표.pptx
소프트웨어공학 프로젝트 최종발표.pptx소프트웨어공학 프로젝트 최종발표.pptx
소프트웨어공학 프로젝트 최종발표.pptx
 
Curie: Deep-linking & App-indexing based mobile search engine
Curie: Deep-linking & App-indexing based mobile search engineCurie: Deep-linking & App-indexing based mobile search engine
Curie: Deep-linking & App-indexing based mobile search engine
 
딥러닝 세계에 입문하기 위반 분투
딥러닝 세계에 입문하기 위반 분투딥러닝 세계에 입문하기 위반 분투
딥러닝 세계에 입문하기 위반 분투
 
작품요약서 이영식
작품요약서 이영식작품요약서 이영식
작품요약서 이영식
 

More from NAVER Engineering

200820 NAVER TECH CONCERT 15_Code Review is Horse(코드리뷰는 말이야)(feat.Latte)
200820 NAVER TECH CONCERT 15_Code Review is Horse(코드리뷰는 말이야)(feat.Latte)200820 NAVER TECH CONCERT 15_Code Review is Horse(코드리뷰는 말이야)(feat.Latte)
200820 NAVER TECH CONCERT 15_Code Review is Horse(코드리뷰는 말이야)(feat.Latte)NAVER Engineering
 
200819 NAVER TECH CONCERT 03_화려한 코루틴이 내 앱을 감싸네! 코루틴으로 작성해보는 깔끔한 비동기 코드
200819 NAVER TECH CONCERT 03_화려한 코루틴이 내 앱을 감싸네! 코루틴으로 작성해보는 깔끔한 비동기 코드200819 NAVER TECH CONCERT 03_화려한 코루틴이 내 앱을 감싸네! 코루틴으로 작성해보는 깔끔한 비동기 코드
200819 NAVER TECH CONCERT 03_화려한 코루틴이 내 앱을 감싸네! 코루틴으로 작성해보는 깔끔한 비동기 코드NAVER Engineering
 
200819 NAVER TECH CONCERT 10_맥북에서도 아이맥프로에서 빌드하는 것처럼 빌드 속도 빠르게 하기
200819 NAVER TECH CONCERT 10_맥북에서도 아이맥프로에서 빌드하는 것처럼 빌드 속도 빠르게 하기200819 NAVER TECH CONCERT 10_맥북에서도 아이맥프로에서 빌드하는 것처럼 빌드 속도 빠르게 하기
200819 NAVER TECH CONCERT 10_맥북에서도 아이맥프로에서 빌드하는 것처럼 빌드 속도 빠르게 하기NAVER Engineering
 
200819 NAVER TECH CONCERT 08_성능을 고민하는 슬기로운 개발자 생활
200819 NAVER TECH CONCERT 08_성능을 고민하는 슬기로운 개발자 생활200819 NAVER TECH CONCERT 08_성능을 고민하는 슬기로운 개발자 생활
200819 NAVER TECH CONCERT 08_성능을 고민하는 슬기로운 개발자 생활NAVER Engineering
 
200819 NAVER TECH CONCERT 05_모르면 손해보는 Android 디버깅/분석 꿀팁 대방출
200819 NAVER TECH CONCERT 05_모르면 손해보는 Android 디버깅/분석 꿀팁 대방출200819 NAVER TECH CONCERT 05_모르면 손해보는 Android 디버깅/분석 꿀팁 대방출
200819 NAVER TECH CONCERT 05_모르면 손해보는 Android 디버깅/분석 꿀팁 대방출NAVER Engineering
 
200819 NAVER TECH CONCERT 09_Case.xcodeproj - 좋은 동료로 거듭나기 위한 노하우
200819 NAVER TECH CONCERT 09_Case.xcodeproj - 좋은 동료로 거듭나기 위한 노하우200819 NAVER TECH CONCERT 09_Case.xcodeproj - 좋은 동료로 거듭나기 위한 노하우
200819 NAVER TECH CONCERT 09_Case.xcodeproj - 좋은 동료로 거듭나기 위한 노하우NAVER Engineering
 
200820 NAVER TECH CONCERT 14_야 너두 할 수 있어. 비전공자, COBOL 개발자를 거쳐 네이버에서 FE 개발하게 된...
200820 NAVER TECH CONCERT 14_야 너두 할 수 있어. 비전공자, COBOL 개발자를 거쳐 네이버에서 FE 개발하게 된...200820 NAVER TECH CONCERT 14_야 너두 할 수 있어. 비전공자, COBOL 개발자를 거쳐 네이버에서 FE 개발하게 된...
200820 NAVER TECH CONCERT 14_야 너두 할 수 있어. 비전공자, COBOL 개발자를 거쳐 네이버에서 FE 개발하게 된...NAVER Engineering
 
200820 NAVER TECH CONCERT 13_네이버에서 오픈 소스 개발을 통해 성장하는 방법
200820 NAVER TECH CONCERT 13_네이버에서 오픈 소스 개발을 통해 성장하는 방법200820 NAVER TECH CONCERT 13_네이버에서 오픈 소스 개발을 통해 성장하는 방법
200820 NAVER TECH CONCERT 13_네이버에서 오픈 소스 개발을 통해 성장하는 방법NAVER Engineering
 
200820 NAVER TECH CONCERT 12_상반기 네이버 인턴을 돌아보며
200820 NAVER TECH CONCERT 12_상반기 네이버 인턴을 돌아보며200820 NAVER TECH CONCERT 12_상반기 네이버 인턴을 돌아보며
200820 NAVER TECH CONCERT 12_상반기 네이버 인턴을 돌아보며NAVER Engineering
 
200820 NAVER TECH CONCERT 11_빠르게 성장하는 슈퍼루키로 거듭나기
200820 NAVER TECH CONCERT 11_빠르게 성장하는 슈퍼루키로 거듭나기200820 NAVER TECH CONCERT 11_빠르게 성장하는 슈퍼루키로 거듭나기
200820 NAVER TECH CONCERT 11_빠르게 성장하는 슈퍼루키로 거듭나기NAVER Engineering
 
200819 NAVER TECH CONCERT 07_신입 iOS 개발자 개발업무 적응기
200819 NAVER TECH CONCERT 07_신입 iOS 개발자 개발업무 적응기200819 NAVER TECH CONCERT 07_신입 iOS 개발자 개발업무 적응기
200819 NAVER TECH CONCERT 07_신입 iOS 개발자 개발업무 적응기NAVER Engineering
 
200819 NAVER TECH CONCERT 06_놓치기 쉬운 안드로이드 UI 디테일 살펴보기
200819 NAVER TECH CONCERT 06_놓치기 쉬운 안드로이드 UI 디테일 살펴보기200819 NAVER TECH CONCERT 06_놓치기 쉬운 안드로이드 UI 디테일 살펴보기
200819 NAVER TECH CONCERT 06_놓치기 쉬운 안드로이드 UI 디테일 살펴보기NAVER Engineering
 
200819 NAVER TECH CONCERT 04_NDK로 안드로이드에 C++ 끼얹기
200819 NAVER TECH CONCERT 04_NDK로 안드로이드에 C++ 끼얹기200819 NAVER TECH CONCERT 04_NDK로 안드로이드에 C++ 끼얹기
200819 NAVER TECH CONCERT 04_NDK로 안드로이드에 C++ 끼얹기NAVER Engineering
 
200819 NAVER TECH CONCERT 02_안드로이드의 '안'자도 몰랐던 나는 어떻게 안드로이드 개발자가 되었을까?
200819 NAVER TECH CONCERT 02_안드로이드의 '안'자도 몰랐던 나는 어떻게 안드로이드 개발자가 되었을까?200819 NAVER TECH CONCERT 02_안드로이드의 '안'자도 몰랐던 나는 어떻게 안드로이드 개발자가 되었을까?
200819 NAVER TECH CONCERT 02_안드로이드의 '안'자도 몰랐던 나는 어떻게 안드로이드 개발자가 되었을까?NAVER Engineering
 
200819 NAVER TECH CONCERT 01_100만 달러짜리 빠른 앱을 만드는 비법 전수
200819 NAVER TECH CONCERT 01_100만 달러짜리 빠른 앱을 만드는 비법 전수200819 NAVER TECH CONCERT 01_100만 달러짜리 빠른 앱을 만드는 비법 전수
200819 NAVER TECH CONCERT 01_100만 달러짜리 빠른 앱을 만드는 비법 전수NAVER Engineering
 
Learning Disentangled Representation for Robust Person Re-identification
Learning Disentangled Representation for Robust Person Re-identificationLearning Disentangled Representation for Robust Person Re-identification
Learning Disentangled Representation for Robust Person Re-identificationNAVER Engineering
 
An expanding and expansive view of computing research
An expanding and expansive view of computing researchAn expanding and expansive view of computing research
An expanding and expansive view of computing researchNAVER Engineering
 
새로운 웹 스타일링, 안 본 사람 없게 해주세요
새로운 웹 스타일링, 안 본 사람 없게 해주세요새로운 웹 스타일링, 안 본 사람 없게 해주세요
새로운 웹 스타일링, 안 본 사람 없게 해주세요NAVER Engineering
 

More from NAVER Engineering (20)

200820 NAVER TECH CONCERT 15_Code Review is Horse(코드리뷰는 말이야)(feat.Latte)
200820 NAVER TECH CONCERT 15_Code Review is Horse(코드리뷰는 말이야)(feat.Latte)200820 NAVER TECH CONCERT 15_Code Review is Horse(코드리뷰는 말이야)(feat.Latte)
200820 NAVER TECH CONCERT 15_Code Review is Horse(코드리뷰는 말이야)(feat.Latte)
 
200819 NAVER TECH CONCERT 03_화려한 코루틴이 내 앱을 감싸네! 코루틴으로 작성해보는 깔끔한 비동기 코드
200819 NAVER TECH CONCERT 03_화려한 코루틴이 내 앱을 감싸네! 코루틴으로 작성해보는 깔끔한 비동기 코드200819 NAVER TECH CONCERT 03_화려한 코루틴이 내 앱을 감싸네! 코루틴으로 작성해보는 깔끔한 비동기 코드
200819 NAVER TECH CONCERT 03_화려한 코루틴이 내 앱을 감싸네! 코루틴으로 작성해보는 깔끔한 비동기 코드
 
200819 NAVER TECH CONCERT 10_맥북에서도 아이맥프로에서 빌드하는 것처럼 빌드 속도 빠르게 하기
200819 NAVER TECH CONCERT 10_맥북에서도 아이맥프로에서 빌드하는 것처럼 빌드 속도 빠르게 하기200819 NAVER TECH CONCERT 10_맥북에서도 아이맥프로에서 빌드하는 것처럼 빌드 속도 빠르게 하기
200819 NAVER TECH CONCERT 10_맥북에서도 아이맥프로에서 빌드하는 것처럼 빌드 속도 빠르게 하기
 
200819 NAVER TECH CONCERT 08_성능을 고민하는 슬기로운 개발자 생활
200819 NAVER TECH CONCERT 08_성능을 고민하는 슬기로운 개발자 생활200819 NAVER TECH CONCERT 08_성능을 고민하는 슬기로운 개발자 생활
200819 NAVER TECH CONCERT 08_성능을 고민하는 슬기로운 개발자 생활
 
200819 NAVER TECH CONCERT 05_모르면 손해보는 Android 디버깅/분석 꿀팁 대방출
200819 NAVER TECH CONCERT 05_모르면 손해보는 Android 디버깅/분석 꿀팁 대방출200819 NAVER TECH CONCERT 05_모르면 손해보는 Android 디버깅/분석 꿀팁 대방출
200819 NAVER TECH CONCERT 05_모르면 손해보는 Android 디버깅/분석 꿀팁 대방출
 
200819 NAVER TECH CONCERT 09_Case.xcodeproj - 좋은 동료로 거듭나기 위한 노하우
200819 NAVER TECH CONCERT 09_Case.xcodeproj - 좋은 동료로 거듭나기 위한 노하우200819 NAVER TECH CONCERT 09_Case.xcodeproj - 좋은 동료로 거듭나기 위한 노하우
200819 NAVER TECH CONCERT 09_Case.xcodeproj - 좋은 동료로 거듭나기 위한 노하우
 
200820 NAVER TECH CONCERT 14_야 너두 할 수 있어. 비전공자, COBOL 개발자를 거쳐 네이버에서 FE 개발하게 된...
200820 NAVER TECH CONCERT 14_야 너두 할 수 있어. 비전공자, COBOL 개발자를 거쳐 네이버에서 FE 개발하게 된...200820 NAVER TECH CONCERT 14_야 너두 할 수 있어. 비전공자, COBOL 개발자를 거쳐 네이버에서 FE 개발하게 된...
200820 NAVER TECH CONCERT 14_야 너두 할 수 있어. 비전공자, COBOL 개발자를 거쳐 네이버에서 FE 개발하게 된...
 
200820 NAVER TECH CONCERT 13_네이버에서 오픈 소스 개발을 통해 성장하는 방법
200820 NAVER TECH CONCERT 13_네이버에서 오픈 소스 개발을 통해 성장하는 방법200820 NAVER TECH CONCERT 13_네이버에서 오픈 소스 개발을 통해 성장하는 방법
200820 NAVER TECH CONCERT 13_네이버에서 오픈 소스 개발을 통해 성장하는 방법
 
200820 NAVER TECH CONCERT 12_상반기 네이버 인턴을 돌아보며
200820 NAVER TECH CONCERT 12_상반기 네이버 인턴을 돌아보며200820 NAVER TECH CONCERT 12_상반기 네이버 인턴을 돌아보며
200820 NAVER TECH CONCERT 12_상반기 네이버 인턴을 돌아보며
 
200820 NAVER TECH CONCERT 11_빠르게 성장하는 슈퍼루키로 거듭나기
200820 NAVER TECH CONCERT 11_빠르게 성장하는 슈퍼루키로 거듭나기200820 NAVER TECH CONCERT 11_빠르게 성장하는 슈퍼루키로 거듭나기
200820 NAVER TECH CONCERT 11_빠르게 성장하는 슈퍼루키로 거듭나기
 
200819 NAVER TECH CONCERT 07_신입 iOS 개발자 개발업무 적응기
200819 NAVER TECH CONCERT 07_신입 iOS 개발자 개발업무 적응기200819 NAVER TECH CONCERT 07_신입 iOS 개발자 개발업무 적응기
200819 NAVER TECH CONCERT 07_신입 iOS 개발자 개발업무 적응기
 
200819 NAVER TECH CONCERT 06_놓치기 쉬운 안드로이드 UI 디테일 살펴보기
200819 NAVER TECH CONCERT 06_놓치기 쉬운 안드로이드 UI 디테일 살펴보기200819 NAVER TECH CONCERT 06_놓치기 쉬운 안드로이드 UI 디테일 살펴보기
200819 NAVER TECH CONCERT 06_놓치기 쉬운 안드로이드 UI 디테일 살펴보기
 
200819 NAVER TECH CONCERT 04_NDK로 안드로이드에 C++ 끼얹기
200819 NAVER TECH CONCERT 04_NDK로 안드로이드에 C++ 끼얹기200819 NAVER TECH CONCERT 04_NDK로 안드로이드에 C++ 끼얹기
200819 NAVER TECH CONCERT 04_NDK로 안드로이드에 C++ 끼얹기
 
200819 NAVER TECH CONCERT 02_안드로이드의 '안'자도 몰랐던 나는 어떻게 안드로이드 개발자가 되었을까?
200819 NAVER TECH CONCERT 02_안드로이드의 '안'자도 몰랐던 나는 어떻게 안드로이드 개발자가 되었을까?200819 NAVER TECH CONCERT 02_안드로이드의 '안'자도 몰랐던 나는 어떻게 안드로이드 개발자가 되었을까?
200819 NAVER TECH CONCERT 02_안드로이드의 '안'자도 몰랐던 나는 어떻게 안드로이드 개발자가 되었을까?
 
200819 NAVER TECH CONCERT 01_100만 달러짜리 빠른 앱을 만드는 비법 전수
200819 NAVER TECH CONCERT 01_100만 달러짜리 빠른 앱을 만드는 비법 전수200819 NAVER TECH CONCERT 01_100만 달러짜리 빠른 앱을 만드는 비법 전수
200819 NAVER TECH CONCERT 01_100만 달러짜리 빠른 앱을 만드는 비법 전수
 
Apache Nemo
Apache NemoApache Nemo
Apache Nemo
 
Redux
ReduxRedux
Redux
 
Learning Disentangled Representation for Robust Person Re-identification
Learning Disentangled Representation for Robust Person Re-identificationLearning Disentangled Representation for Robust Person Re-identification
Learning Disentangled Representation for Robust Person Re-identification
 
An expanding and expansive view of computing research
An expanding and expansive view of computing researchAn expanding and expansive view of computing research
An expanding and expansive view of computing research
 
새로운 웹 스타일링, 안 본 사람 없게 해주세요
새로운 웹 스타일링, 안 본 사람 없게 해주세요새로운 웹 스타일링, 안 본 사람 없게 해주세요
새로운 웹 스타일링, 안 본 사람 없게 해주세요
 

쏘카프레임 구축 배경과 과정