블로그

uslab.ai

바이브코딩으로 CES 2026 페이지를 이틀 만에 만들었습니다

“CES 2026 혁신상, 한국 기업이 절반 이상을 휩쓸었다.”이런 이야기를 여기저기서 접했습니다.그런데 막상 확인해보려니, 이상하게도 한눈에 볼 수 있는 사이트나 리스트가 없었습니다.어떤 기업이, 어떤 제품으로, 어떤 분야에서 수상했는지정리된 형태로 확인할 수 있는 곳이 없더군요.그래서 그냥,직접 만들기로 했습니다.결론부터 말하면 이틀 만에 초안을 만들었고,그 이후 4일 동안 안정화와 검증 작업을 진행했습니다.👉 CES 2026 정리 페이지https://uslab.ai/ko/ces목록에서 제품을 클릭하면,각 항목마다 딥리서치를 통해 정리한 분석 내용을 확인할 수 있습니다.1. 이번에는 ‘자료 인용’이 아니라, ‘제대로 분석’을 하고 싶었습니다CES 공식 페이지를 보면 각 수상작은 보통 아래 정도의 정보만 제공됩니다.한 장짜리 설명간단한 제품 소개https://www.ces.tech/ces-innovation-awards/하지만 개인적으로는 그게 늘 아쉬웠습니다.이 회사가 한국 기업인지회사 공식 홈페이지는 어디인지이 제품이 왜 나왔고누가 먼저 도입할 가능성이 있는지이런 정보가 있어야 “봤다”가 아니라 “판단했다”고 말할 수 있다고 생각했기 때문입니다.그래서 단순히 일부를 발췌하는 방식이 아니라,전체를 수집한 뒤 딥리서치로 다시 해석하기로 했습니다.2. 설계는 GPT·Gemini, 구현은 Cursor (바이브코딩)이번 프로젝트의 작업 방식은 꽤 단순했습니다.GPT와 Gemini로 전체 컨셉과 구조에 대해 충분히 대화를 나눕니다화면 구성, 필드, 데이터 흐름을 정리합니다설계가 확정되면 그 내용을 MD 파일로 문서화합니다그 문서를 그대로 Cursor에 전달해 구현합니다구현 과정에서 오류가 생기면오류 재현 방식과 로그를 정리한**오류보고서.md**를 다시 만듭니다GPT와 Gemini와 함께 원인을 쪼개고수정 방향을 정리해 다시 Cursor로 돌아갑니다정리하면,문서로 설계 → 문서를 던져서 구현 → 문서로 디버깅이 패턴을 계속 반복했습니다.기술 스택은 Supabase + Vercel 조합으로 구성했습니다.3. 일단 452개를 ‘전부’ 모았습니다처음부터 일부만 선별하는 방식은 쓰지 않았습니다. 그 순간부터 기준이 흐려질 것 같았기 때문입니다. 그래서 CES 2026 혁신상 상세 페이지 기준으로총 452개 제품을 전부 수집했습니다.Cursor에게 사이트 구조를 알려주고 크롤링을 요청했더니,타입스크립트를 자동으로 구성하고데이터를 불러와 검증하고정리된 형태로 가져오더군요.수집된 데이터는 제품별로 하나씩 MD 파일로 정리했습니다.4. 딥리서치: 452개를 한 번에 돌릴 수는 없었습니다여기서 현실적인 제약이 있었습니다.ChatGPT Ultra 요금제를 사용하고 있었는데, 딥리서치 할당량이 월 250으로 제한되어 있었습니다. (횟수라기보다는 내부 리소스 소모 구조에 가까웠습니다) 452개를 개별로 돌리는 건 비효율적이었고, 처음에는 카테고리 단위로 묶어봤지만 한 카테고리에 50개씩 들어가면 분석 품질이 눈에 띄게 떨어졌습니다.테스트 결과,10개 단위가 가장 안정적이었습니다.그래서:452개를10개씩 묶어총 46번의 딥리서치를 진행했습니다.딥리서치 프롬프트는 MD 파일로 따로 정리했고, 분석 구조는 아래 7가지로 통일했습니다.기본 정보 (기업명 / 홈페이지 / 한국 기업 여부 / 제품 한 줄 정의)문제 정의핵심 차별점주요 도입 주체확장 가능성평단의 평가분석가 한 줄 판단프롬프트 자체는 GPT와 Gemini가 거의 다 만들어줬습니다. 대화창이 복잡해지는 걸 피하기 위해CES 2026 전용 프로젝트 공간을 따로 만들어 그 안에서 딥리서치를 돌렸습니다.ChatGPT는 10개 단위로 원하는 방향의 딥리서치를 안정적으로 수행했고, Gemini는 종합 보고서 성향이 강해 이번 프로젝트에서는 ChatGPT 중심으로 사용했습니다.중간에 할당이 막히기도 했고, 하루를 넘겨가며 조금씩 풀리는 걸 기다리기도 했지만, 결과적으로 모든 딥리서치를 완료했습니다.5. 프로토타입은 이틀, 진짜 작업은 그 이후였습니다프로젝트는 1월 14일에 시작했고, 15일 저녁에 프로토타입이 완성됐습니다.하지만 체감상 진짜 작업은 그 이후였습니다.데이터 누락·중복 체크카테고리 정리 및 동기화상세 페이지가 깨지는 케이스 수정검색/필터 UX 튜닝이미지·링크·메타데이터 정리무엇보다 “내가 계속 쓰고 싶은가?”에 대한 반복 테스트그래서 개인적으로는 이렇게 구분하고 있습니다.이틀은 ‘만든 시간’ 그 이후는 ‘망가지지 않게 만드는 시간’숫자에 대해 한 가지 짚고 넘어가면기사에서는 혁신상을 받은 기업이 357곳이라고 나오기도 하지만, 실제로 CES 공식 사이트의 상세 페이지를 기준으로 수집해보니 총 452개 항목이었습니다.이전 수상 이력 + CES 2026 행사 과정에서 추가로 노출되는 구조 때문으로 보였고, 생각보다 정리해야 할 데이터가 더 많다는 점에서 저 스스로도 조금 놀랐습니다.정리하며이번 작업을 통해 다시 느낀 점은 분명했습니다.예전 같으면“이건 팀이 있어야 가능한 작업”이라고 생각했을 겁니다.하지만 지금은설계는 AI와 충분히 대화하며 정리하고구현은 바이브코딩으로 빠르게 만들고분석은 딥리서치를 쪼개서 현실적으로 처리하면개인도 충분히 가능한 영역이 됐다고 느꼈습니다.이렇게 정리된 데이터는 MD 파일로 저장해 NotebookLM에 넣어 활용하고 있습니다.개인 리포트를 만들거나,관심 있는 주제만 다시 파고들기에도 적당합니다.👉 CES 2026 정리 : https://uslab.ai/ko/ces👉 NotebookLMhttps://notebooklm.google.com/notebook/b7e0cea7-a0e2-4aa7-a4f1-58b43de862ca👉 NotebookLM 활용가이드https://uslab.ai/ko/blog/ces-2026-notebooklm-complete-guide AI가 모든 걸 대신해주지는 않습니다.하지만 생각을 실제 결과물로 옮기는 속도는 확실히 다른 단계로 올라왔다는 건 분명해 보입니다.

