19기 뇌과학에 참여한 딸깍몬입니다.
저희 스터디는 AI를 활용하여 하나의 서비스를 기획/개발/배포하고 거기에 뇌과학을 곁들이는 느낌입니다.
뇌과학을 얼마나 활용할지는 주제에 따라 차이가 있을것으로 예상이 되는데요. 각설하고 첫 OT에서 했던 내용을 전달드려보겠습니다.
진행 방법
figma의 make를 사용한 사례를 전달드리겠습니다. 제가 만들 서비스 주제를 확정하지 않았지만, 제가 후보로 가지고 있는 서비스중 하나로 make를 사용해보았습니다.
제가 만들려하는 서비스는 플래시 카드 암기 서비스이고, 이런 종류 서비스 중 가장 유명한 것이 Anki라는 서비스 입니다.
일단 make를 처음 사용하지만, 어떤식으로 명령어를 만들지 gpt에게 먼저 도움 받았습니다.
GPT
figma make에 명령어 쓸때 어떤 방식으로 써? anki 같은 서비스를 만든다하면 어떤식으로 명령어 쓰면돼?아래 처럼 시나리오 A~E 까지 만들어서 각각 명령어를 만들어주고
그래서 make에 명령을 입력했습니다.
Figma Make
1.플래시카드 UI 생성 명령어
영어 학습용 플래시카드 컴포넌트를 만들어줘.
앞면에는 영어 단어와 예문,
뒷면에는 뜻과 예문 설명을 배치해.
카드는 320x500 크기, 둥근 모서리 20px,
밝은 배경에 대비되는 텍스트 스타일 사용.
스와이프로 넘기는 느낌의 UI를 강조해.
2.Anki 홈 화면(UI 피드) 생성
웹 기반 플래시카드 서비스의 메인 대시보드를 만들어줘.
좌측에 는 덱 리스트, 우측에는 오늘 복습할 카드 섹션,
상단에는 검색창을 배치해.
전체는 1440px 레이아웃 기준으로 그리드 정렬.
미니멀하고 직관적인 느낌.
3.카드 생성 화면(UI)
카드 생성 페이지를 만들어줘.
앞면/뒷면 입력 필드와 태그 입력,
미리 보기 컴포넌트가 오른쪽에 보이게 배치해.
사용자가 직관적으로 입력할 수 있게 큰 입력창을 사용해.
4.학습(Study) 화면
플래시카드를 학습하는 화면을 만들어줘.
화면 중앙에는 큰 카드,
하단에는 'Again, Hard, Good, Easy' 버튼을 배치해.
Anki 같은 SRS 학습 흐름을 참고한 레이아웃으로 구성해.
심플하고 집중되게.
5.덱(Deck) 상세 화면
덱 상세 페이지를 디자인해줘.
덱 이름, 설명, 카드 개수, 학습 시작 버튼을 상단에.
그 아래에는 카드 리스트를 스크롤 형태로.
정보를 한눈에 볼 수 있는 대시보드 스타일로 제작해.몇분 뒤 피그마로 프리뷰 앱을 확인할 수 있었습니다.
https://sample-agile-26257622.figma.site/
결과와 배운 점
내가 만들려고 하는 서비스들을 하나하나 기획하기 보다, 어떤 주제를 가지고 GPT로 대략적인 시나리오를 먼저 받고, 해당 시나리오를 make로 요청하면 대략적인 서비스 프리뷰를 볼 수 있게 됩니다.
