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

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