요즘은 서비스 기획할 때 와이어프레임도 Figma로 그리는 경우가 대부분입니다. 주로 다음과 같은 장점 때문인 것 같습니다.

1. 웹 디자이너가 동일한 Figma 환경에서 내가 만든 와이어프레임을 보고 바로 디자인 작업을 시작할 수 있다.
2. 협업하기에 좋다
3. 대세는 Figma

그런데 제가 지금까지 작업해 왔던 웹사이트/앱들은 디자인적인 요소만으로는 개발자가 이해하기 힘든 부분이 많았기 때문에 Figma에 예시 데이터를 입력해 줘야 했는데 Figma는 디자인 툴이지 데이터 입력에 편리한 툴은 아니기 때문에 작업성과가 잘 나오지 않았습니다. 그래서 저는 주로 Google Sheets에 와이어프레임을 작업하는 편입니다. Google Sheets로 와이어프레임 작업시에는 다음과 같은 장단점이 있습니다. 

장점

1. 데이터를 입력하고 유저의 선택에 따른 다양한 경우의 수를 시뮬레이션 하기 쉽다.
2. 웹에서 데이터를 긁어서 시트에 붙여 넣고 배열만 해 주면 데이터 값들을 쉽게 넣을 수 있다.
3. 메뉴와 버튼, 박스 크기, 마진 등을 픽셀 단위로 지정하지 않아도 되어서 시간이 절약된다.

단점

1. 중첩된 구성요소는 표현하기 힘들다. 예를 들어 이미지 위에 버튼이 있다거나 하는 부분.
2. 협업시 댓글로 소통할 수 있긴 하지만 알림을 받기 위해서는 설정이 다소 까다롭다.

여기서는 제가 사이드 프로젝트로 기획했던 장례절차 및 부고문자 서비스의 모바일 앱 와이어프레임을 예로 들어 보겠습니다.

Google Sheets로 모바일 앱 와이어프레임 만들기 (링크)

스샷으로 붙여 넣으니 이미지가 흐릿해 보여서 관심 있으신 분들은 위의 '링크'를 클릭해서 Google Sheets에서 보시는 걸 추천해 드립니다. 참고로, 인도/파키스탄 개발자에게 개발을 맡긴 프로젝트라서 버튼명이나 메시지가 일부 영어로 번역되어 있습니다. googletranslate 함수 사용하면 많은 양의 한국어 텍스트를 한꺼번에 영어 등 다른 언어로 번역할 수 있는 장점도 있다는 점 추가로 알려 드립니다.

우선 'Obituary workflow' 시트부터 설명 드리겠습니다.

1. 선 그리기

엑셀과 마찬가지로 Google Sheets도 많은 단축키를 지원합니다. 선 그리기에는 다음과 같은 단축키가 사용됩니다.

• Shft+Alt+7 : 박스 그리기
• Shft+Alt+1 : 윗쪽선 그리기
• Shft+Alt+2 : 오른쪽선 그리기
• Shft+Alt+3 : 아랫쪽선 그리기
• Shft+Alt+4 :  왼쪽 선 그리기
• Shft+Alt+4 :  모든 선 지우기

2. 이미지 삽입

• image 함수로 image url 붙여넣기
• 원하는 이미지 복사해서 셀 안에 삽입 옵션 선택하거나 로컬에서 이미지 업로드

제가 사용한 아이콘 이미지들은 Iconfinder에서 전부 갖다 쓴 것들입니다.

3. 셀과 행/열관련

• 왼쪽 정렬 : Ctrl+Shft+L
• 오른쪽 정렬 : Ctrl+Shft+R
• 가운데 정렬 : Ctrl+Shft+E
• 셀 합치기 : Alt+H+M+M
• 셀 합치기 취소 : Alt+H+M+U
• 행/열 선택 : Ctrl + Space bar
• 행/열 삽입 : (행/열 선택 후) Ctrl+"+"
• 행/열 삭제 : (행/열 선택 후) Ctrl+"-"

4. 데이터 관련 기능 (현재 기억나는 것이 아래 하나 뿐)

데이터 필터링 설정/해제 : Alt+D+F+F

5. 브라우징 관련 기능

• 횡으로 이동하며 보기 : Shft+마우스 휠
• 도구모음 메뉴 숨기기 : Ctrl+F1
• 전체화면으로 보기 : F11
• 시트간 이동 : Alt + ↓
• 댓글삽입 : Ctrl+Alt+M

 

다음은 'Translations' 시트입니다.

이 시트는 다른 프로젝트에 사용된 토스트 메시지인데  googletranslate 함수로 많은 양의 텍스트를 한번에 번역하는 방법을 보여 드리기 위해 추가로 넣었습니다. 셀 하나만 googletranslate 함수를 입력하신 뒤 나머지 행은 함수를 복붙하시면 됩니다. 한가지 더 팁을 드리자면 보통 다국어 웹사이트의 언어별 텍스트 표시를 위해서 json 파일이나 tsx 파일(Typescript 기준)에 구글 번역 내용을 하나하나 복붙하는 수고를 해야 하는데 아래에 보이는 구글 시트를 Google Sheets API로 연동하면 다국어 사이트 관리도 훨씬 쉽다는 점입니다. 

다음은 'Gemini-generated DB' 시트입니다.  

Google Sheets 우측상단에 보시면 Gemini 버튼이 있습니다. 여기에 대략 '부고장 10개를 임의의 데이터로 만들건데 여기에 들어갈 내용을 표로 만들어 줘'와 같은 프롬프트를 입력하면 아래와 같은 표를 만들어 줍니다.

그럼 이걸 어디에 사용하느냐? 아까 말씀 드린 바와 같이 셀렉트박스에서 필요한 아이템을 가져오기 위해 사용합니다. Google Sheets 메뉴에서는 데이터 - 데이터 확인 - 데이터 확인 규칙 추가로 기능을 구현하시면 됩니다. (자세한 내용은 따로 질문 주시면 알려 드리겠습니다.)

마지막으로 'table' 시트입니다. 

이 시트도 셀렉트박스에서 필요한 아이템을 가져오기 위해 주로 사용합니다.

추가로, 링크된 Google Sheets에는 없지만 관리자 사이트의 UI를 구성하거나 API 명세서를 작성할 때도 유용하게 사용할 수 있습니다. 

프로젝트 규모가 크고 협업 인원이 많아지면 기획서, 와이어프레임, API 명세서 작성을 위해 각각의 용도에 맞는 툴을 사용하는 것이 당연히 좋지만 소규모 프로젝트일 경우 이렇게 서비스 기획을 할 수도 있다는 점을 알려 드립니다. 보시면서 궁금하신 점 있으시면 댓글 달아 주세요. 

감사합니다.