google-sheets

2 개의 포스트

kakao

Vibe Coding하는 비개발자는 개발자인가(3) (새 탭에서 열림)

AI 에이전트는 비개발자에게 단순히 코드를 생성해주는 도구를 넘어, 업무를 실행 가능한 구조로 재정의하게 만드는 동반자다. 글쓴이는 로컬 HTML 도구를 공유 서비스로 확장하고, 스프레드시트·웹훅·환경변수·스킬·MCP 등을 활용하며 입력과 출력, 권한, 보안, 검증 조건을 자연스럽게 고민하게 되었다고 말한다. 결국 중요한 것은 코딩 능력 자체보다 자신의 업무를 AI가 수행할 수 있는 단위와 규칙으로 구조화하는 능력이다. ## 로컬 HTML에서 공유 데이터 도구로 - 초기 도구는 브라우저에서 실행하는 단일 HTML 파일이었다. - 서버와 데이터베이스가 필요 없고 혼자 사용하기에 충분했다. - 다른 사람과 공유하려면 배포 주소, 최신 버전 반영, 데이터 저장 문제가 생겼다. - 정적인 화면을 넘어 다음 요구사항이 발생했다. - 과거 입력값 조회 - 여러 사용자의 데이터 공유 - 상태 변경에 따른 화면 갱신 - 사용자별 조회·수정 권한 관리 - 잘못된 수정의 복구와 데이터 백업 - 정식 데이터베이스는 접근 권한 설계와 운영·보안 부담이 컸다. - 대신 구글 스프레드시트를 공유 데이터 저장소로 활용했다. - 기존 협업 UI와 권한 관리 기능을 이용할 수 있었다. - 수정 이력과 공유 기능도 이미 제공됐다. - Apps Script 코드를 직접 붙여넣는 방식에서 시작해, 이후 `clasp`를 이용한 Apps Script API 기반 배포·실행 방식으로 발전했다. - 핵심 변화는 코드를 많이 작성한 것이 아니라, 데이터 위치·공유 방식·권한·변경 이력을 설계하기 시작했다는 점이다. ## 웹훅 연동과 보안 습관 - AI 에이전트의 도움으로 업무 환경과 연결되는 웹훅 봇을 구현할 수 있게 되었다. - 웹훅 URL과 토큰을 다루면서 다음 보안 원칙을 익히게 됐다. - 비밀값을 코드나 프롬프트에 직접 입력하지 않기 - `.env` 파일에서 환경변수로 읽기 - `.gitignore`로 저장소에 비밀값이 올라가지 않도록 하기 - 로그에 토큰 등 민감정보를 출력하지 않기 - 실제 비밀값 대신 placeholder 사용하기 - 작은 자동화라도 외부 시스템과 연결되는 순간 실행 환경과 접근 권한, 비밀값 관리가 함께 고려되어야 한다. - 보안은 별도의 전문 작업이 아니라 AI에게 코드를 요청할 때마다 반복하는 작업 습관이 되었다. ## 손작업을 명세와 파이프라인으로 바꾸기 - 파일 복사·정리, 문서 변환, 영상 편집, 음성 추출, 요약 등 기존의 수작업도 AI 에이전트에게 맡기기 시작했다. - 사람이 직접 할 때는 감으로 처리하던 작업도 에이전트에게 맡기려면 구체적인 명세가 필요했다. - 대상 입력 파일 - 결과 파일명과 저장 위치 - 기존 파일 덮어쓰기 여부 - 실패 시 중단 조건 - 결과의 정상 여부를 판단하는 검증 기준 - 이 과정에서 반복 업무가 다음과 같은 업무 단위로 분해됐다. - 입력 - 처리 단계 - 출력 - 예외 상황 - 검증 조건 - 자동화의 핵심은 명령어를 아는 것이 아니라, 한 단계가 완료되었다고 판단할 기준과 입력·출력 형식을 정의하는 데 있다. ## 회의록 스킬과 반복 판단의 축적 - 매주 반복되는 회의록 작성 과정에서 일정한 수정 패턴이 발견됐다. - 글쓴이는 Codex와 Claude의 `skill`을 만들어 회의 유형별 규칙을 저장했다. - 회의록의 출력 형식 - 결정사항과 액션 아이템 추출 방식 - PMO 관점에서 확인할 신호 - AI가 독단적으로 결론 내리지 않고 사용자에게 질문해야 하는 경우 - 스킬은 단순한 프롬프트 모음이 아니라 반복되는 판단 기준과 업무 규칙을 저장하는 장치였다. - AI가 초안을 작성하면 최종본과 비교해 개선점을 찾고, 그 결과를 다시 스킬에 반영하는 순환 구조를 만들었다. - 내부 데이터를 정리하다가 대화 기록을 잃어버린 사례도 있었다. - 스킬 파일은 남았지만 대화에 포함된 맥락이 사라져 성능이 일시적으로 저하됐다. - 반복 업무에서는 규칙뿐 아니라 맥락과 사례를 보존하는 것도 중요하다는 점을 보여준다. ## MCP와 스킬을 이용한 GA 리포트 자동화 - 기존에는 구글 애널리틱스(GA) 데이터를 확인하고 여러 대시보드를 만들어 인사이트를 도출하는 과정이 번거로웠다. - GA MCP를 통해 API로 데이터를 가져오고, 스킬로 월간 리포트 형식을 유지했다. - 지난달과 이번 달의 차이를 비교해 변화가 의미 있는지 판단하는 방식으로 리포트가 개선됐다. - MCP는 데이터를 가져오는 통로이고, 스킬은 반복되는 리포트 구조를 유지하는 장치다. - 중요한 것은 단순히 숫자를 요약하는 것이 아니라 다음을 판단하는 것이다. - 어떤 변화가 발생했는가 - 그 변화가 설명할 가치가 있는가 - 추가 조사가 필요한 신호인가 - AI의 분석 결과에 사용자의 업무 맥락을 결합하면 이전에는 발견하기 어려웠던 변화를 준실시간으로 탐지할 수 있다. ## 개발의 경계가 넓어지는 방식 - 변화의 본질은 AI 도구의 개수가 늘어난 것이 아니라, 기존 업무를 다른 구조로 바라보게 된 데 있다. - AI가 만든 결과물 자체보다 AI가 수행할 수 있도록 업무를 설명하는 방식이 중요해졌다. - 앞으로 더 많은 사람이 다음 요소를 일상적으로 고민하게 될 것으로 전망한다. - 입력과 출력 - 권한과 보안 - 반복 작업과 파이프라인 - 완료 조건과 검증 방법 - 이는 모든 사람이 전통적인 개발자가 된다는 뜻은 아니다. - 다만 비개발자의 업무도 점차 쪼개지고, 자동화되고, 실행 가능한 형태로 재정의될 수 있다. AI 에이전트를 효과적으로 활용하려면 “무엇을 만들어 달라”보다 “입력은 무엇이고, 결과는 어떤 형식이어야 하며, 실패와 보안 문제를 어떻게 처리할지”를 구체적으로 정의하는 것이 좋다. 반복되는 수정과 판단을 스킬이나 문서로 축적하고, 민감정보와 작업 맥락을 안전하게 관리하는 습관을 함께 갖추는 것이 실용적인 출발점이다.

