디자이너가 앱을 만들 수 있을까

디자이너가 앱 만드는 과정을 기록해보아요
K
Kurara
헐 열흘전에 쓰고 안남겼다니 ㅠㅠ
Reaction
Comment
Share
K
Kurara
깃헙 이슈 활용
1. 작은 작업 단위로 이슈 분리: 2~3시간 안에 해결 가능한 작은 작업으로 이슈를 나누기. 2. 우선순위에 따라 이슈 작성: 우선 중요 작업부터 3~5개의 이슈를 먼저 작성하고 작업 진행. 3. 관련 작업 묶기: 관련된 작업들은 하나의 이슈로 묶되, 너무 복잡하지 않게 유지. 4. 병목 현상 피하기: 한 번에 5~10개의 이슈를 관리하며 진행 상황을 확인. 5. 유연한 이슈 추가 및 삭제: 필요 시 새로운 이슈를 추가하거나 완료된 이슈를 빠르게 닫아 관리.
Reaction
Comment
Share
K
Kurara
bolt에서 수정을 반복하면 예상치못한 오류가 나오게 되고 그 오류가 내가 주도적으로 해결을 못하니 버튼만 계속 누르는 상황이 발생한다
미리보기로 디자인을 확인하려는 나와 기능이 먼저 작동해야하는 요구사항이 나 스스로도 충돌나는걸 느낀다. 일을 분리해서 못하고 한번에 둘다 하려고하니 오히려 둘다 안되고 하나씩 진행할 수 있도록 요구사항을 분리하여 테스크를 생성해서 진행하는게 필요하지 않나 싶었다
1인 개발자들이 어떻게 일을 처리하는지 궁금해지고 나 역시 혼자 작업을 할때 빨리 끝나버린 이유가 완성하고자하는 목표 없이 흥미로 시작하여 한 페이지에서만 작업이 머물렀던 거 아닐까 생각한다.
이 문제를 해결하고자 테스크 문서를 하나 시작해야겠다고 생각했고..일이 커지길 바라지 않기 때문에 고민중이나 생각해보니 깃헙에 이슈 기능이 있으니 이걸로 실행해봐야겠다.
다른 깃헙의 오픈 프로젝트를 보는 것도 방법이다
Reaction
Comment
Share
K
Kurara
비슷한 서비스를 찾아볼까
2 Comment
Reaction
Comment
Share
K
Kurara
점점 디자인에 가까워지지만 충돌나는 것은 ..계속 바꾸고 싶은 지점들이 끊임없이 보인다는것이다. 이걸 bolt로 프로토타이핑하면 사용량만 줄어들고 아쉽다!
Reaction
Comment
Share
K
Kurara
다시 처음으로 돌아가 디자인을 다시 하고 이걸 기반으로 프롬프트를 요청했다
프론트와 백엔드를 분리하고 AI가 어느부분을 고치는지 실시간으로 확인하며(구경) 구조를 더 익히려고 했다.
Reaction
Comment
Share
K
Kurara
결국 디자인과 기능을 분리하고, 어느 시점에 수정하기 좋은 정도로 프롬프트를 만들고 시작할지 알아야할 것 같다.
Reaction
Comment
Share
K
Kurara
Figma에서 디자인을 수정해봤는데 조금 헤매다가..
1.
받아보고싶은 이력서의 느낌을 표현하기
2.
내가 가고 싶은 회사의 JD를 여러개 올리고 고를 수 있다는 주도감을 주기
3.
AI로 이력서 쓰기 버튼을 잘보이는 레이아웃
4.
결과물 이력서를 다운로드 받도록 버튼의 접근성이 좋도록 버튼 레이아웃 배치.
1.
일단 shadcn을 쓸 것
2.
어떻게 cursor한테 구현해달라고 시키지?
Reaction
Comment
Share
K
Kurara
지금 고민인건 bolt에서 만들었던 UI를 cursor에서 수정할 수 있을까?????입니다. 무섭 ..일단 하려는건
1.
figma에서 디자인 수정해보기
2.
해당 디자인을 code로 옮기기/방법
a.
figma의 devmode
b.
캡쳐해서 냅다 claude로 그려달라고 하기
c.
캡쳐해서 냅다 cursor한테 수정해달라고 하기(???? 어디까지 뻔뻔해질 것인가)
이게 안되면 다시 bolt가서 결제하고 수정해야할거같음..(싫다)
(replit썼어야했나.. 후회)
Reaction
Comment
Share
K
Kurara
openai api에서 legacy는 개인용이고.. 프로젝트용으로 사용하라고합니다..몰라서 두개 다 썼습니다. 잉..
Reaction
Comment
Share
K
Kurara
깃헙에 내 api key 그대로 올려놔서....openai 들어가서 생성했던 키 다 삭제했다 ㅋㅋㅋㅋ
아니 왜..env파일에 있던게 json에도 있지? bolt 이놈..
Reaction
Comment
Share
K
Kurara
bolt로 이력서첨삭서비스를 만들어봤다. api키로 작동하는 것 까지 확인하고 나니 디자인을 고치고 싶고, 배포해서 다른 사람들이 써보게 하고 싶고, api 키의 비용이 걱정되니 사용자가 직접 api 키를 입력하게 만들고 싶고, 유저가 자신의 데이터를 입력하면 저장되게 하고 싶다
6 Comment
Reaction
Comment
Share
K
Kurara
v0로 만든 tsx 를 cursor로 옮겨서 실행해보며 수정해보고 싶었는데 환경설정부터 막혔다. 어디서부터 하면 좋을지 컨텍스트스위칭이 어려움.
어느 단계인지 글로 적어가며 여러 브라우저들을 옮겨다녀야 그나마 집중을 할 수 있는 환경.
며칠 지나다보니 강의를 보고 싶다는 생각까지 들었음.
강의를 들으며 실습을 하고 싶은데, 강의와 실습 두 컨텐츠가 싱크가 맞지 않으니 내가 원하는 학습과 동떨어짐을 느낌
Reaction
Comment
Share
K
Kurara
nextjs / react 두 언어는 다르다? 어떻게 다른지 궁금하다
v0는 nextjs기반이지만 react로 요청하면 또 요청됌
convex는 데이터 활용하는 서비스. 프론트엔드에 적합한 어쩌구했던듯?? ㅠㅠ
firebase, super base 도 있는데. 각 장단점이 있나봄
replit으로 기능부터 다 요청하면, api가져오라는것부터 다
Reaction
Comment
Share
K
Kurara
원하는 디자인을 프롬프트로 바꾸는 걸 시켜봤는데 아직 연습이 필요하려나 싶다. 미드저니처럼 스타일레퍼를 같이 넣는걸 해봐야겠다
Reaction
Comment
Share
K
Kurara
v0 사용법을 익히고나서 claude랑 비교해서 캘린더를 만들어봤어요.
v0가 좀 더 세련되고 트렌디한 디자인을 잘 뽑아냅니다. 클로드도 하면 하겠는데.. 디테일한걸 하나하나 말하려고 하면 공수가 많이 들 것 같아서 v0를 추천하는 것 같네요.
좌v0, 우 클로드
00:10
00:07
Reaction
Comment
Share
K
Kurara
gpt,v0,cursor를 사용한 micro saas 제품 개발 영상입니다.
1.
editor에서 cmd+l 눌러서 채팅열기
2.
v0에서 각 페이지를 요청하기
a.
hero section
b.
pricing section
3.
code editor에 새 문서를 만들고 v0에서 만든 코드를 복사 붙여넣기
a.
page.tsx에서 import... 이름을 고치기
b.
이슈가 있는 부분에 AI fix 를 누르면 수정을 해줌(6:13)
4.
debug 버튼 누름..
a.
localhost:3000으로 화면이 뜸
5.
8:30 채팅에다가 버튼 제대로 안보이니 수정하라고 요청함.
a.
8:54해당 코드를 찾아서 수정함
6.
clerk에 들어감(이게 뭔지 모름)
a.
시키는대로 코드를 복사해서 터미널에 넣거나 파일에 붙여넣음 (이걸 하나하나 왜하지 ..)
See more...
Reaction
Comment
Share
K
Kurara
v0를 써봤는데 금방 200크레딧이 소모됐어요.
결제를 해야하나..?클로드랑 크게 다름을 못느끼고 있어서 관련 스터디 자료를 더 찾아보고 있어요.
Reaction
Comment
Share
K
Kurara
요구사항을 쓰다보면 어떤게 요청할 때 더 중요한 정보인지 알아야할 것 같다는 생각이 듭니다
Reaction
Comment
Share
K
Kurara
프로젝트 상세 정보 입력과 분석기 요구사항을 작성중. b2b 포트폴리오를 쉽게 탈고해주는게 좋지않을까 상상중
Reaction
Comment
Share
K
Kurara
좀 더 있어빌리티하게 녹화한 버전
폼을 상세히 나눠 입력하도록. 여기에 gpt api를 붙일건데, 논리적이지 않은 구조를 입력하면 피드백을 주는 방식으로 + 논리적이게 다시 여러옵션을 갈아끼울 수 있도록 바꿔보려고 합니다.
00:15
Reaction
Comment
Share
K
Kurara
아이디어 2가 좀 더 단순해보여서..채택
일반 기본적인 요구사항을 클로드에게 요청하고 단순한 프로토타이핑을 만들어 아이디어를 시각화했습니다.
00:18
Reaction
Comment
Share
K
Kurara
아이디어 2 - 포트폴리오,기획 등 구성 짜주는 AI 앱
1 Comment
Reaction
Comment
Share
K
Kurara
아이디어 1 - 카페에서 시즌별 메뉴판이 필요할 때 사용할 수 있는 AI 포스터 디자인 앱
1 Comment
Reaction
Comment
Share
K
Kurara
근데 문제는 앱 개발환경에 대한 지식이 없기 때문에..뭐가 자동화되는지도 모르는..
Reaction
Comment
Share
K
Kurara
개발환경설정을 자동으로 도와주며 코드 생성에만 집중할 수 있는 도구입니다. 이 도구를 기반으로 디자이너도 앱을 만들 수 있는지 테스트해보겠습니다
Reaction
Comment
Share
Share
K
Kurara
아이디어 1 - 카페에서 시즌별 메뉴판이 필요할 때 사용할 수 있는 AI 포스터 디자인 앱
👍
K
Kurara
카페에서 시즌별 메뉴를 소개하는 포스터가 필요할때 쉽게 포스터를 만들도록 도와주는 AI 포스터 디자인 앱을 만드려고해.
먼저 아이디어는 미드저니로 음식 사진을 만들고 해당 음식에 다양한 디자인 서체를 꾸미는 기능을 추가할거야, 요구사항 정리 및 전체 시나리오를 작성하고, 피그마에서 화면 디자인 한 이후로
각 시나리오를 구현할 수 있는 ui를 v0로 먼저 만든 다음에 replit에서 필요한 개발환경을 완성하려고해.
이 방법으로 웹서비스를 만드려고하는데 더 필요한 단계가 있을까?

