> 아무것도 몰라도 만들 수는 있지만, 그래도 비개발자라면 알면 좋은 기본기. 이건 쉽고 간단 웹 개발 버전.
- 바이브 코딩에 도구 선택지는 2가지 유형이 있는데 에디터 스타일의 Cursor, Antigravity 같이 IDE에서 하는가 터미널에서 바로 하는 Claude Code, Gemini CLI를 쓰느냐. 근데 해본 바로는 아직까지는 Claude Code가 최고다. 성능적으로 디자인 감각 등. 근데 3D 디자인은 Gemini가 좀 더 잘하는 것 같다.
- 당연히 터미널 명령어는 알면 알수록 도움된다. 물론 본인은 cd, ls, mkdir, touch, echo, clear 정도 알고 있고 tmux (화면 분할) 외에 막 도구를 쓰지는 않는다. 그래도 터미널 CLI는 진짜 미친 공간이다. 특히 보기 좋게 해주는 syntax highlight나 prettier 류는 진짜 많고 예전에 이거 꿀팁 깃헙 레포도 만들기도 했는데 이젠 이거보다 좋은게 많아서 딱히 공유안한다. 그냥 AI에게 물어보면 10min 내외 글로 뚝딱하나 나올거니 그거보고 공부ㄱㄱ
- 환경변수라는 단어에 익숙해지자. 기본적으로 실행환경인 zsh에서 zshrc 같은거 세팅해보면 충분히 감이 올 것이다.
- 우선 프로젝트의 저장 방식에 있어서 git 구조는 중요하다. git은 파일 버전 관리 시스템이다. github은 이런 git을 웹에 저장하고 지원해주는 플랫폼이다. 비개발자를 위해 설명하자면 기본적인 기능은 (1) 로그 남기기 (2) 브랜치(멀티버스 세계관 만들기) (3) 세계관 합치기 (4) 저장된 세계관 불러오기 (5) 멀티버스 돌아다니기 등이 있다. 근데 보통 비개발자는 컨플릭트에서 아에 뇌정지가 올 수 있는데, 뭐 여러가지 공부해야지만 기본적으로는 수정하다가 불러와야하거나 그럴 때 stash라는 키워드를 공부하자.
- AI의 단위는 토큰(그 "토큰"아님 주의)이다. 대충 글자수라고 이해해도 되는데, 결국 비용을 내면 글자수 단위로 인풋아웃풋에 따라 비용이 처리되고 한도가 줄어든다. 즉 알잘딱깔센으로 이야기하면 같은 비용 대비 훨씬 오래 잘 쓸 수 있다. 그래서 코드 짤때 아무것도 안보고 짜는 것보다는 재사용성이 높게 리팩토링하면서 짜야한다. 리팩토링 어떻게 하는지는 몰라도 된다. AI에게 종종 "파일 구조와 코드에 있어 재사용성을 높일 수 있도록, 템플릿화/리팩토링과 코드 최적화를 도와줘"라고 하자. 당연히 디테일한 테크닉을 알면 좋은데 용어 아는게 바이브 코딩에서는 짱이다.
- 좀 더 이어말하자면 바이브코딩으로 개발된 내용이 많아질수록 점점 구조가 깨지는 경우가 있어서 이런 부분에 있어 디자인 원칙을 별도의 markdown으로 만들어두면 좋다.
- 프론트 디자이너가 아니라면 디자인 레퍼런스를 어디서 가져올지 모르는 경우가 많다. 키워드 많이 알면 좋은데 요새 본인은 "미니멀리즘", "Framer 스타일 애니메이션 및 인터랙션", "Y Combinator 투자 받은 스타트업" 등의 키워드를 선호한다. 아니면 링크 주고 코드 그대로 가져와도 된다. (요새 대부분은 tailwind로 모든 것을 구현해놓기에 좋다) 미감을 키우기 위해서 CodePen 종종 보면 좋고 코드도 종종 가져다 주면 좋다.
- 상단의 바가 Header / Navigation, 그리고 하단이 Footer, 그리고 홈페이지 로고가 크롬탭에서 보이는 건 favicon, 그리고 옆에 메뉴가 sidebar, 목차 깔끔하게 보는건 Table of Contents (ToC). 마우스 올렸을 때 효과가 Mousehover.
- 디자인이 고급져보이고 싶다면 제일 중요한 건 여백(행간 자간 포함)과 테두리 둥근(round) 정도, 폰트를 신경써달라고 하자. 폰트는 세리프와 산세리프로 기본적으로 구분할 수 있고 찾아보면 여러 톤앤매너를 공부할 수 있는데, 본인은 그냥 애플의 킹갓폰트 Helvetica를 선호한다.
- 기본 배포는 여전히 vercel이 짱이다. 도메인도 쉽게 구매 및 연결하니 참고. 예전에는 SSL도 직접하고 했어야 하는데 참 좋은 세상이다.
좀 더 하면서 생각나는 거 있으면 2편도 써보겠습니다. 특히 API 불러오는 작업하는 분들이 많을 것 같은데 일단 저도 api 불러오는 작업과 db도 좀 오랜만에 해보고 또 공유해보겠습니다.
* 도움되었으면 이런 팁들로 만든 ethviz 포스팅 X글 좋아요 해주세요. 이더리움 재단이 알게 될 때까지 뒷단에서 열심히 만들 예정.