피그마 메이크 스터디 1 - 시작

1. 소개

이번 스터디는 Figma Make(피그마 메이크)를 중심으로, 디자이너와 기획자, 개발자 입장에서 실무에서 활용 가능한 UI 자동화 도구를 익히고, 이를 프로토타이핑 및 실제 배포까지 이어보는 것을 목표로 진행되었습니다.

IT 프로젝트 협업 시 커뮤니케이션과 의사결정에 시간이 오래 걸리는 문제를 해결하고자 했고, 특히 AI 기반 디자인 자동화가 주는 생산성 향상 가능성을 확인해보고자 스터디에 참여하게 되었습니다.


2. 진행 방법

커리큘럼

  • 피그마 기초

  • 피그마 메이크 활용법

  • 랜딩 페이지 UI 제작 실습

학습 내용

  • 피그마 기초
    디자인 템플릿을 활용한 빠른 시작, 디자이너 관점에서의 AI 도입 흐름 이해

  • 피그마 메이크 활용법
    블랙 & 화이트 기반의 심플한 스타일 특징을 이해하고,
    “프롬프트 + 레퍼런스” 조합을 통해 원하는 스타일 구현 실습

  • 디자인 프롬프트 작성법

    • UI/UX 빌더 챗봇처럼 생각하기

    • 컨셉, 무드, 톤, 스타일, 레퍼런스의 명확한 정의

    • 실제 서비스들의 디자인 가이드를 참고하여 프롬프트 작성

실습 프로젝트

  • 프로젝트 관리 서비스 UI 제작

  • 개발 목표 설정 → 프롬프트 작성 → 결과물 확인

  • 퍼블리싱 자동화 및 활용 가능성 점검

한국 버전의 Google Play 스토어 스크린 샷


3. 결과 및 다음 계획

작업 목록을 보여주는 한국 웹 사이트 스크린 샷
  • 결과물
    피그마 메이크가 만들어낸 스크린샷 결과는 기대 이상이었으며,
    레퍼런스와 프롬프트만 명확히 정리되면 웬만한 서비스 UI는 디자인-퍼블리싱까지 자동화가 가능했습니다.

  • 활용성

    • 디자이너, 개발자 간 커뮤니케이션 프로세스 개선 가능

    • 빠른 프로토타입 제작과 피드백 반영 가능

    • 실제 프로젝트에도 적용 가능한 수준의 결과물

    • 프롬프트는 GPT보다는 Claude와의 궁합이 더 좋았음 (향후 LLM 선택 기준 참고 가능)

  • 개발팀 피드백

한국어 텍스트가있는 검은 색 화면
  • 다음 단계

    • 에어테이블 연동 등 실제 데이터베이스 연동 테스트

    • 피그마 메이크 기반으로 만든 UI를 기능 구현까지 연결

    • 협업 자동화까지 고려한 AI 기반 프로세스 개선 실험 예정


3
6개의 답글

👉 이 게시글도 읽어보세요