AI 개발 활용ces혁신상개발바이브코딩ai인공지능ax웹페이지데이터분석

Go Hard

파이썬으로 3초 만에 이미지 누끼 따기 (OpenCV 삽질 피하는 현실적인 방법)

파이썬과 IT 관련 지식을 정리하고 있는 잡학다식 개발자입니다.오늘은 쇼핑몰을 운영하시거나 블로그 썸네일을 만드시는 분들, 혹은 이미지 전처리 자동화가 필요한 분들이 자주 겪는 '누끼 따기(배경 제거)'에 대해 이야기해 보려고 합니다.이론과 현실의 간극: 왜 교과서적인 방법은 실무에서 실패할까?구글에 '파이썬 이미지 배경 제거'를 검색하면 가장 먼저 나오는 교과서적인 방법은 보통 OpenCV를 이용한 색상 임계값(Thresholding)이나 윤곽선(Contour) 검출 방식입니다. 이론적으로는 배경과 피사체의 색상 차이를 이용해 분리해 내는 훌륭한 원리죠.하지만 현실의 실무 데이터는 그렇게 만만하지 않습니다. 조명에 따라 생기는 그림자, 피사체와 비슷한 색상의 배경, 특히 '머리카락'이나 '퍼(Fur)' 같은 복잡한 경계선을 만나면 이 교과서적인 방법은 여지없이 무너집니다. 결국 파라미터 값을 조정하다가 밤을 새우는 이른바 '탁상공론'식 코딩이 되고 맙니다.실제 현업의 해결책: AI 기반 rembg 라이브러리그래서 실제 서비스 환경이나 실무에서는 픽셀의 색상을 계산하는 대신, U-Net 기반의 딥러닝 모델이 적용된 rembg라는 라이브러리를 사용합니다. 복잡한 수학적 연산이나 파라미터 튜닝 없이, AI가 알아서 피사체와 배경을 완벽하게 분리해 줍니다.구형 방식인 requirements.txt 대신, 요즘 파이썬 생태계 표준인 pyproject.toml을 이용해 환경을 세팅하고 코드를 실행하는 방법을 공유합니다.1. 환경 세팅 (pyproject.toml)Ini, TOML[build-system] requires = ["setuptools", "wheel"] build-backend = "setuptools.build_meta" [project] name = "background-removal-demo" version = "0.1.0" description = "rembg를 활용한 이미지 배경 제거 자동화 스크립트" requires-python = ">=3.9" dependencies = [ "rembg>=2.0.50", "Pillow>=10.0.0" ] 2. 실행 코드 (remove_background.py)Python""" 이미지 배경 제거 자동화 스크립트 - rembg 라이브러리를 활용하여 딥러닝 모델 기반으로 피사체와 배경을 분리함 - 복잡한 윤곽선(머리카락, 그림자 등)을 처리하기 위한 실무 최적화 방식 """ from rembg import remove from PIL import Image import os def process_image(input_path: str, output_path: str): # 입력 및 출력 파일의 유효성 검증 if not os.path.exists(input_path): print(f"[Error] 입력 파일을 찾을 수 없습니다: {input_path}") return try: # 이미지를 메모리에 로드 input_image = Image.open(input_path) # rembg 라이브러리를 통한 배경 제거 처리 (추론) output_image = remove(input_image) # 투명도(Alpha 채널)를 보존하기 위해 PNG 포맷으로 저장 output_image.save(output_path, format="PNG") print(f"[System] 배경 제거 완료. 결과물 저장 경로: {output_path}") except Exception as e: print(f"[Error] 배경 제거 처리 중 예외 발생: {e}") if __name__ == "__main__": # 테스트용 파일 경로 지정 (실제 파일 경로로 수정하여 사용) INPUT_FILE = "sample_input.jpg" OUTPUT_FILE = "sample_output.png" process_image(INPUT_FILE, OUTPUT_FILE) 마치며코드를 보시면 아시겠지만, 실제 현업에서 문제를 해결하는 방식은 때로는 교과서적인 기초 원리보다 이미 잘 만들어진 도구를 얼마나 적절하게 가져다 쓰느냐에 달려있기도 합니다.위의 코드를 복사해서 직접 실행해 보시면 퀄리티에 꽤 놀라실 겁니다. 만약 텍스트와 코드만으로 이해가 어렵거나, 터미널 환경 세팅부터 실제 이미지가 깔끔하게 누끼 따지는 시각적인 과정 전체를 눈으로 확인하고 싶으신 분들은 아래에 제가 정리해 둔 영상 링크를 참고해 주셔도 좋습니다.오늘도 오류 없는 평온한 코딩 하시길 바랍니다. 감사합니다.https://youtu.be/HzuSu2b_5N4

