안녕하세요!

모두 잘 아시는 Figma에 AI로 웹디자인과 개발이 가능한 Figma Make라는 서비스가 생겼습니다.

그것을 활용한 개발기를 연재로 좀 써보고자 합니다.

제 아이가 땅콩 알러지가 있습니다.

(콩류에도 심하진 않지만 알러지가 있고, 견과류는 아몬드를 제외하고 모두 반응하는 것 같습니다.)

땅콩을 조금이라도 섭취하게 되면 즉각 속이 안 좋아지고 몸에 두드러기가 나기 시작해서

약 한 시간 정도면 기도가 막히거나 할 수 있어서 항상 먹는 것에 주의를 기울일 수 밖에 없는데요.

아이가 초등학교 고학년이 되니 친구들 집에도 놀러가고 하면서 여러가지 곤란한 상황이 발생하였습니다.

예를 들면, 치킨이 그러한데요.

일반적인 후라이드 치킨에도 땅콩이 들어가는 경우가 많아서 조심해야 하는데,

그나마 프랜차이즈 치킨의 경우에는 홈페이지 등을 통해서 성분이나 알러지 유발 물질을 명확하게 표시하기 때문에 문제가 없는데, 마트에서 판매하는 치킨은 확인이 어렵습니다.

친구집에 놀러간 아이가 전화가 와서 "XX마트에서 치킨을 사다 주셨는데 먹어도 되냐"고 물어보는데, XX마트에는 전화를 해도 받지도 않고, 홈페이지에도 명확하게 명시된 곳이 없어서 난리를 폈었죠. 

게다가 한식에는 반찬류가 많다 보니, 메인 메뉴에는 알러지 유발 물질 포함 여부가 명확하게 기재되어 있더라도, 반찬에는 그렇지 않은 경우가 많습니다. 심지어 가게에서도 제대로 모르는 경우가 많고요.

한 번은 가족들과 여행을 갔다가 오징어 순대가 있길래 주방에 확인을 한 후 먹였는데, 애가 반응이 이상해 다시 확인해 보니 땅콩버터가 들어 있는 것으로 확인된 경우도 있었습니다. 응급실 찾기도 어려운 동네라 정말 고생했던 기억이 있습니다.

이런 상황이다 보니, 식당을 고를 때, 특히 처음 가는 식당을 가게 되면 기본적으로 땅콩 사용 여부에 대한 정보가 필요합니다.

이 때의 프로세스는 식당과 메뉴를 정한 후, 해당 식당에 전화를 해서 땅콩이 들어가는 지에 대한 여부를 확인하는 번거로움이 있습니다.

그래서 이런 문제를 해결해 보고자, 알러지 있는 사람들이 이용할 수 있는 알러지 정보 사이트가 있었으면 좋겠다는 생각을 했지만, 저는 개발자 출신이기는 하나, 입사한 지 5년 정도 밖에 개발을 하지 않았고, 그 이후 15년 동안 개발을 하지 않았기 때문에 제가 혼자서 뭘 하기는 어렵다는 문제가 있었습니다.

그러나, 다행스럽게도 AI 시대를 맞이하여, 4개월 전부터 시간이 날 때마다 소위 "바이브 코딩"을 이용해 알러지 식당 정보를 공유하는 사이트를 만들어 볼 수 있었습니다.

바이브코딩으로 하다보니 Cursor로 할 때나, Figma로 할 때나, 여러가지 문제가 생겨서 초반에는 4번 정도 하던 프로젝트를 엎고 다시 시작했는데요, 지금은 그래도 좀 테스트가 가능한 수준은 되어서 이야기를 풀어나가면서 나머지 부분의 개발을 해 보려고 합니다.

처음에는 UI단을 Figma에서 디자인하고 해당 코드를 Cursor로 받아와서 퍼블리싱을 시키려고 했는데, 생각대로 잘 되지 않았습니다. 그래서 아예 Cursor에서 디자인과 퍼블리싱을 모두 시키려고 했더니 맘에 드는 디자인이 나오질 않았고요. 그런데 8월말인가부터 Figma Make라는 서비스가 나와서 이걸 써서 디자인을 한 후 Cursor에서 Backend를 만들어야겠다고 생각했습니다.

그런데, Figma Make에서 AI가 설명하기를 SupaBase라는 서비스를 통해 DB와 백엔드를 해결한다고 하더군요.

그래서 실제로 완전히 동작하는 사이트를 Figma를 통해서만 만드는 것이 가능했습니다.

