안녕하세요 진여진입니다. 🙇
제목은 어그로성이 성격이 있지만..?
거짓없는 솔직한 후기를 다룹니다.
벌써 17기가 마무리가 되어가네요.
4주차 스터디 시행착오를 적고
17기의 회고를 간단히 공유드리려 합니다.
한국 웹 사이트의 스크린 샷
지난 이야기에 이어 개발을 지속합니다
https://www.gpters.org/uiux/post/what-result-creating-landing-37f7pGyoSkyu419
4주차는 웹앱 베포가 과제입니다.
하지만, 저는 3주차에 제대로 이루지 못한
DB 와 기능구현을 중심으로 개발을 진행했습니다.
🪧데이터 베이스 연결 Firebase vs Supabase
Lovable 도 있고, 다른 프로그램도 있지만
FigmaMake 도 Supabase 병합하는 기능이 공식적으로 있습니다.
Azure 웹 브라우저의 설정 스크린 샷
이 기능을 이용해 다양한 데이터를 담는 프로토타입을 빠르게 만들 수 있는게 장점입니다.
하지만 저는 Firebase 를 이용해 DB 를 담아보는 연습을 해봤습니다
이유는 무엇이고 결론은 어떻게 되었을까요?
Firese Korean 앱의 스크린 샷
🔥Firebase 의 특징, 톺아보기
🎯 Firebase를 선택하는 이유
Google 생태계의 유용한 기능을 하나의 프로젝트에서 통합하여 활용할 수 있습니다.
배포, 데이터 분석 등 다양한 편의 기능을 제공합니다.
유연하게 커스터마이징 가능한 데이터베이스를 제공합니다.
(✒️일부 다른 서비스에서는 제한적일 수 있습니다.)
⚠️ Firebase를 사용하지 않는 경우
Supabase와 같은 시트 기반의 GUI를 제공하지 않습니다.
한국어 웹 사이트의 스크린 샷
지금처럼, DB 구조가 관계형으로 이뤄져있어 장벽이 있는 것 같습니다
(✒️이는 사용자 경험에 영향을 미칠 수 있습니다.)
여담 : Supabase 도 KV 방식으로 구현 가능하다!
Supabase 도 KV Store 로 구현하면 사실 방법은 같은 것 같습니다
KV Store 방식이란 : Key-Value 방식의 JSON 형식으로 데이터를 담는 방식인데요,
작은 데이터를 빠르게 담을 때 빠른 기능 구현 관점에서 유용합니다.
어두운 방에서 테이블 편집기의 스크린 샷
🐩 데이터베이스 구현 사례
한국 메뉴의 스크린 샷
간단한 랜 딩페이지라도 DB 를 사용하는 방법은 다양하게 가능합니다
프로젝트 등록
로그인
댓글
인증
커뮤니티 기능 ...
저는 Firebase 를 처음 구현해보기도 하고, 개발이 익숙하지 않기에
가장 간단한 프로젝트를 소개하는 CRUD 페이지를 구현해봤습니다
한국 웹 사이트의 스크린 샷
🫢구현 방법은? 자료들은?
Figma 스터디원을 위해 만든 자료들을 공유드립니다
⛰️결론
Firebase 구축은 방법만 알면, 그렇게 어렵지 않습니다.
다양한 DB 구축을 해보며, 유연성을 넓히는 작업도 소중하다고 생각합니다
🐩랜딩 페이지 구현 사례
제가 이번 기수 이상하게 꽂힌 작업은 두 가지 였습니다.
랜딩 페이지 내 "스크롤-애니메이션", "인터렉티브한 배경"
하루이틀이면 금방 구현할 줄 알았는데 이상하게 시간을 사용해서 이번 주 성과를 제대로 못내었습니다. 하지만 구현은 완료했고, 시행착오와 결론은 무엇일까요?
🖲️스크롤-애니메이션
지금과도 같은 기능이 "스크롤-애니메이션" 입니다.
IDE 에서는 필요한 함수를 넣어 구현하면 되지만,
이상하게 FigmaMake 에서 구현하고 싶은 마음이 들더라구요
이런 프롬프트를 통해 구체적으로 아이디어를 반영하고
한국 문자 메시지의 스크린 샷
지금처럼 Todo 문서를 만들었습니다.
한국 컴퓨터 화면의 스크린 샷
방안 1,2,3 은 구현 난이도로 구분 돼 있는데
최소한으로 빠르게 구현할 수 있는 방법을 선택합니다.
한국어 텍스트가있는 검은 색 화면
이상합니다. 그러다 구현은 다 했는데, 계속 안나오는 겁니다.
도통 원인을 알 수 없어 이유를 찾아보니
https://www.figma.com/code-docs/working-with-react/
공식 문서를 찾아보니 App.tsx 는 메인으로 모달을 받는 구조로 되어있는데
이 부분에서 제대로 반영이 안됐습니다.
HTML 코드 페이지의 스크린 샷
아래 사진처럼 디버깅을 요청하고 문제를 해결하게 됩니다.
한국 컴퓨터 화면의 스크린 샷
🤔결론
공식문서의 내용을 공부해야하는 중요성을 배웠습니다.
이번 사례를 통해 디버깅의 우선순위 장소 :
"App.tsx" 라는 메인 모달을 기준으로 하면 되는 것을 배웠습니다.
🖥️인터렉티브 배경 구축 사례
지금같이 배경에 발바닥 + 뼈다귀가 아래-위로 올라가는 효과를 넣고 싶었습니다.
하지만 아까의 기능구현에 시간을 너무 투자한지라 다른 좋은 방법이 있을까? 라는 마음으로
방법을 우회합니다.
☀️Claude 로 먼저 만들고 참조하기
한국어 텍스트가있는 검은 색 화면
Claude 에게 찾아가 저의 사이트를 바탕으로 미리 애니메이션 기능을 만들어봅니다
한국 웹 사이트의 스크린 샷
클로드가 만들어준 사이트 + 인터렉티브 배경 효과가 나오게 됐고
한국 웹 사이트의 스크린 샷
이후 완성된 코드를 아예 참조해서
Figmamake 에게 코드를 가지고 개발하라고 부탁하니
효과가 있었습니다!
플로팅 애니메이션 CSS 변환
한국어 문자 메시지의 스크린 샷
자세한 사진에는 누락됐지만
만들어진 코드 문서에 복붙하고, 프롬프트를 부탁한 상황입니다.
이러니까 조금 더 나아졌지만 다른 문제가 발생합니다.
🐜디버깅
Figmamake 는 자기 말로는 구현이 끝났다고 하는데 화면단에 제대로 보이지 않습니다.
이유를 찾아봅니다
한국어 텍스트가있는 앱의 스크린 샷
"App.tsx" 기준으로 하는데 문제가 없다고 합니다.
한국 웹 사이트의 스크린 샷
그래서 실제로 찾아봅니다
한국어 텍스트가있는 앱의 스크린 샷
사진처럼 Console.log() 디버깅 기능이 없기에,
F12-개발자 모드에서 Element 유무를 통해 추론하는 방식으로 디버깅을 합니다.
한국어 웹 사이트의 스크린 샷
이렇게 문제를 발견하고 해결합니다.
한국 앱의 스크린 샷
이런 방식을 통해 프롬프트 웹빌더이지만
보다 "능동적으로" 개발할 수 있다는 방법을 배웠습니다.
🤔결론은?
Figmamake 는 프롬프트 기반 웹빌더이니 console.log() 디버깅이 어려운게 아쉽습니다
하지만 방법은 있다!
공식 문서에도 저와 같이 구현하라는 멘트가 있어 인상적입니다.
https://www.figma.com/code-docs/iterate-your-code-with-ai/
해당 공식 문서를 찾아보면
텍스트가있는 문서의 예
변호사 양식의 예
App.tsx와 import 하기 위한 빈 파일을 만들고코드를 미리 만들어 붙여넣으라는 방법을 공식적으로 장려하고 있습니다.
때문에 필요한 "기능" 이 명확하고 구체적이라면,
미리 구현하고 붙여넣는 워크플로우도 적극적으로 고려하시는 것을 추천드립니다.
🙇♂️마치며
17기는 어느 때보다 유익한 스터디였습니다.
UX 관점에서 개인 브랜딩을 하기 위해
자기 정의를 그 어느 때 보다 많이 하는 시간도 가져보고
책임감을 갖고 알려주기 위해 공부를 하다보니
보다 능동적으로 공부하는 경험도 해봅니다.
남을 알려주기 위해 공부를 하다보니
돌이켜보면 저에게 남는 자산이 되는 모습을 발견합니다.
지피터스 피그마 스터디 덕분에 인생에서 가장 의미있던 7월이지 않을까 생각이 듭니다.
긴 글 읽여주셔서 감사합니다🙇♂️
