Indigo.Design을 사용하여 스케치에서 Visual Studio 코드로의 핸드오프 간소화

(협찬 기사입니다.) 생각해보면 소프트웨어 팀은 스포츠 팀과 많이 비슷합니다. 각 팀 구성원은 동일한 정확한 목표를 위해 노력하지만 그들이 수행하는 역할과 수행하는 행동은 서로 크게 다릅니다.

그렇기 때문에 한 팀 구성원에서 다른 구성원으로 공을 원활하게 이동하는 방법이 중요합니다.

불행히도 소프트웨어 팀 내에서 발생하는 핸드오프는 스포츠 분야에서 보는 것처럼 자연스럽게 매끄럽지 않습니다. 그리고 그 주된 이유 중 하나는 제품을 구축하는 데 사용되는 다양한 시스템과 접근 방식 때문입니다.

디자이너는 Sketch에서 픽셀 단위의 완벽한 UI를 만들고 개발자가 Visual Studio Code IDE에서 앱을 빌드할 때 사용할 수 있는 언어로 번역하기만 하면 됩니다. 파이프라인을 통해 제품 디자인을 원활하게 이동할 수 있는 방법이 없으면 이러한 비효율성으로 인해 앱이 디자이너에서 개발자로 이동한 후 값비싼 재작업 및 디버깅이 발생합니다.

말할 필요도 없이 Sketch-to-IDE 핸드오프 문제에 대한 솔루션이 나온 지 오래되었습니다. 소프트웨어 팀이 서로 협업하거나 의사 소통하는 방법을 모르는 것은 아닙니다. 그들의 이질적인 시스템과 전략이 한 팀에서 다른 팀으로의 전환을 복잡하고 시간 소모적이며 오류가 만연하기 때문입니다.

오늘은 이러한 일이 발생하는 이유와 Indigo.Design의 두 가지 플러그인과 프로토타이핑 클라우드 플랫폼으로 대행사가 문제를 해결할 수 있는 방법을 살펴보겠습니다.

디자이너-개발자 핸드오프는 어디에서 잘못됩니까?

첫째, 우리가 정말로 물어야 할 것은 다음과 같습니다.

디자이너-개발자 핸드오프가 왜 그런 문제입니까?

Nick Babich는 최근 디자이너가 완벽하게 측정되고 일관되게 제작된 디지털 솔루션을 만들기 위해 많은 노력을 기울이는 방법에 대해 썼습니다. 그러나 디자인 시스템은 개발 시스템으로 유창하게 번역되지 않습니다.

디자이너가 인터페이스에 더 많은 작업을 수행할수록 실제로 개발자와 더 많이 통신해야 합니다. 따라서 Sketch 디자인 파일을 넘겨주고 개발자가 이를 실행하도록 놔두는 것만으로는 충분하지 않습니다. 디자이너는 움직이는 모든 부분이 어떻게 배치되고, 간격을 두고, 스타일이 지정되고, 색상이 지정되고, 연결되는지 등을 설명하는 디자인 사양을 제공해야 합니다.

앱이 결국 픽셀 단위로 완성되도록 하는 유일한 방법이었습니다. 그럼에도 불구하고 개발자가 IDE 내부에 들어가면 여전히 많은 구현이 필요합니다.

상상할 수 있듯이 이 전체 프로세스는 디자이너에게 많은 시간이 걸립니다. 그러나 디자인 사양이 없으면 개발자는 위험한 추측 게임을 해야 합니다.

뿐만 아니라 개발자는 일반적으로 지루한 작업이며 UI만 나타내는 HTML 및 CSS로 코딩하는 습관이 없습니다. 웹 앱이 작동하도록 하는 배후에는 훨씬 더 많은 코드가 있으며 모든 개발자가 UI 마크업을 작성하는 방법을 배우는 데 능숙하거나 관심이 있는 것은 아닙니다. 그들이 이 위치에 놓이게 되면 가파른 학습 곡선으로 인해 프로젝트에 더 많은 시간이 추가되고 결과적으로 재작업 및 디버깅으로 인해 통제할 수 없는 비용이 발생합니다.

그래서, 정말로, 디자이너-개발자 핸드오프는 우리가 낭비할 여유가 있는 누구의 시간의 문제가 되었습니다.

"

개발자가 디자인을 현실로 만드는 방법을 알 수 있도록 모든 것을 수정해야 하는 것은 디자이너입니까?

또는:

디자인을 보고 화면의 모든 것을 수동으로 측정하고 눈으로 확인하는 것만으로 모든 사양이 올바르게 표시되기를 바라는 개발자입니까?

두 시나리오 모두에서 승자는 없습니다. 그리고 그 과정에서 이익 마진을 갉아먹게 될 것입니다.