AI 개발 활용python자동화rembg배경제거누끼따기pyproject

AI 에이전트와 웹의 연결, Chrome의 새로운 표준 'WebMCP'를 아시나요?

안녕하세요! 최근 AI 에이전트가 브라우저에서 직접 작업을 수행하는 능력이 주목받고 있는데요.기존에는 AI가 화면을 스크래핑하거나 DOM 구조를 추측하는 방식이라 UI가 조금만 바뀌어도 동작이 깨지는 한계가 있었습니다. 이를 해결하기 위해 구글 크롬 팀이 제안한 새로운 프로토콜, WebMCP(Web Model Context Protocol)를 소개하고자 합니다. 핵심 요약: "추측에서 계약으로"WebMCP의 핵심은 웹사이트가 AI에게 "나 이런 도구(Tool)가 있고, 이런 데이터가 필요해"라고 명시적인 '사용 설명서'를 건네주는 것입니다.정확도 상승: JSON Schema를 통해 입력값 규격을 맞추므로 환각(Hallucination)이 줄어듭니다.유지보수 용이: UI 레이아웃이 변경되어도 정의된 도구 이름만 같다면 AI는 문제없이 작동합니다.클라이언트 기반: 서버가 아닌 브라우저 내부에서 사용자의 컨텍스트를 활용해 실시간으로 동작합니다. 🖼 기존 방식 vs WebMCP 방식 비교 💻 구현 예시 (선언적 방식)JavaScript 한 줄 없이 HTML 속성만으로도 AI용 도구를 만들 수 있다는 점이 놀랍습니다.<form toolname="search_flights" tooldescription="출발지, 목적지, 날짜를 입력받아 항공권을 검색합니다." > <input type="text" name="departure" label="출발지" required> <input type="text" name="arrival" label="목적지" required> <input type="date" name="travel_date" label="여행 날짜"> <button type="submit">검색</button> </form>이제는 SEO(검색 최적화)를 넘어, AI 에이전트가 우리 서비스를 얼마나 잘 활용하게 만들 것인가를 고민하는 AIO(AI Optimization)가 웹 개발의 새로운 표준이 될 것으로 보입니다.WebMCP의 구체적인 작동 원리와 JavaScript API 활용법 등 더 자세한 내용이 궁금하신 분들은 아래 제 블로그 포스팅에 정리해 두었습니다. 👉[블로그 링크: WebMCP - 웹과 AI 에이전트를 잇는 새로운 표준] 앞으로의 웹 생태계가 어떻게 변할지, 여러분의 의견도 궁금합니다

AI 개발 활용WebMCPAI에이전트AIO웹표준구글크롬프론트엔드LLM자동화신기술웹개발

채널톡 아이콘