디자인 시안 작업이란?

서비스의 전반적인 룩앤필 및 디테일한 요소들에 대해 고객사의 선호를 듣고 디자이너가 디자인 도구(스케치, 포토샵, XD, 피그마 등)로 모바일 화면 또는 웹 화면을 작성해서 공유하는 과정을 말합니다. 전반적인 룩엔필에 대한 예를 들면, '귀엽고 동글동글한 느낌', '전문적이고 차가운 느낌', '따뜻하고 여성스러운 느낌' 등이 있을 수 있고, 디테일한 요소들이라면 주요 색상, 아이콘, 폰트 종류나 크기, 텍스트나 박스 간 간격, 라운딩, 배경 이미지, 그림자 효과, 메뉴바 두께 등이 있을 것입니다.

퍼블리싱 작업이란?

웹 개발에서 화면을 구성하는 HTML/CSS 코드를 작성/수정해서 디자인 시안을 코드로 변환하는 작업을 말합니다. 디자인 시안이 없이도 다른 서비스를 참고하거나 고객사의 선호를 듣고 바로 화면을 구성하는 코드를 작성할 수도 있습니다. 인썸니아는 모바일앱도 웹앱(하이브리드앱)으로 제작하기 때문에 모바일앱과 웹서비스 모두 퍼블리싱(HTML/CSS 코드 작성/수정) 과정을 거쳐 디자인 고도화 작업을 하고 있습니다.

인썸니아는 디자인/퍼블리싱 작업을 어느 시점에 하나요?

폭포수 개발 방식에서는 상세한 기획서를 바탕으로 디자이너가 디자인 시안 작업을 먼저 하고 고객의 컨펌을 받은 후 퍼블리셔가 HTML/CSS 코드를 작성하면 이 코드를 서버 개발자가 서버 코드를 붙이는 과정을 거칩니다. 인썸니아는 이와 상당히 다른 애자일 개발 방식으로 진행합니다. 상세하지 않은 기획서를 바탕으로 서버 개발을 먼저 진행하면서 구현된 결과물을 바탕으로 고객사와 빈번하게 소통하며 기능을 수정/추가하여 마무리짓고 이 후에 디자인/퍼블리싱은 선택적으로 진행합니다.

이렇게 디자인 작업을 개발 전반부가 아니라 개발 후반부에 '필요한 경우에만' 하고 있습니다. 서버 개발자가 디자인 템플릿을 가지고 작업한 결과물만으로도 고객사가 만족하는 경우(주로 MVP 단계)에는 디자이너와 퍼블리셔를 투입하지 않고 비용 절감과 기능 구현을 우선시합니다. 화면의 간격이나 대략적인 배치 정도만 조정이 필요한 경우는 디자인 시안 작업을 건너뛰고 퍼블리셔가 고객사와 소통하며 바로 디자인 고도화를 할 수도 있습니다.

왜 디자인/퍼블리싱을 나중에 하는데요?

프로젝트 초반에 디자인/퍼블리싱 작업을 먼저 하지 않는 이유는, 초기에 디자인이 확정되어 버리면 개발을 진행하면서 기능 및 디자인 변경을 하기가 어려워지고 수정 비용이 상승하기 때문이기도 하고 스타트업 프로젝트의 우선순위가 디자인이 아니라 플랫폼의 안전한 개발이기 때문이기도 합니다. 크고 작은 수정을 서버 개발자가 고객사와 소통하면서 바로 반영할 수 있다면 빈번하게 기능 변경/추가를 해나가는 것이 가능합니다.

스타트업 서비스 개발 과정은 새로운 비즈니스와 편리한 사용성을 찾아나가야 하는 과정이므로 빈번한 기능 수정을 피해야 하는 것이 아니라 장려해야 하는 것이며 개발 프로세스가 이에 맞춰 변형되고 발전해야 한다고 생각합니다. 프로젝트가 실패하는 이유는 디자인이 덜 예뻐서가 아니라 안정적으로 개발이 완료되지 않아서인데, 디자인 단계가 앞쪽에 있으면 개발 단계에 들어가기도 전에 고객사의 눈에 보이는 디자인에 불필요한 에너지와 시간과 비용을 많이 쓰게 됩니다.

기능 변경이 있을 때마다 기획자가 기획서를 변경하고, 디자이너가 디자인 시안을 변경하고 퍼블리셔가 화면 코드를 변경하고, 서버 개발자가 이 모든 변경 작업을 대기했다가 백엔드 코드를 반영 해야 한다면 이 때의 커뮤니케이션 비용과 수정 비용, 대기 시간 등은 상당히 커지고 이들의 일정과 리소스를 관리하려면 숙련된 프로젝트 매니저 역할도 필요하게 됩니다. 이런 비용 때문에 폭포수 방식에서는 기획의 변경을 용인하기 어려워집니다.

