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

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