비개발자도 노코드로 하루 만에 서비스 런칭합니다 (2)
UI 작업과 프론트엔드 작업 끝내기
목차
1. UI 작업을 위한 서비스 기획하기
2. 디자인 키트로 서비스 UI 완성하기
3. 노코드 툴, 버블로 서비스 화면 구현하기
직접 준비한 그로잉피플의 강의 커리큘럼을 따라 24시간 만에 올인원 링크 관리 솔루션, 브릿지링크라는 서비스를 완성해 배포했습니다. 그로잉피플에서 서비스 기획부터 UI 디자인, 노코드 개발까지 모든 과정을 함께 해보면, 노베이스인 사람도 IT 서비스를 혼자서 만들 수 있습니다.
그로잉피플에서 FameLee와 함께 노코드로 서비스를 만들어봐요!
친구와 함께 하는 페이백 이벤트도 진행 중입니다.
UI 작업을 위한 서비스 기획하기
1. 서비스 컨셉 정하기
이전 글에서 솔루션의 큰 방향을 잡았으니, 본격적인 서비스 기획에 들어갔습니다. 가장 먼저 도출한 솔루션의 방향을 중심으로 서비스 컨셉을 먼저 정했습니다. 컨셉은 기획의 중심으로 작용해 서비스의 디테일을 일관적인 방향으로 잡도록 도와줍니다.
도출한 솔루션 방향을 확인해 보니, 마케터의 링크 관리 업무의 시작부터 끝까지를 다루고 있습니다. (1) 관리 공간에서 UTM과 URL을 등록하고, (2) 이를 불러와서 배포 링크를 생성하고 (3) 제목, 썸네일을 따로 변경해 ShortURL을 만드는 흐름이 그려집니다.
이 흐름에 착안해 서비스 컨셉을 “올인원 링크 관리 솔루션”으로, 캐치프레이즈를 “한 곳에서 끝내는 링크 관리”로 잡았습니다. 그리고, 다양한 링크를 연결한다는 의미로 “브릿지링크”를 서비스명으로 설정했습니다.
2. 플로우차트와 IA 그리기
‘한 곳에서 끝내는 링크 관리’로 포지셔닝한 이상, 서비스가 링크 관리에 필요한 업무를 일련의 흐름에 따라 처리하할 수 있도록 도와줘야 했습니다. 서비스의 플로우 차트(Flow Chart)를 직접 그려보며, 유저의 링크 관리 업무를 어떤 흐름으로 가지고 가야 할지 스케치했습니다.
그다음으로 IA(Information Architecture)를 그려보며, 서비스가 어떤 구조로 이루어질지 생각했습니다. IA는 정보 구조도(Information Architecture)로 웹, 앱, 소프트웨어 등 IT 서비스의 구조를 설계한 문서를 뜻합니다. 앞서 만든 플로우 차트를 참고해 어떤 페이지가 필요하고, 각 페이지에는 어떤 정보가 들어갈지 간략히 정리했습니다.
디자인 키트로 서비스 UI 완성하기
1. 디자인 키트란?
서비스 기획을 완료하고, 화면 UI 작업에 들어갔습니다. 일반적으로 와이어프레임을 만든 후에 UI 디자인 작업에 들어가지만, 디자인 키트가 있기에 바로 UI 작업을 시작했습니다. 그로잉피플에서는 디자인을 모른 사람도 UI 퀄리티가 높은 서비스를 만들 수 있도록, 디자인 키트를 함께 제공합니다. 디자인 키트는 디자인을 더 쉽고 빠르게 할 수 있도록 도와주는 도구 모음입니다. 피그마 로컬 파일로 제공되며, 이를 불러와 자신의 계정에서 바로 사용할 수 있습니다.
키트 구성 요소
- 컴포넌트 시스템
- 폰트 시스템
- 컬러 시스템
- 아이콘 시스템
2. 컬러와 폰트 선택하기
디자인 경험이 없는 사람에게 (1) 컬러 선택과 (2) 폰트 선택이 가장 힘든 일입니다. 다행히(?)도, 그로잉피플의 디자인 키트에는 바로 사용할 수 있는 컬러 시스템과 폰트 시스템이 존재합니다. 디.알.못이기에 기존 컬러 시스템과 폰트 시스템을 그대로 사용하기로 했습니다.
3. 컴포넌트를 조합해 UI 완성하기
디자인 키트에는 입력 필드, 드랍박스 등 약 200개의 컴포넌트도 제공합니다. 제공받은 컴포넌트 중 필요한 것을 선택해 조합을 하면 UI를 쉽게 완성할 수 있습니다.
컴포넌트를 조합해 UI 작업을 진행했습니다. 이 부분에서 가장 오랜 시간이 걸렸지만, 그래도 디.알.못인 저에게 만족스러운 UI 결과물이 탄생했습니다.
노코드 툴, 버블로 서비스 화면 구현하기
1. 버블이란?
자신의 아이디어를 현실로 만들 때, 가장 큰 허들이 바로 ‘코딩’입니다. 배우기도 어려운데, 그만큼 시간을 투자하기 힘들기 때문입니다. 하지만, 최근에 노코드 툴이 떠오르면서 이제 코딩을 몰라도 누구나 서비스를 만들 수 있게 됐습니다. 클릭, 드래그 앤 드랍만으로 서비스를 만드는 시대가 도래했습니다.
버블(Bubble)은 해외에서 유명한 노코드 툴입니다. 다양하고 많은 노코드 툴이 있지만, 이 중에서 버블만큼 높은 화면 자유도를 가진 툴은 없습니다. 대다수의 노코드 툴은 레이아웃이 정해져 있거나 컴포넌트도 고정된 형태를 지닙니다. 선택지가 적은 만큼 서비스를 쉽고 빠르게 만들 수 있지만, 그만큼 자신이 생각한 바를 완벽하게 서비스에 담아내기 힘듭니다. 이와 다르게, 피그마로 디자인하는 것처럼, 버블은 컴포넌트를 자유롭게 만들고 배치할 수 있기에 자신이 생각한 화면을 그대로 만들어 낼 수 있습니다.
2. 디자인 시스템 세팅하기
버블은 자유도가 높은 만큼, 서비스를 만드는 데 오랜 시간이 걸립니다. 페이지와 컴포넌트마다 스타일 값, 마진, 패딩 등을 하나하나 설정해줘야 하기 때문입니다. 다만, 버블의 디자인 시스템 기능을 활용하면, 작업 시간을 기하급수적으로 단축시킬 수 있습니다. 서비스 개발에 드는 시간을 줄이기 위하 디자인 시스템기능을 적극적으로 활용했습니다.
버블의 디자인 시스템으로 (1) 컬러 스타일과 (2) 컴포넌트 스타일이 있습니다. 여기에 한 번 등록한 설정 값은 작업하는 도중에 바로 불러와 적용할 수 있습니다. 반복적으로 사용하는 설정 값은 매번 입력할 필요 없이 불러오기만 하면 됩니다. 전체적인 디자인을 변경해야 하는 경우, 디자인 시스템 자체를 바꾸면 모든 컴포넌트에 일괄 적용되기에 유지 보수에도 편리합니다. 디자인 키트에서 사용한 컬러 시스템의 헥사 코드를 그대로 등록하고, UI를 만들 때 사용한 컴포넌트도 스타일 값으로 등록했습니다.
3. 페이지 UI 작업하기
디자인 시스템을 세팅했으니, 바로 화면 작업을 시작했습니다. 우선, 스케치한 IA를 기준으로 개별 페이지를 생성했습니다. 버블은 크게 (1) 배경 화면인 ‘페이지’와 (2) 페이지 내부를 구성하는 컴포넌트인 ‘요소’로 구성됩니다.
그다음으로 작업한 UI 작업물에 따라 개별 페이지에 필요한 요소를 생성해 배치했습니다. 버블의 프론트엔드 작업은 (1) 클릭과 (2) 드래그 앤 드랍으로 끝이 납니다. 요소 생성 창에서 인풋 필드, 텍스트 필드 등을 클릭해 페이지 안으로 드래그하면, 페이지 안에서 바로 생성됩니다.
생성한 요소를 클릭하면, 바로 설정 창이 나옵니다. 배치한 요소에 앞서 생성한 디자인 시스템을 불러와 값을 적용하면서, 프론트 작업이 끝납니다. 이제 UI 디자인물과 똑같은 서비스 화면이 완성됐습니다.
4. 반응형 작업하기
버블은 PC, Tablet, Mobile에서 모두 대응 가능한 반응형 서비스를 만들 수 있습니다. 반응형 서비스란 유저가 접속한 디바이스에 맞춰서 UI 요소들의 크기, 위치 등이 자동으로 조정되는 서비스입니다.
우선, 모든 요소의 width를 px 단위에서 % 단위로 맞췄습니다. 그러면, 해당 요소의 Width는 상위 그룹 요소의 Width에서 입력한 %가 적용된 값으로 자동 조정됩니다. 예를 들어 상위 그룹 요소의 width가 1024px이고 하위 요소의 width가 50%라면, 적용되는 width 값은 512px이 됩니다.
PC의 넓은 화면에 담을 수 있지만, Mobile의 작은 화면에서 담길 수 없는 요소들도 있습니다. 예를 들어, 네비게이션은 PC에서 좌측에 고정 상태로 있지만, Mobile에서는 크기로 인해 보여주기 어렵습니다. 이렇게 디바이스에 따라서 다르게 보여줘야 하는 요소들은 출력 처리에 조건을 걸었습니다.
프론트엔드 작업이 끝났으니, 이제 버블에서 데이터베이스를 만들고 로직을 구현하면 서비스가 완성됩니다. 관련한 내용은 다음 편에서 이어서 다루겠습니다.
Famelee가 국내 버블 유저를 위해 사이드 프로젝트를 시작했습니다. 공식 문서 번역부터 다양한 국내 플러그인과 버블 서비스 레퍼런스를 만나보세요
그로잉피플에서 FameLee와 함께 노코드로 나만의 서비스를 만들어 봐요!
친구와 함께 하는 페이백 이벤트도 진행 중입니다.
버블로 하루 만에 만든 서비스,
브릿지 링크를 아래서 확인할 수 있습니다.
