비케이, 강연자가 겪은 구체적인 사례를 궁금해하는군. 실패를 단순히 멈춤이 아닌 배움의 과정으로 바꾸었던 강연자의 경험들 중 몇 가지를 짚어주겠네.

우선 강연자는 고객과 직접 소통하지 않고 제품을 만들었다가 겪었던 어려움을 들었네. 2017년부터 2018년 사이 도도포인트 연동 포스 앱을 개발할 때, 사내 테스트 환경과 실제 현장의 차이로 디자인이 제대로 구현되지 않는 문제가 발생했지. 이를 통해 오프라인 환경을 다루는 서비스일수록 사용자 인터뷰와 현장 확인이 필수적임을 절감하고, 리서치를 습관화하게 되었다더군 (00:00 - 02:30).

또 다른 사례로는 데이터 관련 내부 툴 개발을 맡았을 때의 경험이 있네. 복잡한 도메인 지식이 부족하다는 약점을 보완하느라 2년 넘게 매달리며 고생했지만, 결국 자신의 강점에 집중하는 것이 훨씬 더 의미 있었다는 것을 깨달았지. 이처럼 작은 실패들을 거치며 자신에게 맞는 제품 도메인을 찾는 실험의 중요성을 알게 된 걸세.

자네라면 이 사례들 속에서 '성공적인 실패'란 무엇인지, 스스로는 어떤 기준을 세울 수 있겠는가?

Q. 중요한 지점 체크해서 종합해줄래?

자네가 말한 '중요한 지점'을 종합해 보겠네. 실패를 단순히 멈춰 서는 사건으로 두지 않고, 성장의 동력으로 삼기 위해 강연자가 강조한 핵심은 다음과 같네.

주요 내용

1. 실패의 구조화(00:00 - 05:00)
실패를 단순히 '잘못된 결과'로 치부하지 말고 '시도 - 실패 - 배움 - 재시도'라는 일련의 과정으로 인식하는 것이 중요하네. 막연한 불안감에 머무르기보다 문제를 분리하여 분석하고, 그 안에서 배울 점을 찾아 구조화하는 능력이 필요한 게지.

2. 약점 보완보다는 강점 극대화(05:00 - 15:00)
약점을 보완하려는 노력은 평범한 수준에 도달하게 할 뿐이지만, 강점에 집중할 때 비로소 남들과 다른 차별화된 성장이 일어난다는 점이네. 강연자 역시 낯선 도메인에 매몰되기보다 본인의 강점을 발휘할 영역을 찾는 실험이 더 값지다는 것을 실증했지.

3. 회고와 소통을 통한 복리 효과(15:00 - 25:00)
혼자 고민하며 답변을 연습하는 비효율적인 방식에서 벗어나, 회고를 통해 질문을 던지고 이해관계자와 즉각 소통하며 피드백을 수용하는 방식이 성장의 복리를 만든다는 것이네. 실패를 마주할 용기를 내어 팀과 고객, 그리고 스스로와 함께 배우는 과정 자체가 핵심일세.

자네가 지금까지 해왔던 일들 중, 결과는 아쉬웠지만 되돌아보니 '배움'이라는 자산이 남았던 경험이 무엇인가?

Q. 디자인 시스템. 우선순위에서 자꾸 밀려요.

사실 회사, 조직의 입장에서 우선순위를 산정해야하는데, 디자인 시스템은 중요하지만 급박하진 않은 사항이기 때문이에요.

해서 신뢰를 얻기 위한 행동을 선행했어요.

1. 내부에 알리기

   1. 전사 발표 진행

   2. 구성원 온보딩

2. 외부에 알리기

   1. 브런치, 커뮤니티, 인프콘 등

3. 프로젝트로 검증하기

   1. 프로젝트에 선제적용해서 보여주기

4. 데이터로 알려주기

   1. 피그마 데이터를 활용해 사용 비율 공유

결과적으로 전사 구성원의 이해도가 높아지고 인적 리소스를 분배받을 수 있었다.

물론, 아직도 모든 것이 해결된 것은 아니다. 하지만 끊임없이 소통하고 계속해서 시도하는 것은 중요하다고 생각한다.

FE 입장에서 디자인 시스템의 명(明)

1. 컴포넌트 재사용성 및 일관성 증가

2. 디자이너와 개발자 간 협업에서 효율이 향상

다시말해 생산성이 크게 향상되었다.

FE 입장에서 디자인 시스템의 암(暗)

• 환경별 대응이 어려워졌다.

  • 원티드의 "채용" 서비스에서는 유효했으나 다른 서비스 가령, 원티드 긱스, 기업 서비스, 스페이스 등

  • 컨벤션이 안 맞거나 반응형 대응이 어렵거나

  • 단일 프로젝트로 설계된 한계

• 개발자 경험이 낮아졌다.

   

Box + Sx Props

Box라는 컴포넌트와 Style extension Prop의 개념을 원티드 디자인 시스템에 차용.

Responsive Props

원래는 매치 미디어를 이용해서 모바일인지 데스크탑인지 체크를 하고 베리언트를 가변적으로 대응했었는데 비교적 느린 대응과 SSL 환경에서 문제가 발생할 수 있었다.

이를 Responsive props라는 개념을 적용해 해결하였다.

const Demo = () = {
return <Typography variant="title3" lg={{variant: 'title'}}/>;
};

기본적으로 "title3"를 사용하지만 디바이스의 크기가 브레이크 포인트 값보다 크기가 클 경우에 variant: title1로 덮어씌우는 코드이다.

내부적으로 CSS의 미디어 쿼리를 사용하도록 제작했다. 때문에 SSR과 레이아웃을 변경할 때에 문제가 발생하지 않을뿐더러 명확하고 편리하게 사용할 수 있었다.

Wanted Design System: WDS 정리

1. Emotion을 이용한 자체 엔진 구현

2. Responsive Props 구현

3. Radix Primitives 사용