GPT:
당신이 세우고 있는 방법은 전반적으로 잘 짜여진 프로세스이며, 웹서비스를 구축하는 데 있어 중요한 단계들을 포함하고 있습니다. 하지만 더 효율적으로 프로젝트를 진행하기 위해 몇 가지 추가 고려 사항이 도움이 될 수 있습니다.

추가적으로 고려해야 할 단계:

1.
기능 우선순위 설정 및 MVP (최소 기능 제품) 정의
모든 기능을 한 번에 구현하기보다는, 먼저 핵심 기능 (예: 음식 사진 생성 및 간단한 디자인 편집 기능)을 빠르게 완성하는 것이 중요합니다. 이렇게 하면 피드백을 받아 더 나은 방향으로 발전시킬 수 있습니다.
MVP를 설정해 우선 배포할 수 있는 최소한의 기능들을 정리하세요.
2.
사용자 흐름(User Flow) 설계 및 테스트
시나리오가 완성된 후, 사용자 관점에서의 흐름을 시각화하고 실제로 사용자가 앱을 쉽게 사용할 수 있는지 확인하는 것이 중요합니다. 이를 통해 서비스의 UX 개선점을 찾을 수 있습니다.
Figma에서 프로토타이핑 기능을 활용해 사용자 흐름을 실제로 테스트하는 것도 추천드립니다.
3.
백엔드 및 데이터베이스 설계
AI 포스터 제작 앱이라면, 사용자가 포스터를 생성하고 이를 저장하거나 다시 불러오는 기능이 필요할 것입니다. 이 과정에서 데이터 저장소 (예: Firebase, MongoDB 등)와의 연동이 필요합니다.
사용자의 프로젝트와 디자인 데이터를 어떻게 관리할지 설계해야 합니다.
4.
AI 이미지 생성 API 연동
MidJourney API를 사용하거나, MidJourney 대신 다른 이미지 생성 AI (예: DALL·E)와의 연동 방법을 알아두는 것도 필요합니다.
이를 위한 API 호출과 이미지 데이터 처리 방식을 미리 구상해두면 개발 단계에서 수월하게 진행할 수 있습니다.
5.
사용자 피드백 및 반복적 개선
초기에 사용자 그룹을 선정해 베타 테스트를 진행하고, 실제 사용자의 피드백을 받아 개선할 계획을 세우세요.
빠른 주기의 개발 및 배포 방식을 통해 사용자 피드백을 반영한 업데이트를 지속적으로 진행하는 것이 좋습니다.
6.
배포 및 모니터링
서비스 배포 후에, Vercel과 같은 호스팅 서비스에 더해 사용자 로그, 성능 모니터링을 위해 Google Analytics, Sentry, LogRocket 등과 같은 도구를 연동해 서비스 상태를 모니터링할 수 있는 시스템을 갖춰야 합니다.
7.
지속적인 콘텐츠 관리
시즌별 메뉴나 테마는 주기적으로 업데이트해야 하므로, 이를 관리할 수 있는 CMS (Content Management System) 기능을 고려해보세요. 콘텐츠 업데이트를 손쉽게 할 수 있는 인터페이스나 관리 툴이 있으면 작업이 훨씬 수월해질 것입니다.

요약

현재 아이디어에 더해, MVP 설정, 사용자 흐름 테스트, 백엔드 및 데이터베이스 설계, API 연동, 피드백 기반의 반복 개선, 배포 후 모니터링 등의 단계를 추가적으로 고려하면 더욱 견고한 웹서비스를 만들 수 있습니다.
이 과정에서 시간이 부족하거나 복잡하다고 느껴지면 언제든지 작은 단계로 나누어 집중적으로 진행하는 것도 좋습니다.
See latest comments