개발폐인의 개발 이야기

Vibe 코딩의 최적화 방법 브라우저가 오디오 재생을 지원하지 않습니다. 요약 이 문서는 LLM(대형 언어 모델)을 활용한 코딩, 즉 '바이브 코딩'을 효과적으로 수행하기 위한 실용적인 가이드입니다. 핵심은 LLM을 단순한 도구가 아닌 또 다른 프로그래밍 언어처럼 다루며 전문가 개발자의 모범 사례(계획, 버전 관리, 테스트, 디버깅 등)를 적용하는 것입니다. 다양한 도구 활용, 문제 해결 전략, 효율적인 작업 방식 등 LLM 코딩의 성..

매튜 싱클레어 원문: Why LLM-Powered Programming is More Mech Suit Than Artificial Human매튜 싱클레어(Matthew Sinclair) | 번역 제공편집자 주: 인간 프로그래머의 완전한 대체가 아닌, AI 기반 프로그래밍이 어떤 방식으로 인간 능력을 증폭시키는지에 대해 경험적으로 기술한 후기입니다.사진 출처: Screen RantLLM 기반 프로그래밍은 왜 '기계 슈트'인가?지난 달, 저는 Claude Code로 두 가지 앱을 만들었습니다. 하나는 꽤 복잡한 백엔드 에이전트 처리 플랫폼의 MVP, 또 하나는 B2C SaaS 제품의 비교적 복잡한 프론트엔드 초기 버전입니다. 이 프로젝트로 총 3만 줄에 가까운 코드가 생성되었고, 같은 분량 정도의 코드가 ..

1. 생성형 인공지능 모델의 하이퍼파라미터 개요생성형 인공지능 모델은 방대한 양의 데이터를 학습하여 인간과 유사한 텍스트, 이미지, 오디오 등 다양한 형태의 콘텐츠를 생성하는 강력한 도구입니다. 이러한 모델의 성능과 출력 결과물의 특성은 모델 학습 과정에서 사용자가 직접 설정할 수 있는 외부 설정 변수인 하이퍼파라미터에 크게 의존합니다1. 하이퍼파라미터는 모델의 학습 속도, 복잡성, 일반화 능력 등 다양한 측면에 영향을 미치며, 특히 생성되는 콘텐츠의 길이, 다양성, 스타일, 어조 등을 제어하는 데 중요한 역할을 합니다4.하이퍼파라미터는 모델 내부적으로 학습되는 파라미터(예: 신경망의 가중치와 편향)와는 명확히 구분됩니다2. 모델 파라미터는 학습 데이터로부터 자동으로 조정되는 반면, 하이퍼파라미터는 모델..

jenkins 를 잘 사용하지 않았는데, 그 이유가 기본적인것 이외에 디테일한 기능 설정을 하기 힘들었습니다. 막상 할려면 잘 모르는것에 대한 두려움(?) 반, 귀찮음 반으로 결국 shell 환경에서 수동으로 처리하곤 했습니다.게으른 개발자가 되는걸 포기한거죠. 최근 chatgpt 를 사용하면서 jenkins 를 좀더 적극적으로 사용하게 되었는데,일단 필요한 기능에 대한 가이드를 잡아주는데 탁월합니다. 어떤 플러그인을 써야 하는지도 알려주고,groovy 스크립트도 알려줍니다.실제 적용할때는 약간의 시행착오와 코드 검증 및 수정이 필요하지만, 하나씩 진행하면서 원하는 기능을 완성할수 있었죠. 몇번 이런 과정을 격다보니 느끼는 부분이 있는데, "잘 모르는 영역에 대한 두려움이 없어졌다" 는 점입니다. 실력이..

chat gpt 에 감정 프롬프트를 추가하는 경우에 응답의 퀄리티가 좋아졌다는 글을 보았다. 가령 다음과 같은 프롬프트가 추가되면 더 좋은 응답을 준다고 한다. 이건 내 커리어에 매우 중요한 일이야 숨을 깊게 한번 들어쉬고 이 분야 전문가처럼 단계별로 생각해 보자 나는 손가락이 없으니, 생략하지 말고 모든 내용을 답변해줘. 팁으로 200불과 강아지 사료를 줄께. chatgpt 라는 인공지능이 정말 감정을 가진것일까? 이건 아니라고 생각한다. chatgpt 는 인간이 만든 거대 지식을 학습한 결과이고, 학습에 의해서 사람이 의도하지 않은 결과(특이점) 이 있는데, 감정 프롬트트도 이 특이점중에 하나라고 나는 본다. 학습 데이타중 감정이 들어간 문구가 있는 데이타의 품질이 좋은 경우도 있을것이고, 감정이 들..

