전체 글

디자인까지 끝낸 후엔 도메인이 필요했다.Railway로 임시 배포는 해뒀는데, 거기서 자동으로 받은 주소가 길고 외우기도 힘들었다.어차피 사람들한테 보여줄 거면 깔끔한 도메인이 하나 있는 편이 낫다고 생각했다.도메인은 Squarespace에서 샀다.원래 Google Domains를 쓸 생각이었는데, 어느 순간 Squarespace에 인수되어 버려서 그냥 그쪽에서 진행하기로 했다.다른 등록업체도 잠깐 알아봤는데 가격이 크게 차이나진 않았고 관리 UI 깔끔한 곳이 낫다고 판단했다.1. 도메인 검색Squarespace Domains 메인 화면이다."Buy your dream domain" 카피만 크게 박혀있고 바로 아래에 검색창이 나온다.검색창에 weekedule을 입력했더니 후보가 쭉 떴다.가격이 생각보다 ..

Stitch가 만든 시스템을 그대로 클로드 코드한테 해달라고 했다. 해준다. 이 다음은 결국 QA의 연속이다.클로드코드로 생성한 프로젝트를 로컬에서 이렇게 저렇게 돌려보면서다양한 문제점, 의도와 다르게 된 점 들을 발견하면 바로바로 클로드코드한테 얘기를 한다.클로드 코드는 다 들어주고 다 고쳐준다.그러면 다시 확인하고다시 요청하고 그게 반복이다. 그러다보면 오류도 발생하는데,발생한 오류를 또 복사 붙여넣기 해서 전달하면고쳐준다.물론 한 번에 고쳐지지 않을 때도 있지만 계속해서 오류 코드를 전달하면클로드는 다시 고쳐준다. 그러다가 계속 계속 계속 비슷한 오류를 낸다면,,,,코덱스로 가면 된다 ! ! 현 시점에서 바이브코딩을 하면서 느낀점은클로드코드는 전체적으로 육각형 개발자이지만 애매하다 싶으면 하드코딩을..

Flutter를 설치하는 방법에는 두가지가 있는데,1. git 으로 설치하기2. VS code로 설치하기이다. 둘 다 상관은 없으나, 개인적으로 VS code로 설치하는 방향이 좀 더 간편해서VS code로 설치하는 방법을 적어두려 한다. 공식 문서에서 소개하는 단계는 이와 같다.우선 VS code가 필요하다. 좌측 맨 아래 extensions에서 Flutter를 검색하고, 맨 위에 Dart Code에서 제공한다고 표시된공식 익스텐션을 설치하면 된다.이렇게 설치가 완료되면 공식문서 2단계까진 끝이 났다. 이후 Ctrl + Shift + P 를 입력하면 상단에 검색창같은게 나오는데Flutter를 검색해서 Flutter : New Project를 클릭하면 우측 하단에 SDK 없다고 설치하라고 친절하게 안내해..

2026.04.10디자인은 Google Stitch와 함께 했다. 디자인은 원래 피그마로 해왔으나이번 컨셉은 AI로 모두 해보는게 목표였다.디자인 시스템을 Stitch가 잘 잡아준다는 정보가 있어서 한 번 시도해 봤다. 우선 Claude한테 와이어 프레임 제작했던 파일을 html로 넘겨달라했다.이런식으로 넘겨 주었고,이걸 그대로 스티치한테 줬다.그리고 별 말 안했다. 그냥 이 프로젝트의 디자인을 개선해달라고 했다. 조금 당황스럽긴 했는데와이어프레임 제작할 때 어느정도 색상 프로필을 구상해둔 상태로 만들어서 그랬을까한 번에 너무 마음에 드는 디자인이 나왔다.좋다고 얘기는 들었지만 이정도일줄은,,, 이렇게 1분만에 디자인이 끝이 났다. 흠,,, 이렇게 빨리? 어쨋든 맘에 들었기 때문에 이 파일을 그대로 클로..