figma

몇 초 만에 디자인에 실제 콘텐츠 (새 탭에서 열림)

실제 콘텐츠를 활용하면 목업이 실제 제품에서 어떻게 보일지 더 정확히 검증하고, 긴 텍스트나 다양한 데이터로 UI를 스트레스 테스트할 수 있다. 글은 Figma에서 이름·주소·이미지·지도 등을 자동으로 채워 주는 플러그인들을 소개하며, 반복적인 수동 입력을 줄이는 방법을 설명한다. 민감한 사내 데이터가 필요하다면 조직 전용 비공개 플러그인을 활용할 수도 있다. ## 실제 데이터로 디자인해야 하는 이유 - Lorem Ipsum 같은 placeholder는 실제 콘텐츠의 길이와 형식을 충분히 반영하지 못한다. - 이름, 전화번호, 주소, 이미지, 지도 등 현실적인 데이터를 넣으면 다음을 검증할 수 있다. - 긴 텍스트가 레이아웃을 깨뜨리는지 - 다양한 데이터 형식이 UI에 적합한지 - 실제 서비스 화면과 목업의 차이가 큰지 - 복잡한 문서의 여러 텍스트 레이어를 수동으로 채우는 작업을 자동화할 수 있다. ## Google Sheets Sync - Google Sheets의 데이터를 Figma 레이어와 연결해 일괄 입력한다. - 사용 방법: - 공유 가능한 Google Sheets를 만든다. - 데이터 종류별로 열을 만들고, 각 열에 고유한 헤더를 지정한다. - Figma 레이어 이름을 `#Name`, `#Address`처럼 `#`과 열 헤더 조합으로 지정한다. - 플러그인에 시트 URL을 입력하고 **Fetch & sync**를 실행한다. - 스프레드시트의 수식과 편집 기능을 그대로 활용할 수 있어 데이터 수정과 재동기화가 편리하다. - 이미지 URL이 들어 있는 열도 지원하며, 해당 레이어에 이미지 채우기로 적용할 수 있다. ## Unsplash - Unsplash의 고해상도 사진을 Figma 캔버스에 삽입한다. - 카테고리 선택, 무작위 이미지 선택, 직접 검색을 지원한다. - 이미지를 새 요소로 삽입하거나, 미리 선택한 요소에 이미지 채우기로 적용할 수 있다. - 개인 및 상업적 용도로 사용할 수 있는 대규모 무료 사진 라이브러리를 활용할 수 있다. ## Data Lab - 변수 조합 방식으로 텍스트 콘텐츠를 생성한다. - 이름, 숫자, 날짜, 전화번호, 이메일, 목록 등의 데이터 형식을 제공한다. - 예를 들어 `{NAME} · {EMAIL}`처럼 변수를 조합해 이름과 이메일을 한 문자열로 만들 수 있다. - 단순한 형식으로 다양한 텍스트 샘플을 빠르게 생성할 수 있다. ## Content Reel - 이름, 전화번호, 미국 주소, 숫자, 이메일, URL, 회사명, 사용자명, 국가 등의 텍스트 데이터를 제공한다. - 주소 같은 데이터 형식은 드래그 앤 드롭으로 구성 요소와 순서를 바꿀 수 있다. - 쉼표 배치까지 조정할 수 있어 원하는 데이터 포맷을 만들기 쉽다. - Segoe MDL2 아이콘 라이브러리도 제공하지만, 사용하려면 Segoe 아이콘 폰트를 설치해야 한다. - 작업 중 패널을 작게 접어 둘 수 있는 compact mode를 지원한다. - 당시에는 사용자 프로필 이미지 같은 이미지 기반 콘텐츠 지원도 예정되어 있었다. ## Mapsicle - Mapbox 지도를 Figma 요소의 이미지 채우기로 삽입한다. - 지도 스타일, 확대 수준, 카메라 기울기와 회전을 설정할 수 있다. - 기본적으로 Light, Dark, Satellite, Streets 등의 테마를 제공한다. - Mapbox 액세스 토큰을 사용하면 직접 만든 사용자 정의 지도 테마도 적용할 수 있다. - 기존 지도의 크기를 바꿀 때 **Refresh selected map**을 사용하면 기존 확대 수준을 유지하면서 새 크기에 맞게 갱신할 수 있다. - 지도를 작은 프레임 안에 넣고 프로토타입의 오버플로를 가로·세로 스크롤로 설정하면 양방향 지도 탐색을 구현할 수 있다. ## 사내 데이터와 비공개 플러그인 - 실제 서비스의 민감한 데이터나 내부 API를 활용해야 하는 경우 공개 플러그인보다 자체 플러그인이 적합하다. - Figma Organization 요금제 사용자는 회사 전용 비공개 플러그인을 만들고 배포할 수 있다. - 이를 통해 외부에 데이터를 노출하지 않고 실제 애플리케이션 데이터를 디자인 검증에 활용할 수 있다. 실무에서는 Google Sheets Sync로 구조화된 데이터를 반복 주입하고, Unsplash·Mapsicle로 이미지와 지도를 보완하면 빠르게 현실적인 목업을 만들 수 있다. 데이터가 민감하거나 서비스 API와 직접 연동해야 한다면 조직 전용 비공개 플러그인을 고려하는 것이 좋다.