그래서 저희는 기획자와 프로젝트 매니저의 역할을 따로 두지 않고 고객사가 직접 기획을 지휘(기획서 작성이 아니라 기능 의사결정)하시고 초중반부터 구현 결과물을 공유하여 실제로 써보면서 기능 수정/고도화를 결정할 수 있도록 하고 있습니다. 디자이너와 퍼블리셔의 작업을 프로젝트 초반이 아닌 후반부에 두고 있으며 디자인 고도화가 필요한 프로젝트에만 부분적으로 투입하고 있습니다. 풀스택 서버 개발자가 기능 구현을 어느 정도 마무리하고 확정하여 당장 출시해도 괜찮은 상태로 유지하여 프로젝트 실패 가능성을 낮추면서, 선택적인 디자인/퍼블리싱 작업으로 디자인을 고도화 합니다.

디자인/퍼블리싱 단계 이전에도 서버 개발자의 작업 만으로도 화면 구성과 입력창, 버튼, 메뉴 등의 배치를 직접 수행할 수 있습니다. 디자인 템플릿/기능 컴포넌트를 구축하여두었고 서버 개발자를 UI까지 깔끔하게 제작할 수 있는 풀스택 개발자로 양성하고 있기 때문입니다. 디자인/퍼블리싱 과정 없이도 어느 정도 말끔한 상태를 서버 개발자들의 작업만으로 유지할 수 있습니다.

디자인/퍼블리싱 작업을 부분적이고 점진적으로 합니다

디자인/퍼블리싱 작업을 할 때는 전체 페이지를 한 번에 디테일하게 작업하지 않고 핵심 페이지의 룩엔필 정도만 다듬는 수준으로 초벌 작업을 하고 세부 요소에 대한 피드백에 따라 선택적으로 고도화해나갑니다. 적은 시간과 비용을 투입해 핵심 페이지(메인, 목록, 상세, 등록) 중심으로 전반적인 디자인 요소를 먼저 반영해보고 점차 고도화해나가면서 고객사가 판단할 때 이 정도 수준으로 충분하다면 디자인/퍼블리싱을 마무리짓게 됩니다.

고객사에 따라서, 그리고 서비스에 따라서 디자인 수준을 더 높이고 싶은 경우 비용과 시간을 더 많이 투입하면 됩니다. 인썸니아와 협업하는 디자이너, 퍼블리셔분들도 서버 개발자분들과 마찬가지로 시간 단위로 비용을 청구하므로 비용과 기간을 감안하여 원하시는 수준까지 디자인/기능을 고도화해나갈 수 있습니다.

디자인 시안 작업 없이도 색상이나 폰트, 아이콘, 이미지 등의 적절한 조정을 퍼블리셔가 바로 작업할 수도 있습니다. 디자인 작업 후 퍼블리싱 단계를 거치는 것보다는 적은 비용으로, 그리고 특별히 디자인 시안을 볼 필요 없이 적당한 수준의 디자인 개선을 원하는 고객사의 경우는 바로 퍼블리셔가 투입되기도 합니다.

고객사에서 직접 섭외한 디자이너와 협업할 수 있나요?

가능합니다. 다만 개발이 효율적으로 이루어지려면, 저희가 내부 디자이너와 협업하는 방식과 마찬가지로 프로젝트 후반부에 디자인 시안 요청을 해주세요. 개발이 마무리되기 전에 기획서를 디자이너에게 전달하여 전체 시안 작업을 요청하시면 비용도 크게 발생하지만, 개발 결과물과 초반 기획이 달라지는 경우 디자인 시안을 그대로 반영하기 어려워저 시안 수정 요청 비용과 이를 수정 반영하는 비용, 소통하는 비용 모두 상승하게 되고 프로젝트 기간이 길어지게 됩니다.

기능 구현이 마무리된 프로젝트 후반부에, 핵심 페이지(아이콘, 메인, 목록, 상세, 마이페이지, 회원가입 등 6~8개 페이지 전후)만 디자인 시안을 요청하시되 개발에 반영하기 번거로운 디자인인지 확인이 필요하므로 처음부터 디테일하게 시안 작업을 요청하지 마시고 고객사의 선호를 반영한 룩엔필 수준의 초안 작업을 먼저 요청해주세요. 초안 작업을 저희가 대략적으로 반영해보고 디자이너가 간격과 아이콘 등에 피드백을 주면 그 부분만을 보완해나가면서 진행하면 디자인/개발 비용을 절감할 수 있습니다. 디자인을 반영하는 과정도 애자일하게 핑퐁해야 합니다. 디자이너와 저희가 직접 소통할 수 있도록 고객사-디자이너-개발자 단톡방을 생성해주시면 좋습니다