현재 테스트 중인 사이트는 https://atorang.figma.site/ 로 접근하실 수 있고

로그인은 네이버 로그인을 사용하고 있습니다.

혹시 사용해 보시면서 버그가 있거나 개선이 필요한 부분이 있으시면 말씀 부탁 드립니다.

Figma Make는 크게 왼쪽의 AI 대화창과, 우측의 미리보기 창으로 나뉘어져 있습니다.

여기서 특징적인 것은 좌측 하단의 대화 입력창에 있는 "커서 모양 버튼(지정 및 편집)"인데요

모든 것을 다 말로 하긴 어렵고, 토큰도 너무 많이 소비되니,

특정 영역을 수정해 달라고 간단하게 요청할 때는 이 버튼을 누른 후

미리 보기에서 원하는 영역을 클릭해서 수정을 요청할 수 있습니다.

게다가 상단의 코드 버튼을 누르면, 현재 짜여져 있는 코드들을 볼 수 있는데요.

나중에 이것도 매우 중요한 부분을 차지합니다.

1. UI설계

처음 생각에는

음식점, 공산품(과자나 밀키트), 제조식품(마트식품이나 빵, 떡 등)으로 카테고리를 나누려고 했습니다.

그리고 그 메뉴 마다 특정 알러지 성분을 포함하고 있는지, 포함하지 않고 있는지를 입력하게 하려고 했죠.

아래가 그 최초 버전인데요,

그런데 실제로 AI에게 시켜서 구현해 보니

이 카테고리별로 입력되어야 하는 정보가 조금씩 다르기도 하고,

공산품의 경우에는 아예 눈에 보이도록 알러지 물질을 표기해야 하니 굳이 이 앱에서 관리할 필요가 없다 싶었습니다.

게다가 처음에는 포함과 불포함 정보를 모두 받아 conflict가 나는 경우를 확인하여

신뢰성과 안정성을 높이려는 생각이었는데

포함이면 포함이고,  불포함이면 불포함이지 뭔가 쓸데없이 복잡도만 높아지는 것 같아서

다시 처음부터 개발을 시작했습니다.

(개발된 것을 고치라고 하면 꼬일 수가 있어서 처음부터 다시 하는 게 나을 수도 있습니다.)

다만, 이 때 기존의 디자인이나 이런 것을 새로운 프로젝트에서도 가져오고 싶은데 그럴 수 있는 방법이 마땅히 없긴 합니다.

그래서 기존 프로젝트에서 새 프로젝트로 디자인 언어를 최대한 유사하게 가져갈 수 있도록 markdown 파일을 하나 만들어 달라고 하고, 새 프로젝트에서 이 markdown 파일의 내용을 전달하는 것으로 해결이 가능합니다.

식당 - 메뉴 - 확인된 알러지 물질로 정보를 구성하려고 했었습니다.

이 과정에서 여러차례 시행착오를 겪었는데요, UI에서는 의도한 구조대로 보이더라도 figma make의 설계상의 제약 때문에 supabase에서는 정규화된 테이블이 아닌 테이블 하나에 모든 데이터를 때려넣는 방식(KV Store에 단순한 JSON 구조)으로 관리가 되고 있었습니다.

이 부분의 해결 방법은 다음에 DB에 대한 글을 쓸 때 말씀 드리도록 할게요.

AI와 주말마다 2개월여를 씨름하면서 결국 정착된 UI는

1) 식당과 메뉴를 등록

2) 식당과 메뉴를 검색한 후 그 메뉴의 "불포함이 확인된 알러지 물질 정보(불알정보... 불포함정보)"를 입력

3) 네이버 로그인

정도의 최소화된 기능으로 준비되었습니다.

일단 사용해 본 바로는 마치 부사수 데리고 일하는 개발자가 된 것처럼 같이 고민하고 이상한 부분을 찾아가면서 프로토타입을 만들고 개선할 수 있었습니다.

특히 게시가 가능해서, 실제 웹사이트에서 사용해 보고, 문제점을 고칠 수 있었다는 점도 매우 맘에 들었습니다.

figma make가 선택한 UI 쪽 프레임워크는

React + TypeScript + Tailwind CSS였는데요. 왜 이 조합을 택했는 지는 저도 잘 모릅니다. 아마 기본값이 아닐까 생각 되는데요.

다음에는 Backend와 DB 관련된 이야기로 다시 돌아오겠습니다.

그럼 긴 글 읽어 주셔서 감사드리며,

앞으로도 많은 관심 부탁 드립니다.