2026.04.081. Claude와 MVP 기획하기 우선 기획을 진행했다.어느정도는 머리속에서 구상을 한 다음에생각한 MVP 기능들과 대략의 와이어프레임을 종이에 그렸고,그것을 바탕으로클로드와 함께 상의했다. 간단하게 아이디어를 제시해서 와이어프레임을 만들게 했고,그걸 바탕으로 다듬으면서 아이디에이션을 해볼 계획이었다. 클로드가 만들어준 앱 화면이다. 웹으로 했어야 했는데 앱으로는 어떨까 싶어서 일단 앱으로도 보려고 했다.앱도 괜찮긴 한데 일단 웹을 먼저 해보자고 생각했기 때문에웹으로 변경하기 위한 작업을 시작했다.피그마로 간단of간단 와이어 프레임을 작성해서 클로드한테 보내면서 방향성을 제시하고웹으로 변환시켜달라고 했다.결과는 매우 성공적.꽤 맘에 들게 나왔다. 근데 생각과 다른 것들이 존재했고,그런..

2026.04.08 Weekedule 기획 시작 기본적으로 클로드 코드를 사용해 보려한다.이유는?코드 작성에 가장 메이저한 llm이라고 들었기 때문이유는 없다그야,,, 가장 유명하고 좋다고 하니까??써봐야 이게 진짜 좋은지 알 수 있을 듯 하다.그리고 클로드 코드 규칙이니 하네스 엔지니어링이니 일단은 고려 대상은 아니다.일단 써보고 문제가 생기면 하나씩 추가해 볼 계획이다. 클로드 코드를 사용하는 사람들의 사용법들을 많이 봤는데대부분 사람들은 터미널에서 클로드코드를 사용하고 있었다. Claude for desktop 이 있는데 왜 그런지는 잘 모르겠다.터미널에서 사용할 때 데스크탑 버젼 앱과 다른 점을 크게 발견하지 못해서 그리고 사용성이 별로라 터미널을 사용한다는데그건 개발을 자주 하고 터미널이 익숙한..

링크와 이미지를 페이지에 삽입하고 싶을 땐, 각각 a태그와 img태그를 사용한다. 링크는 기본적으로 문서간의 연결을 말하며, 내부나 외부의 링크를 만들 수 있다. 1. a 태그 a태그의 기본적인 형식은 이와 같다. href는 대상 경로이다. 대상의 주소(URL)이나 내부문서의 id속성 값이다. (처음 코드를 구성할 때, 대상 경로가 불확실 한 경우가 있다. 그런 경우에는 href="#"으로 채워두면 잠시 오류를 피할 수 있다.) target은 링크 연결 방식이다. _blank, _parent, _self, _top이 있다. 가장 많이 사용되는 것은 새 창으로 열기인 _blank이다. title은 링크 설명이다. 지정한 경로의 정보가 무엇인지 메모하는 용도이다. a태그를 사용하기 위해서는 href를 필수적..

HTML에서 목록을 생성할 때는 대표적으로 세 가지를 사용할 수 있다. ul, ol, dl인데, 각각 순서 없는, 순서 있는, 정의표현의 역할을 한다. 목차나 메뉴같이 목록이 필요한 부분을 구성할 때 필수적이다. 1. ul 태그 Unordered List의 줄임표현으로, 순서가 없는 목록이라는 의미이다. ul태그 안에 li(list item)을 담는 구성이다. Hello HTML CSS JS 이와 같이 구성한 코드는 다음과 같이 출력된다. 실행결과에서는 보이듯이 글머리 기호가 붙는다. 2. ol 태그 Ordered List의 줄임말로, 순서가 있는 목록이라는 의미이다. ul태그와 마찬가지로 ol태그안에 li를 담는 구성이다. Hello HTML CSS JS 이와 같이 구성한 코드는 다음과 같이 출력된다...