디자이너와 개발자를 동일한 플랫폼에서 강제로 작업하는 것이 최상의 솔루션이라고 믿는 에이전시가 있을 수 있습니다. 그렇게 하면 Sketch에서 Visual Studio Code로 핸드오프하는 동안 이 모든 번역이나 해석을 수행할 필요가 없습니다. 그러나 이는 종종 디자이너의 창의성을 저해하거나 개발자의 효과적인 소프트웨어 솔루션을 구축하는 능력을 방해하는 결과를 낳습니다.

그래서, 답은 무엇입니까?

Indigo.Design으로 디자이너-개발자 핸드오프 개선

Indigo.Design이 소프트웨어 팀의 핸드오프 문제를 해결하려는 첫 번째 플랫폼이 아닙니다. InVision과 Zeplin은 모두 자체 솔루션을 제공했습니다.

이러한 각 플랫폼은 개발자가 시각적 사양에 더 쉽게 액세스할 수 있도록 하는 동시에 결과적으로 디자이너-개발자 팀의 효율성을 향상시킵니다. 구체적으로 특별히:

• 플랫폼이 레드라인을 처리하므로 디자이너는 더 이상 UI를 마크업할 필요가 없습니다.
• 개발자는 디자이너의 도움 없이 수동으로 디자인 사양을 추출할 수 있습니다.

즉, InVision 및 Zeplin과 같은 플랫폼에서 개발자는 여전히 각 요소를 검사하고 추출된 사양을 기반으로 수동으로 코딩해야 합니다. 이러한 플랫폼은 아직 Sketch와 Visual Studio Code 간의 원활한 다리를 만들지 못했습니다.

따라서 디자이너와 개발자가 서로 최대한 효율적으로 작업하기를 원할 경우 Indigo.Design은 다음과 같은 문제에 대한 답을 개발했습니다.

1단계: 스케치로 디자인하기

이 단계에서 디자이너가 변경해야 하는 것은 단 한 가지입니다. 앱, 페이지 및 흐름은 여전히 ​​Indigo.Design UI 키트의 구성 요소를 사용하여 Sketch 내에서 평소와 같이 디자인됩니다.

그러나 더 이상 앱에 대한 레드라인이나 사양을 컴파일할 필요가 없습니다. Indigo.Design이 알아서 처리해 드립니다.

이것을 활용하기 위해 디자이너는 이전에 사용하던 프로토타이핑 시스템을 버려야 합니다. 이 간소화되고 오류 없는 새로운 시스템을 통해 디자이너는 Indigo.Design 플러그인을 사용하여 자신의 디자인을 클라우드로 쉽게 푸시할 수 있습니다.

Plugins menu > Indigo.Design > Publish Prototype 에서 액세스할 수 있습니다.

클라이언트가 검토하거나 개발자가 작업할 수 있도록 디자이너가 파일을 내보내고 다른 시스템에 업로드할 필요가 없습니다. 그들은 프로토타입을 게시할 위치에 머물게 됩니다.

프로세스를 완료하는 데에도 약 1분이 소요됩니다. 그런 다음 디자이너는 프로토타입을 검토하고 의견을 제시하기 위해 클라이언트 및 다른 사람들과 공유할 수 있는 클라우드에 대한 링크를 받습니다.

2단계: Indigo.Design 클라우드에서 작업

다른 사람들을 클라우드로 끌어들이는 것은 쉽습니다. 제공된 링크를 통해 디자인을 검토할 수 있는 경험 클라우드로 이동합니다.

디자인 위에 댓글을 남기는 것도 쉽습니다. 모든 사용자는 댓글 패널을 열고 핀을 놓고 댓글을 첨부하기만 하면 됩니다.

이 협업 소프트웨어에는 그 이상의 것이 있습니다. 프로토타입은 클라우드에서 편집할 수도 있습니다.

이에 액세스하려면 디자이너, 개발자 및 그룹 액세스 권한이 있는 모든 사람이 프로토타입 라이브러리에서 프로젝트를 찾습니다.

"프로토타입 편집"을 클릭하여 Indigo.Design 편집기로 들어갑니다.

화면이 선택되면 디자이너는 핫스팟을 추가하여 앱에서 새 상호 작용을 만들 수 있습니다.

Indigo.Design 편집기를 사용하여 앱 UI의 사양을 검사할 수도 있습니다.

요소 위로 마우스 를 가져가면 상대적인 간격 사양이 표시됩니다. 요소를 클릭하면 훨씬 더 자세한 정보를 볼 수 있습니다.

개발자는 이 패널에서 깔끔하게 작성 및 출력된 CSS를 편집하거나 복사할 수도 있습니다. (그렇지 않아도 되지만 다음 단계에서 설명하겠습니다.)

사양을 생성할 때 디자이너의 시간을 절약한다는 말이 무슨 뜻인지 아십니까? 이 디자인을 Indigo.Design 클라우드에 푸시하기만 하면 사양이 자동으로 생성됩니다.

3단계: Visual Studio Code에서 빌드

