소개
블루캔버스라는 디지털 액자 제품 처럼, 나만의 디지털 액자를 만들어보고 싶었습니다.
그리고 덧붙여 이 디지털 액자에 내가 원하는 기능들을 하나 둘 넣어보고자 계획중입니다.
몇몇 위젯(캘린더, 날씨 등 몇몇 정보들)과 홈컨트롤 기능을 넣어보고자 합니다.
진행 방법
디자인 : 스티치, 피그마 Make
코드구현 : 클로드코드
위 단계로 구현해볼 예정입니다.
결론부터, 하루 시도결과 디자인 작업에 실패하였습니다.
프롬프트의 상세함이 부족하거나 AI 디자인과 핏에 맞지 않는 느낌이었습니다.
[1] 프롬프트의 내용
Apple, Tesla의 UI디자인을 모두 학습한 디자이너이자 기획자로서, 아래의 내용을 구현할 수 있는 디자인을 만들어줘.
첨부 이미지의 레퍼런스를 활용해서 디자인해줘.
평상시에는 디지털 액자로서의 기능을 한다
사진을 올릴 수 있는 로컬서버와 업로드 인터페이스가 필요하다. 갤러리 기능을 통해 서버의 이미지를 확인하고 선택한다.
자동화 기능
- 타이머로 디지털 액자의 밝기를 시간대별로 자동화한다. - 집안의 존재/부재의 API를 확인하여 밝기나 ON-OFF 상태를 자동화 한다.다양한 위젯이 추가가 가능하다
- 날씨 위젯, 미세먼지 등 공기질 확인 위젯, 구글캘린더 연동 위젯스마트홈 Scene Trigger 기능이 가능 - 이 또한 위젯 형태로 추가나 레이아웃 조절이 가능하다
페이지 구성
1. 대기화면(디지털액자로서 그림만 전시) 페이지
2. 화면 터치시 나오는 컨트롤센터 모드 페이지(날씨위젯, 구글캘린더, 홈컨트롤센터(4개의 Scene 호출 버튼))
3. 액자모드의 배경화면 변경을 위한 갤러리 페이지
4. 각 위젯을 선택하고 제거하거나, 레이아웃을 변경하는 페이지
4. 컨트롤센터의 세부기능을 변경하는 페이지 (기본 4개의 Scene 호출 버튼에서 자유롭게 추가하고 구성이나 레이아웃을 변경. 홈컨트롤센터의 영역이나 비중도 변경이 가능)
더 필요한 정보가 있거나, 개발에 도움될 내용이 있다면 알려주거나, 나에게 인터뷰를 요청해줘.
[2] 첨부한 레퍼런스 이미지
[3] 스티치 결과물
모바일 앱용 UI 요소 세트
산이 보이는 흑백 UI 디자인
다양한 이미지가 포함된 다양한 iOS UI 화면 모음
결과물들이 다소 엉뚱하거나, 일관성이 없고, 기능에 부합하지 않게 나왔습니다.
Figma Make에서는 더더욱 좋지 않은 결과물이 나왔습니다.
결과와 배운 점
아무래도 프롬프트의 질이나 구성이 좋지 않은듯 합니다
디자인이 어느정도 유의미하게 나와야 구현 작업을 넘어갈텐데, 막히는 상태입니다.
월요일, 수요일 저녁 특강을 참석하고 배운점이,
월요일 장피엠님의 특강에서는, 레퍼런스를 이미지로 사용하지 말고, AI를 통해 가이드라인화 하여 사용했을때, 원하는 결과물을 얻을 확률이 높아질거라는 팁을 보고, 이것을 활용해보고자 합니다.
수요일 김경호님의 특강에서는 다양한 서브에이전트, 스킬, 템플릿 등을 각 계층별로 구성하고, PDCA의 시스템을 구축한 체계를 보고.. 너무 어려워서 잠시 정신이 없었지만,
스킬이나 플러그인까지는 아니어도, 디자인을 만드는 단계 내에서, 원하는 내용을 단계별로 쪼개어, 레퍼런스 가이드 - 디자인 시스템 - 페이지별 기능 구성 - 등등 들을 .md로 각각 만들고 프롬프트를 입력하는 방법으로 개선해봐야 겠다고 생각 했습니다.
시작 전에는 쉽게 할 수 있을것 같았는데.. 4주가 너무 짧게 느껴지네요ㅠㅠ
도움 받은 글 (옵션)
AI스터디 20기 1주차 핵심강의 - AI 성과를 극대화하는 메타적인 접근법 by 일잘러 장피엠
