구글 stitch (2025.06.05)

 UI 설계관련해서 디자인은 Figma를 진행하려 했지만 잔손이 많이 가서 투박하게만 나와 앱을 만드는 것을 주저하고 있었는데 이번에 구글에서 제가 필요로 하는 기능을 지원하는 ai 서비스를 오픈했네요. 

https://stitch.withgoogle.com

Stitch - Design with AI

 mcp 서버를 설치해서 figma연동도 해보고 디자인 툴도 여러개 찾아 보면서 시도해 봤지만 디자인 감각을 채울수는 없는 상황이고 눈은 높아졌지만 스케치나 기타 요구사항을 세세하게 하지 못해서 원하는 결과를 얻지는 못했습니다. 그런데 이번 구글에서 만든 서비스는 그런부분들을 자동으로 지원해준다는 느낌이 드네요. 

 앱 개발을 아이폰 처음 우리나라에 들어올때 출시해보고 담당하고 있지 않아서 못하고 있었는데 이참에 해봐야겠네요.

 

 디자인 영감을 받기 좋다고 이야기하지만 실제 사용하는데도 충분하다고 느껴지네요.

 기존에 중지했던 개인 프로젝트를 디자인 업데이트해서 진행해 봐야겠습니다.

 

사용방법 : 텍스트로 디자인 컨셉과 레이아웃을 이야기하면 디자인 적용한 화면을 그려주고 Figma로 복사해서 사용가능합니다. 내용으로 들어가는 글들을 한글로 적어달라고 했더니 아직은 안해주네요. 조만간 가능하겠죠.

 

---

** 적용예

 

before 온라인 강좌 사이트 화면 스토리 보드

2024.07.13 - [프로그램/Web] - 온라인강좌 사이트 만들기 2단계 분석(2024.07.13~)

온라인강좌 사이트 만들기 2단계 분석(2024.07.13~)

 

솔직하게 디자인 지원을 안받고 어렵겠구나가 프로젝트를 멈추게 하는 가장 큰 거였다고 생각하고 있습니다.

그런데.. 이번 구글 서비스로 숨통이 열릴것 같네요. 일단 지금 사용하면서 나온 내용은 동시에 만들수 있는 갯수가 6개가 한계라고 나오네요.

바이브 코딩으로 커서.ai, stitch, figma 정도 갖추면 프론트 개발은 가능할 것 같습니다. 백앤드는 주담당 파트여서 대략적인 플랜이 나옵니다.프론트단 데이터 비정규화 수집 후 정규화해서 DATABASE 설계하고 수강생, 강사, 관리자 각각 사용하는 개념에서 필요한 것을 권한 제한하여 구현하면 됩니다.

 

 데이터 매칭 안되는 기획서들이 많은 이유가 이렇게 데이터 검증전 화면 구성단계인것 같습니다. 물론 처음부터 항목정의를 탄탄히 할수도 있지만 스피드하게 파일럿 프로그램을 만들어야 하는 상황에서는 타협이 필요한것 같습니다.  

 

after 온라인 강좌 사이트 화면 스토리 보드

화면구성

[수강생용]

강좌사이트메인-로그인-강의목록 (카테고리에서 과목분류 선택)-강의상세-강의신청-강의시청-강의 수강 이력 화면-마이페이지

[강사용]

로그인화면-강사신청-강사로그인메인화면-강의등록화면-강사강의통계화면-강사질의응답화면-강사수강생진도화면-정산화면

[관리자용]

(강사용로그인화면)-관리자로그인메인화면-관리자통계화면-강사신청승인화면-수강승인화면(승인제사이트 또는 무통장입금)-강사정산화면-이벤트등록화면-이벤트과목적용화면-배너관리화면-우선강조관리화면

Figma에 반영한 내용

 정말 내게 딱 필요한 내용을 서비스하는 AI 서비스가 나왔네요.