Traveloka에서 디자인과 엔지니어링이 만나면

이것은 일반적인 사랑 이야기가 아닙니다.

참고 : 이것은 디자인과 엔지니어링 간의 상호 작용 중 하나 일뿐입니다. Traveloka의 디자인과 엔지니어링 사이의 모든 상호 작용 중 하나의 작은 스펙트럼에서 말하고 있습니다. 그리고 이것은 나의 이야기입니다.

시간이 지남에 따라 Traveloka는 6 년 동안있었습니다. 이 여정에서 우리는 버튼의 주황색 음영이나 카드 사이의 일관성없는 여백과 같이 꽤 오랫동안 시각적 버그가 많이 있음을 인정합니다.

디자인 팀은 표준과 다른 새로운 시각적 이상을 방지하기 위해 자체 디자인 키트를 구축하여 시각적 언어를 표준화하려는 노력을 시작했습니다. 우리는 시도했지만 어떻게 든이 문제는 해결되지 않았습니다. 자체 디자인 키트를 사용한 후에도 제품에 시각적으로 불일치하는 사항이 있습니다.

반면에 엔지니어들은보다 효율적으로 작업해야합니다. 재사용을 위해 동일한 구성 요소를 찾는 대신 유사한 구성 요소를 처음부터 새로 작성하는 것을 선호합니다. 이러한 구성 요소를 검색하는 것은 현재 워크 플로에서 마찰이되기 때문입니다.

이 모든 시간 동안 디자인 팀과 엔지니어링 팀은 서로 통신하지 않고 자신의 문제를 해결하려고했습니다. 그것은 우리가 매일 직면하는 문제를 해결하기 위해 디자인과 엔지니어링의 협력 가능성에 대한 의문을 불러 일으켰습니다. 디자인과 엔지니어링이 그 과정에서 서로 협력하고 사랑을 키울 수 있다는 것을 누가 알았습니까?

그들은 언제 처음 만났습니까?

토론은 2018 년 초 엔지니어링 팀이 React Native 및 React Native Web에 대해 조사했을 때 시작되었습니다 (React Native는 JavaScript를 사용하여 모바일 앱을 빌드하기위한 프레임 워크입니다). 이 연구가 시작되면 디자인 팀의 웹 UI 개발자가 참여했습니다.

이 과정에서 엔지니어링 팀은 플랫폼 간 개발의 기반으로 React Native를 사용하려는 아이디어를 가지고있었습니다. 여기에는 웹 UI 개발자가 컴포넌트를 작성하는 데 참여할 수있는 모바일 웹 개발이 포함됩니다.

이 이니셔티브가 시작되면 우리는 React Native를 배우고 단일 코드 소스에서 사용 가능한 모든 플랫폼에 대한 구성 요소를 더 크게 만들 수 있으므로 React Native를 배우고 최대한 활용했습니다. 그리고 우리가 먼저 서로를 알아가는 곳입니다.

사랑은 어떻게 자랐습니까?

그 후 우리는 서로 몇 번 만났지만 우리의 마음에는 아무것도 타지 않았습니다. 그러나이 인턴이있을 때 스파크가 발생합니다. 그것은 모두 인턴 프로젝트처럼 간단하게 시작되었습니다.

이 인턴은 React Native 엔지니어이며 설계와 엔지니어링 간의 협업을 원활하게 할 수있는 모든 것을 구축하도록 할당되었습니다. 그는 컴포넌트 라이브러리, 디자이너를위한 멋진 스케치 플러그인을 구축하고 디자인과 엔지니어링 간의 다른 협업 가능성을 연구하기 시작했습니다.

그 외에도 디자인 팀은 디자인 토큰 및 구성 요소에 대한 코드 기반의 단일 소스 소스 (SSOT)를 만들기위한 이니셔티브를 가졌습니다. 이 두 가지 운동으로 인해 우리는이 사명에 대해 협력하게되었습니다. 이곳은 사랑이 촉발되는 곳이며, 우리가 함께 밝은 미래를 향해 달려 가고 있다고 믿습니다.

사랑이 우리를 어디로 인도 했습니까?

여러 번 데이트를 한 후에 (읽기 : 회의), 마침내 우리는 다음 단계로의 관계를 맺기로 동의합니다. 걷는 길은 쉽지 않았지만 이것이 우리에게 맞는 것이라고 믿었습니다. 서로를 이해하는 것이 좋은 관계의 필수 열쇠입니다. 이것이 공동 작업하기로 결정했을 때의 일입니다.