이제 디자인이 개발에 들어갈 만큼 충분히 좋다고 가정해 보겠습니다. Indigo.Design 프로토타입을 Visual Studio Code로 옮기는 것은 Sketch에서 옮기는 것만큼이나 쉽습니다.

Sketch의 Indigo.Design 플러그인에서 제공하는 원본 클라우드 링크를 검색합니다. 더 이상 가지고 있지 않다면 괜찮습니다. Indigo.Design의 라이브러리 화면에서 검색할 수 있습니다.

이제 개발자는 Indigo.Design 코드 생성기 확장을 설치하기만 하면 됩니다. 이것이 Visual Studio Code가 Indigo.Design과 직접 통신하여 프로토타입을 검색할 수 있게 해주는 것입니다.

확장 프로그램이 설정되면 개발자는 다음을 수행합니다.

이미 개발된 앱 셸을 엽니다. 그런 다음 Indigo.Design 코드 생성기를 시작합니다. 여기에서 클라우드 링크를 입력합니다.

이렇게 하면 클라우드에 있는 앱 디자인과 해당 디자인을 구성하는 개별 구성 요소가 포함된 팝업이 표시됩니다.

개발자는 앱의 모든 구성 요소에 대한 코드를 생성하거나 필요한 구성 요소만 확인하여 구성 요소별로 이동할 수 있는 옵션이 있습니다. 이는 앱이 진행 중이고 개발자가 새 구성 요소를 VSC로 가져오기만 하면 되는 경우에 특히 유용합니다.

"코드 자산 생성"을 클릭하면 선택한 구성 요소가 Angular에 읽기 쉽고 의미 있는 HTML 및 CSS로 추가됩니다.

이제 개발자는 스타일을 다시 작성하거나 다른 사양을 구성하는 측면에서 걱정할 필요가 없습니다. 대신 비즈니스 기능을 구축하고 제품을 개선하는 데 시간을 할애할 수 있습니다.

이 프로세스에 대한 참고 사항

이 Sketch – 클라우드 – Visual Studio Code 워크플로 는 디자인의 첫 번째 반복에서만 작동하지 않는다는 점을 지적하는 것이 중요합니다. 개발자는 디자이너가 클라이언트와의 피드백 또는 사용자와의 사용성 연구를 통해 작업하는 동안 빌드할 수 있습니다.

따라서 디자이너가 Indigo.Design을 통해 로그인 양식 UI를 이동하고 개발자가 작업을 이동하기 위해 코드를 생성했다고 가정해 보겠습니다.

양식에서 작업하는 동안 개발자는 TypeScript 파일에 일부 인증 코드를 구현했습니다.

하지만 그 동안 디자이너는 클라이언트로부터 새로운 Google 범용 로그인을 구현해야 한다는 메시지를 받았습니다. 즉, UX가 변해야 합니다.

업데이트가 준비되고 프로토타입이 Indigo.Design에 동기화되면 디자이너는 개발자에게 변경 사항을 알리도록 메시지를 보냅니다. 따라서 개발자는 Visual Studio Code Generator를 다시 한 번 시작합니다. 그러나 로그인 화면을 재생성할 때 TypeScript 파일에서 "Do Not Override"를 선택합니다. 이렇게 하면 새 HTML과 CSS를 동시에 가져오는 동안 작성한 코드를 보존할 수 있습니다.

그런 다음 개발자는 업데이트된 디자인을 기반으로 필요한 조정을 수행할 수 있습니다.

마무리

Indigo.Design은 Sketch에서 작업하는 디자이너와 Visual Studio Code에서 작업하는 개발자를 위한 효율적이고 버그 없는 핸드오프를 효과적으로 만들었습니다.

디자이너는 한 플랫폼에서 디자인하고 다른 플랫폼에서 프로토타이핑하거나 디자인 사양을 작성하거나 파일 내보내기를 처리하는 데 시간을 낭비하지 않습니다. 개발자는 정적 파일에서 디자인 의도를 다시 생성하는 데 시간을 낭비하지 않습니다.

Indigo.Design의 제품 개발 수석 부사장인 Jason Beres는 다음과 같이 말했습니다.

Indigo.Design 코드 생성을 사용하면 이러한 모든 버그를 100% 피할 수 있습니다. 디자인 정신이 유지될 뿐만 아니라 픽셀 단위의 완벽한 HTML과 CSS가 생성되어 개발자가 수동으로 디자인을 맞춰야 하는 불행한 상황에 처하지 않습니다.

그리고 디자이너-개발자 워크플로 및 핸드오프에서 기술적인 문제를 해결함으로써 귀하의 에이전시는 재작업 및 디버깅 비용을 크게 줄일 수 있습니다. 또한 소프트웨어 팀에 프로세스를 통해 픽셀 단위의 완벽한 상태로 앱을 가져올 수 있는 보다 효율적이고 빠른 방법을 제공하여 수익을 높일 수 있습니다.