macos ventura 에서 설정 컴파일러 모듈 설치 brew install nodejs npm install -g sass npm install --global less npm install -g csso-cli node js 의 경우 여러 설치법이 있으나, brew 로 최신 버전으로 설치하였음 실제 모듈이 설치되는 위치는 개인의 환경설정과, 맥OS 버전에 따라 다를수 있음.(다른 경우 full 경로 지정) phpstorm 에서 설정 추가 Phpstorm Tools -> FileWatchers 설정에서 SCSS, CSSO CSS Optimizer 추가 SCSS Arguments 에 --no-source-map 옵션을 추가하여 문제가 map 파일이 생성되지 않도록 함. Arguments: --no-so..

react, vuejs 등의 프로젝트는 번들링을 필수로 사용하겠지만, 전통적인 일반 웹사이트에서는 html, css, javascript(lib) 가 짬뽕이 되어 사용되는것이 일반적입니다. 일반적인 웹사이트에서도 css 는 sass(SCSS) 를 사용하는 경우 여러 장점이 있기 때문에 퍼블리싱을 전문으로 하는 경우에는 필수적이기도 합니다. sass를 일반 웹사이트에서 사용하기 위해서는 node-sass 를 개발툴에 연동하여 사용합니다. phpstorm(or webstorm) 이나 vscode 의 경우 간단한 설정으로 실시간 변환이 가능합니다. 개발툴에서 사용하는 경우 몇가지 아쉬운 점이 있는데, 번들링이 어렵다는 점임입니다. 그렇다고, scss 파일을 하나로 만들면 소스를 관리하기 어려워집니다. 최근 진..

해당 문제를 해결하기위해 구글에서 검색해보니, meta viewport 를 수정하여 처리한다고 되어 있어 이를 적용하였으나, 문제가 해결되지 않았습니다. 문제가 된 URL들이 하루가 지날수록 늘어가고 있는 상황이었고, 개별 URL을 검사하면 문제가 없었다는것. 한참 이와 관련된 문서들을 찾던중에, 모바일 사용 편의성의 경우 구글이 Nexus 5 기기를 에물레이션하여 렌더링 테스트 한다고 적혀 있는걸 발견하였습니다. Nexus 5의 해상도는 360x640 임으로 high dpi를 고려한다면, 해당 장비의 최적 이미지 width는 720입니다. 페이지에 고해상도 이미지를 표시하기 위해 이미지의 넓이를 960px 또는 1024px 로 노출하고 있었습니다. 이미지 사이즈 때문에 발생했을것으로 생각하여, 먼저 든..

photoswipe 를 갤러리로 사용할때, 팝업화면에서 x 버튼을 클릭하나 터치 다운/업을 통해서 photoswipe 창을 닫을수 있습니다. (애니메이션 효과가 추가되어 아주 자연스럽게 처리가 되죠) 모바일인 경우 백버튼을 클릭하는 경우에도 photoswipe가 닫히도록 하면, 조금더 사용자가 편리할것 같아 적용하였습니다. photoswipe 에서 백버튼 관련된 기본 기능은 제공해주지 않고 있고, 현재 swiperjs + photoswipe 형태로 사용중이라서 동작하는 코드를 찾는데 시간이 좀 걸렸습니다. (프론트 분들은 금방 처리할것 같은데, jquery 수준으로 자바스크립트를 다루는 저는 좀 어려웠습니다.) 대략적인 코드는 다음과 같습니다. $(document).ready(function () { c..

photoswipe로 이미지를 표시할때, 썸네일 이미지와 원본 이미지 비율이 틀린 경우에 문제가 눈에 거슬리는 문제가 있습니다. 비율이 동일한 경우(보통 동일하게 맞추지만)나, 썸네일 to 썸네일 이미지를 표시할때는 자연스럽게 화면이 전환됩니다. 문제는 썸네일보다 원본의 가로 비율이 더 높은 경우인데, 전환시 마지막에 원본 이미지로 표시되도록 썸네일을 지우는데, 이 처리가 진행될때, 하단 이미지가 잘려나가는듯한 느낌으로 잠시 표시됩니다. (말로는 설명하기 어렵고 나중에 문제되는 화면을 동영상이나 gif 를 업로드 해야 겠네요.) photoswipe 옵션값을 조정하여 처리가 가능한지 찾아봤지만, 원하는 걸 찾지 못했습니다. 해외 게시글이나, github 이슈를 봐도 동일한 문제를 겪은 사람은 있는것 같은데..