우리는 서로의 작동 방식을 이해하는 것으로 시작했습니다. 그리고이 밤에는 악몽과 장애물로 가득 찬 도로가 지나고 마침내 더 나은 협업을 향하고 있습니다. 다음은 디자인과 엔지니어링 간의보다 나은 협업을 달성하기위한 약속입니다.

1. 코드 기반 디자인 시스템.

디자인과 엔지니어링 간의 협력은 상당히 어려웠습니다. 디자인과 코드 사이의 다리는 충분히 강하지 않아서 우리 사이의 작업이 어려워졌습니다.

그런 다음 코드 기반 디자인 시스템을 만들 겠다는 아이디어를 얻었습니다. 우리는 디자인 토큰을 JavaScript에 넣습니다. 이는 엔지니어가 사용하기 가장 쉬운 방법이지만 디자이너가 관리하기에는 여전히 간단합니다.

우리는 디자인 및 엔지니어링 표준을 충족하는 자체 수제 부품을 제작하기 위해 협력하고 있습니다. 이러한 구성 요소는 모든 플랫폼에서 사용되어 디자인의 일관성을 유지합니다.

2. 플러그인을 스케치하십시오.

이 스케치 플러그인은 디자인과 코드 사이의 다리 역할을합니다. 설계 측면에서는 디자이너가 동일한 구성 요소를 반복해서 생성 할 필요가 없기 때문에 협업이 쉬워집니다. 또한 디자이너는 표준화 된 구성 요소를 기반으로 사용자 인터페이스를 구축 할 수 있습니다.

엔지니어링 측면에서이 플러그인은 사용자 인터페이스를 엔지니어가 쉽게 구현할 수있는 코드로 변환합니다. 이렇게하면 엔지니어가 이전 디자인에서 기존 구성 요소를 찾을 필요가 없기 때문에 작업 시간이 줄어 듭니다.

3. 린터 및 통합 시각 테스트를 설계합니다.

사용자 인터페이스 및 코드로 작업 한 후 다음 단계는 두 가지 모두 표준화되었는지 확인하는 것입니다. 디자인 린터와 통합 비주얼 테스팅이 참여했습니다. 우리는 현재 사용자 인터페이스와 코드 모두에 대한 안전망처럼 작동하기 위해 디자인 린터 및 통합 시각적 테스트를 개발할 수있는 가능성을 연구하고 있습니다. 디자인 측면에서 디자인 린 터는 UI 디자이너가 표준화 된 구성 요소를 사용하도록 권장합니다. 한편 엔지니어링 측면에서 시각적 테스트는 제품 출시시 시각적 이상 가능성을 줄입니다. 이를 통해 미래에는 디자이너와 엔지니어의 삶이 쉬워 질 것입니다.

4. 시스템 문서를 설계하십시오.

다른 팀과 공동 작업 할 때는 둘 다 참조 할 수있는 지침을 마련하는 것이 좋습니다. 디자인 시스템 문서는 제품 관리자, 엔지니어 및 동료 디자이너를 포함한 모든 이해 관계자가 액세스 할 수있는 디자인 성경으로 작동합니다. 디자인 결정이 내려진 이유에 대해 모든 사람이 같은 보드에 있도록하는 것이 중요합니다. 이는 모든 디자인이 신중하게 고려되므로 신중하게 팀 간의 디자인 불일치를 피하는 데 도움이됩니다.

Ralistu Hayu Pratiwi의 일러스트레이션

이러한 모든 단계를 통해 우리는 서로 더 나은 미래의 협업과 통합을 할 수 있다고 믿습니다. 협력은 또한 더 나은 제품을 만들 수있는 가능성을 열어 줄 것입니다.

결국, 제품을 디자인하는 것은 제품을 예쁘고 재미있게 보이게하는 방법 만이 아닙니다. 디자인이 완벽하게 작동하도록 많은 엔지니어링 노력이 있습니다. 이것은 설계와 엔지니어링 사이의 협업의 중요성을 보여줍니다. 좋은 제품을 만드는 데 서로 없이는 살 수 없기 때문에 Steve Jobs가 말했듯이

“디자인은 단순히 모양과 느낌이 아닙니다. 디자인이 작동하는 방식입니다.”