DEV Community: 이종현

네이버 지도 숙소 사진을 큰 갤러리로 전환해 침구·객실 크기 비교하는 법

이종현 — Mon, 31 Aug 2026 00:41:38 +0000

여행 전 숙소를 고를 때 가장 믿기 어려운 것이 대표 사진이다. 광각 렌즈로 넓어 보이게 찍은 객실, 리넨을 새로 깔아 놓은 침대, 실제 입실 후 만나는 공간과 다를 때가 많다. 네이버 지도의 방문자 리뷰 사진은 그 대표 사진보다 훨씬 솔직하지만, 기본 UI의 작은 썸네일을 하나씩 클릭해 넘겨야 한다. 이 글은 그 번거로움을 없애는 정확한 방법을 다룬다. 네이버 와이드 갤러리 확장 프로그램을 이용해 숙소의 실제 침구 상태와 객실 크기를 고해상도 전체화면 그리드로 전환하고, 안전하게 비교 탐색하는 과정을 단계별로 설명한다.

광고용 보정 사진 너머의 진짜 숙소 리뷰 사진을 어떻게 찾을까?

네이버 지도에서 숙소를 검색하면 플레이스 상단에 업체가 직접 올린 대표 사진이 먼저 뜬다. 이 사진들은 대부분 전문 촬영본이다. 객실이 실제보다 넓어 보이도록 초광각으로 구성하거나, 조명과 후보정을 거쳐 침구 색감을 실제와 다르게 표현하는 경우가 흔하다.

방문자 리뷰 사진은 다르다. 실제 투숙객이 스마트폰으로 찍은 사진이라 조명도 제각각이고, 침구 구겨짐이나 욕실 타일 상태도 그대로 담긴다. 네이버 플레이스에서 이 사진에 접근하는 경로는 하나다.

네이버 지도에서 숙소 이름을 검색한다.
플레이스 패널에서 사진 탭을 누른다.
상단 필터에서 방문자 포토를 선택한다.

여기까지 오면 업체 제공 사진이 걸러지고 실제 투숙객 사진만 남는다. 문제는 그다음이다. 기본 레이아웃은 작은 썸네일 그리드이고, 각 사진을 개별 클릭해야 원본 크기로 볼 수 있다. 사진이 수십 장이면 클릭 횟수가 그만큼 늘어난다. 침구 상태를 여러 사진에서 가로로 나란히 놓고 비교하기가 구조적으로 어렵다.

네이버 플레이스 방문자 포토 리뷰를 전체화면 그리드로 가득 채우는 방법

네이버 와이드 갤러리는 이 문제를 단 하나의 동작으로 해결한다. 크롬 확장 프로그램으로, 사진 탭에서 초록색 버튼 하나를 누르면 현재 열려 있는 사진 목록 전체가 전체화면 갤러리로 전환된다.

전환 직후 화면에는 썸네일이 아닌 큰 그리드가 채워진다. 그리드 크기는 사용자가 조절할 수 있어, 사진 한 장을 화면 절반 이상 차지하도록 키우거나, 반대로 작게 줄여 여러 장을 동시에 놓고 볼 수 있다.

키보드만으로 사진 탐색하는 구체적인 조작 방법

마우스 없이 빠르게 훑고 싶다면 키보드로 충분하다.

키	동작
`←` / `→`	이전 / 다음 사진으로 이동
`↑` / `↓`	그리드 위 / 아래 행으로 이동
`Enter`	선택한 사진 상세 보기
`Esc`	상세 보기 닫기 또는 갤러리 종료
`Alt+Shift+F`	전체화면 갤러리 즉시 실행

침구 사진만 골라 확인하고 싶다면, 갤러리를 실행한 뒤 방향키로 사진을 빠르게 훑으면서 관심 있는 사진에서 Enter로 상세 보기, Esc로 복귀하는 패턴으로 진행한다. 무한 스크롤로 내려가며 썸네일을 하나씩 클릭하는 것보다 훨씬 적은 손동작이 든다.

테마 설정으로 가독성 조절하기

확장 프로그램은 7가지 테마를 지원한다. 사진 색감 판단에는 어두운 배경 테마가 유리하다. 밝은 침구 색상이나 화이트 벽 타일의 실제 색을 UI 배경색의 간섭 없이 확인할 수 있다.

동영상 포맷까지 지원하는 갤러리가 숙소 탐색에 유리한 이유는?

최근 네이버 플레이스 리뷰에는 사진뿐 아니라 짧은 동영상 클립도 올라온다. 투숙객이 찍은 10-30초 분량의 영상이 섞여 있는 경우, 기본 뷰어에서는 사진과 동영상이 분리되거나 재생 전환이 매끄럽지 않을 수 있다.

네이버 와이드 갤러리는 동영상 포맷을 같은 그리드 내에서 인라인으로 지원한다. 사진에서 동영상으로 넘어갈 때 별도 재생기로 이동하지 않고, 같은 전체화면 레이아웃 안에서 재생된다. 실제 객실 공간감을 파악할 때 동영상 한 클립이 사진 열 장보다 정보량이 많다. 침대 크기와 창문 위치를 동시에 확인하거나, 욕실 공간의 실제 동선을 파악하는 데 360도 영상이 아닌 일반 촬영 클립도 충분히 도움이 된다.

어떠한 외부 트래픽이나 쿠키 정보도 수집하지 않는다는 것을 어떻게 확인할까?

브라우저 확장 프로그램은 설치한 뒤 잊어버리는 경우가 많다. 그래서 어떤 데이터를 읽고 어디로 전송하는지 파악하기 어렵다. 숙소 탐색 과정에서는 검색 키워드, 클릭 패턴, 위치 정보 등 민감한 행동 데이터가 브라우저에 쌓인다.

네이버 와이드 갤러리의 프라이버시 원칙은 세 가지로 명확하다.

네이버 지도 외 다른 사이트에 접근하지 않는다.
사용자 행동 데이터를 수집하지 않는다.
외부 서버로 어떠한 정보도 전송하지 않는다.

확장 프로그램이 이 원칙을 지키는지 직접 확인하려면, 크롬의 확장 프로그램 관리 페이지에서 해당 확장의 권한 항목을 열어보면 된다. 요청된 권한 목록에 '모든 사이트의 데이터 읽기'나 '쿠키' 접근이 포함되어 있지 않아야 한다. 네이버 와이드 갤러리는 네이버 지도 도메인에서만 동작하도록 권한을 최소로 제한한다.

여러 숙소를 탭으로 열어 비교하는 방법

펜션 두 곳을 나란히 비교할 때는 각 숙소를 별도 탭에 열어 놓고, 탭을 전환하며 갤러리를 각각 실행하는 방식이 실용적이다.

비교 항목	기본 네이버 지도 UI	와이드 갤러리 사용 시
리뷰 사진 크기	작은 썸네일	그리드 크기 조절 가능
사진 간 이동	개별 클릭	키보드 방향키
동영상 재생	별도 뷰어 전환	갤러리 내 인라인
여러 장 동시 비교	불가	그리드로 동시 표시
데이터 전송	네이버 서버만	외부 전송 없음

자주 묻는 질문

확장 프로그램 설치 없이 네이버 지도 사진을 크게 볼 수 있나?

기본 UI에서도 사진을 클릭하면 원본 크기로 볼 수 있다. 다만 한 번에 한 장씩만 확인할 수 있고, 키보드 탐색이나 그리드 비교는 지원하지 않는다. 여러 숙소의 침구 상태를 빠르게 비교하려면 확장 프로그램 방식이 현실적이다.

방문자 포토 리뷰 필터는 어디서 설정하나?

네이버 지도에서 숙소 플레이스를 연 뒤 사진 탭으로 이동하면 상단에 필터 옵션이 있다. 여기서 '방문자 포토'를 선택하면 업체 제공 사진이 제외되고 실제 투숙객 사진만 표시된다. 와이드 갤러리 실행 전 이 필터를 먼저 적용하면 리뷰 사진만 갤러리로 전환된다.

펜션과 일반 숙소 모두 같은 방식으로 비교할 수 있나?

네이버 플레이스에 등록된 숙소라면 펜션, 모텔, 호텔, 게스트하우스 구분 없이 같은 방법으로 사진 탭에 접근할 수 있다. 와이드 갤러리도 플레이스 사진 탭이 열려 있다면 동일하게 작동한다.

갤러리 실행 중 테마는 언제든 바꿀 수 있나?

갤러리를 닫지 않고도 테마 전환이 가능하다. 사진 색감을 정확히 보려면 어두운 배경 테마, 전반적인 분위기 파악에는 밝은 테마가 각각 유리하다. 투숙객 사진의 실제 색을 평가할 때는 UI 배경이 흰색이면 색 판단에 영향을 줄 수 있으므로 어두운 테마를 권장한다.

모바일 네이버 지도에서도 같은 방법이 통하나?

브라우저 확장 프로그램은 데스크톱 크롬 기반 브라우저에서만 작동한다. 모바일 네이버 지도 앱에서는 확장 프로그램 자체가 설치되지 않으므로, 이 방법은 PC 환경 전용이다.

여행 전 숙소 사진 비교는 마케팅 사진이 아닌 방문자 포토 리뷰에서 시작한다. 네이버 지도 사진 탭에서 방문자 포토 필터를 켜고, Alt+Shift+F로 와이드 갤러리를 실행하면 작은 썸네일 무한 스크롤 대신 큰 그리드와 키보드 탐색으로 침구 상태와 객실 실제 크기를 왜곡 없이 확인할 수 있다. 외부 데이터 전송 없이 네이버 지도 안에서만 작동하므로, 숙소 탐색 과정의 개인정보도 그대로 보호된다. 숙소 분위기를 왜곡 없이 크게 비교하러 가기

수학 노베이스도 AI 신경망 프로토타입을 직접 구현하는 법

이종현 — Mon, 31 Aug 2026 00:37:51 +0000

수학을 포기했다고 AI 취업을 포기할 필요는 없다. 모두의AI의 챕터별 실전 문제를 순서대로 밟으면, 수식이 낯선 상태에서 출발해도 작동하는 신경망 프로토타입을 손으로 짜는 단계까지 도달할 수 있다. 지름길이 있다는 뜻이 아니다. 개념을 이해하고, 코드로 확인하고, 피드백을 받는 과정을 반복하면 수학이 '공부 대상'이 아니라 '사용하는 도구'로 바뀐다는 뜻이다.

수학 노베이스의 AI 커리어 전환 장벽은 무엇인가?

AI 학습을 처음 시도하는 사람들이 가장 먼저 만나는 벽은 교재 첫 장의 수식이다. 편미분, 행렬, 확률분포라는 단어가 등장하는 순간, "나는 수포자니까 못 하겠다"는 판단이 아주 빠르게 내려진다.

그런데 그 판단은 일부만 맞다. 수식 자체가 문제라기보다, 수식이 왜 등장하는지 맥락 없이 던져지는 방식이 문제다. 예를 들어 경사하강법(gradient descent, 신경망이 오류를 줄여나가는 핵심 알고리즘)을 설명할 때 미분 공식을 먼저 보여주는 교재가 많다. 그러나 "값이 틀렸을 때 어느 방향으로 얼마나 수정하면 되는가"라는 질문에서 출발하면, 같은 개념이 훨씬 쉽게 들어온다.

AI 취업 준비에서 수학 노베이스가 실제로 겪는 장벽은 두 가지로 나뉜다.

개념 단절: 선형대수와 확률을 AI와 따로 배워서, 모델 안에서 어떻게 쓰이는지 연결이 안 된다.
피드백 공백: 수식을 외웠는지 확인할 방법이 없어서, 틀려도 모르고 넘어간다.

모두의AI의 접근법은 이 두 문제를 역방향으로 푼다. 먼저 작동하는 코드를 보여준 뒤, 그 코드 안의 숫자가 어떻게 움직이는지 설명하는 방식이다. 수학이 먼저가 아니라, 맥락이 먼저다.

모두의AI 챕터 기반 4단계 AI 기초 수학 학습 순서

챕터 순서를 임의로 건너뛰면 개념 사이의 연결이 끊어진다. 아래 표는 각 단계에서 다루는 수학 개념과 그것이 AI 구현에서 하는 역할을 정리한 것이다. 학습 성과를 보장하는 수치가 아니라, 개념이 쌓이는 논리적 순서를 보여주는 예시 구조다.

단계	핵심 수학 개념	AI 구현에서의 역할
1단계	함수, 변수, 방정식	입력과 출력의 관계를 코드로 표현하는 기반
2단계	벡터, 행렬, 내적	데이터를 묶어서 한 번에 계산하는 구조
3단계	미분, 기울기	신경망이 오류 방향을 파악하는 원리
4단계	확률, 손실함수	모델이 '얼마나 틀렸는지'를 측정하는 언어

각 단계는 독립된 챕터가 아니라 이전 개념 위에 쌓인다. 1단계의 변수 개념이 없으면 2단계의 행렬을 코드로 옮길 때 막힌다. 2단계를 건너뛰면 3단계 미분을 계산할 대상이 무엇인지 알 수가 없다. 순서 자체가 교육 설계의 핵심이다.

실전 파이썬 예제로 이론 피드백을 받는 방법은?

수학 개념을 이해했는지 확인하는 가장 빠른 방법은 코드를 실행하는 것이다. 숫자가 예상대로 나오면 개념이 맞다. 다른 숫자가 나오면 어디서 틀렸는지 역추적할 수 있다.

아래는 2단계 개념인 행렬 내적을 파이썬으로 확인하는 예시다. 신경망의 가중치 계산이 이 구조를 그대로 쓴다.

import numpy as np

# 입력 데이터 (3개의 특성을 가진 샘플 1개)
x = np.array([1.0, 2.0, 3.0])

# 가중치 (각 특성에 곱해지는 값)
w = np.array([0.5, -0.3, 0.8])

# 내적: 입력과 가중치의 합산 계산
output = np.dot(x, w)
print(f"출력값: {output}")
# 출력값: 2.3

코드를 실행하면 2.3이 나온다. 이 숫자가 어떻게 만들어졌는지 직접 계산해보면 (1.0 × 0.5) + (2.0 × -0.3) + (3.0 × 0.8) = 0.5 - 0.6 + 2.4 = 2.3이 된다. 수식을 외우지 않아도 코드 결과와 손 계산을 비교하는 순간 내적이 무엇인지 체감으로 이해된다.

모두의AI의 챕터별 실전 문제는 바로 이 구조를 따른다. 개념 설명 직후에 실행 가능한 예제가 나오고, 예제를 조금 바꿔보면서 숫자가 어떻게 달라지는지 확인한다. 이 피드백 루프가 수학 노베이스에게 필요한 핵심 구조다.

수를 외우는 공부와 숫자를 조작하는 공부는 다르다. 전자는 시험이 끝나면 잊히고, 후자는 다음 챕터에서 도구로 쓰인다.

포트폴리오를 채우는 딥러닝 미니 신경망 구현 연습과 검증

4단계 개념이 쌓이면 실제로 학습하는 신경망을 처음부터 짤 수 있다. 라이브러리가 대신 해주는 것이 아니라, 행렬 계산과 미분 업데이트를 코드로 직접 작성하는 경험이다. 이 결과물이 포트폴리오에 올릴 수 있는 첫 번째 AI 구현이 된다.

아래는 입력층, 은닉층, 출력층을 갖춘 미니 신경망의 순전파(forward pass, 입력 데이터가 출력까지 흘러가는 과정)를 구현한 예시다.

import numpy as np

def sigmoid(z):
    return 1 / (1 + np.exp(-z))

# 입력: 2개의 특성
x = np.array([0.5, 0.8])

# 은닉층 가중치 (2입력 → 3노드)
W1 = np.array([[0.2, 0.4, -0.1],
               [0.3, -0.2, 0.5]])
b1 = np.array([0.1, 0.0, -0.1])

# 출력층 가중치 (3노드 → 1출력)
W2 = np.array([[0.6], [-0.3], [0.4]])
b2 = np.array([0.05])

# 순전파 계산
z1 = np.dot(x, W1) + b1
a1 = sigmoid(z1)

z2 = np.dot(a1, W2) + b2
a2 = sigmoid(z2)

print(f"은닉층 출력: {a1.round(3)}")
print(f"최종 예측값: {a2[0]:.4f}")

이 코드가 실행되면 신경망이 입력을 받아 예측값을 내놓는 전 과정이 눈에 보인다. 여기서 가중치를 바꾸면 예측값이 달라진다. 학습이란 이 가중치를 자동으로 조정하는 과정임을 체감할 수 있다.

검증 단계에서 확인해야 할 것은 두 가지다.

손실값(loss)이 학습 반복마다 감소하는가: 감소하지 않으면 학습률이나 초기 가중치를 확인한다.
예측 방향이 실제 레이블과 일치하는가: 1에 가까운 예측이 실제 양성 샘플에 붙는지 확인한다.

이 두 검증을 통과한 코드가 GitHub에 올라가면, "수학 개념을 이해하고 구현까지 해봤다"는 증거가 된다. AI 직무 면접에서 이론 질문을 받았을 때, 직접 짠 코드를 기반으로 설명하는 것과 개념만 암기해서 말하는 것은 설득력이 다르다.

자주 묻는 질문

수학을 전혀 모르는 상태에서 시작해도 신경망 구현까지 도달할 수 있나요?

가능하다. 단, 챕터 순서를 지켜야 한다. 함수와 변수 개념에서 출발해 미분까지 단계적으로 쌓으면, 신경망 코드 안의 모든 숫자가 어디서 왔는지 설명할 수 있게 된다. 순서를 건너뛰면 특정 지점에서 막히고, 그 막힘이 자신감 저하로 이어진다.

파이썬을 전혀 못해도 이 학습 순서를 따를 수 있나요?

파이썬 기초(변수, 반복문, 함수)는 수학 학습과 병행해도 되고, 1단계 챕터를 시작하기 전에 간단히 훑어도 된다. 신경망 코드를 짤 때 필요한 파이썬 수준은 NumPy 배열 조작과 함수 정의 정도다. 복잡한 문법은 필요하지 않다.

모두의AI 기초 코스와 다른 무료 강의의 차이는 무엇인가요?

대부분의 무료 강의는 개념 설명과 코드 실습이 분리되어 있다. 이론 강의를 듣고, 따로 코딩을 연습하는 구조다. 모두의AI는 챕터 안에서 개념 설명 직후 실전 문제가 이어지고, 코드를 실행한 결과로 개념 이해를 즉시 확인한다. 피드백 루프가 챕터 안에 내장된 구조다.

취업 포트폴리오에 미니 신경망 구현 코드가 실제로 의미 있나요?

의미 있다. 특히 라이브러리 없이 NumPy만으로 순전파와 역전파를 직접 구현한 코드는, 지원자가 블랙박스를 이해하고 있다는 신호다. 면접관이 "이 코드의 이 부분은 왜 이렇게 작성했나요?"라고 물었을 때, 구체적으로 대답할 수 있는 구현 경험이 중요하다.

신경망 프로토타입 완성 후 다음 단계는 무엇인가요?

미니 신경망을 실제 데이터셋(예: scikit-learn의 공개 데이터)에 적용해 성능을 측정하는 것이 자연스러운 다음 단계다. 이후 PyTorch나 TensorFlow 같은 딥러닝 프레임워크로 같은 구조를 다시 구현하면, 라이브러리가 내부에서 무엇을 하는지 정확히 알면서 쓸 수 있게 된다.

수학이 막막하게 느껴지는 이유는 대부분 순서 문제다. 맥락 없이 수식을 먼저 만나면 누구든 막힌다. 모두의AI의 챕터별 실전 문제는 개념, 코드, 피드백을 한 단위로 묶어서, 수학 노베이스가 작동하는 신경망 프로토타입까지 한 걸음씩 도달하도록 설계되어 있다. 체계적인 실전 문제 풀이로 시작하는 모두의AI 무료 기초 코스에서 첫 챕터를 열어보자.

더 보기: https://minion.toss.im/ji64g3G8

AI 코딩 도구와 함께 쓰기 좋은 크롬 확장 프로그램, 로컬 캡처로 프롬프트를 바로 만드는 법

이종현 — Thu, 27 Aug 2026 01:10:18 +0000

Cursor나 Claude에 화면 맥락을 전달할 때 가장 번거로운 부분은 타이핑이다. UI 상태를 글로 옮기고, 에러 메시지를 복사하고, "이 버튼 말인데요…"를 설명하는 시간이 정작 코딩 시간보다 길어질 때가 있다. PromptShot은 영역을 드래그해 캡처하면 LLM용 프롬프트 텍스트와 PNG 이미지를 클립보드에 한 번에 복사해주는 크롬 확장 프로그램이다. 처리는 전부 브라우저 안에서 끝나고, 페이지 내용은 외부로 나가지 않는다.

로컬 브라우저 보안과 프라이버시를 지키는 개발 도구 조건

크롬 확장 프로그램을 회사 개발 환경에 추가할 때 가장 먼저 따져야 할 기준은 데이터가 어디로 가는지다. 스크린샷을 외부 서버로 업로드한 뒤 OCR이나 AI 분석을 거치는 구조라면, 내부 코드베이스나 미공개 디자인이 제3자 서버에 남는다.

PromptShot은 캡처, 프롬프트 생성, 클립보드 복사까지 모든 단계가 브라우저 로컬에서 처리된다. 크롬의 chrome.tabs.captureVisibleTab API는 현재 탭을 캡처하되 결과를 로컬 메모리에만 보관하며, 네트워크 요청을 발생시키지 않는다. 확장 프로그램이 외부 서버와 통신하는지 확인하는 방법은 간단하다.

크롬 개발자 도구(DevTools) → Network 탭을 열어놓고 캡처를 실행해보면 된다. 아무 외부 요청도 잡히지 않는다면 로컬 처리로 동작하는 것이다. PromptShot을 같은 방식으로 검사해보면 캡처 시점에 외부로 나가는 요청이 없다는 걸 직접 확인할 수 있다.

보안 기준을 정리하면 이렇다.

항목	로컬 처리 도구	서버 업로드 도구
데이터 경로	브라우저 메모리 내	외부 서버 전송
내부 코드 노출 위험	없음	있음
오프라인 사용 가능	가능	불가능
기업 보안 정책 충족	대체로 가능	별도 검토 필요
처리 속도	즉각적	네트워크 지연 발생

캡처 후 결과를 클라우드에 저장하거나 히스토리를 서버에 쌓는 기능 자체가 보안 위험이 될 수 있다. 개발 흐름에 필요한 건 "지금 이 화면을 LLM에 설명하는 텍스트를 클립보드에 넣어주는 것"이지, 캡처 기록을 어딘가에 저장하는 게 아니다.

텍스트 타이핑을 없애주는 영역 캡처 기반 확장 프로그램 작동 메커니즘

영역 캡처가 프롬프트 생성과 어떻게 연결되는지 이해하면, 왜 이게 단순 스크린샷 도구와 다른지 명확해진다.

PromptShot의 작동 순서는 다음과 같다.

Alt+Shift+S를 누르면 캡처 오버레이가 활성화된다. 전체 화면이 반투명하게 덮이고 커서가 크로스헤어로 바뀐다.
캡처할 영역을 드래그해 선택한다. 에러 메시지 박스만, 특정 컴포넌트만, 또는 전체 뷰포트를 선택할 수 있다.
선택이 완료되는 순간, PNG 이미지와 함께 해당 영역에 대한 LLM 프롬프트 맥락 텍스트가 클립보드에 복사된다.
Cursor나 Claude, ChatGPT 입력창에 붙여넣기(Ctrl+V)하면 이미지와 텍스트가 함께 들어간다.

단축키 체계도 명확하다. Alt+1은 PNG만 복사, Alt+2는 프롬프트 텍스트만 복사. LLM이 이미지를 지원하지 않는 경우에는 Alt+2로 텍스트 설명만 가져다 쓰면 된다.

텍스트로 UI 상태를 설명하는 방식과 이미지를 직접 전달하는 방식의 차이는 AI 코딩 프롬프트에서 텍스트 설명 대신 시각 맥락을 주입하는 법에서 자세히 다룬다. 핵심은 "버튼이 비활성화되어 있어요"라는 문장보다 비활성화된 버튼이 실제로 찍힌 이미지가 LLM에게 훨씬 명확한 정보를 준다는 것이다.

영역을 좁게 잡을수록 LLM이 집중해야 할 부분이 명확해진다. 전체 페이지 스크린샷을 넘기는 것보다 문제가 발생한 컴포넌트만 잘라서 넘기면, 맥락 창 낭비도 줄고 응답 품질도 올라간다. 특히 복잡한 대시보드에서 특정 차트나 폼 요소 하나만 짚어야 할 때 영역 선택의 가치가 두드러진다.

코드 에디터와 매끄럽게 흐름을 잇는 클립보드 활용법

클립보드를 허브로 쓰는 게 이 워크플로우의 핵심이다. 별도의 파일 저장, 첨부 파일 업로드, 드래그 앤 드롭 없이 캡처 → 붙여넣기 → 다음 프롬프트로 이어진다.

Cursor에서 쓰는 경우를 예로 들면 이렇다. Cursor의 채팅 입력창은 이미지 붙여넣기를 지원한다. PromptShot으로 캡처한 뒤 Cursor 채팅창에서 Ctrl+V를 누르면 이미지가 바로 들어간다. 텍스트 프롬프트 맥락도 함께 붙여넣을 수 있어서, "이 컴포넌트의 스타일이 왜 깨지는지 분석해줘"라고 한 줄 추가하면 된다.

Claude.ai나 ChatGPT 웹 인터페이스에서도 동일하다. 이미지 첨부 버튼을 찾거나 파일을 드래그할 필요 없이 Ctrl+V 한 번으로 끝난다.

GitHub Copilot Chat처럼 텍스트 전용 컨텍스트를 쓰는 환경에서는 Alt+2로 프롬프트 텍스트만 복사해서 붙여넣으면 된다. 확장 프로그램이 자동으로 캡처 영역의 위치 정보와 추정 UI 컨텍스트를 텍스트 형태로 만들어주기 때문에, 직접 설명을 타이핑할 필요가 없다.

코딩 루프에서 이 도구가 가장 빛나는 순간은 버그 리포트를 작성할 때다. 재현 화면을 캡처하고, 에러가 발생한 UI 영역만 선택한 뒤, Jira나 Linear 이슈 입력창에 바로 붙여넣는다. 펜이나 화살표로 주석을 달 수 있는 주석 기능을 쓰면 "저 빨간 버튼 말고 그 옆에 있는 거요"라는 설명도 필요 없어진다.

디자인 핸드오프 상황에서도 비슷하게 쓸 수 있다. 피그마 없이도 브라우저에서 구현 중인 컴포넌트를 영역 캡처해 슬랙 스레드에 붙여넣으면, "이 패딩이 스펙이랑 다른 것 같아요"라는 커뮤니케이션이 훨씬 정확해진다.

한 가지 짚어둘 점은, 클립보드 기반 워크플로우는 캡처 직후 바로 붙여넣어야 한다는 전제가 있다. 클립보드는 덮어쓰이기 때문에 다른 복사 작업을 하면 캡처 내용이 사라진다. 여러 영역을 순서대로 캡처해 비교해야 한다면, 각 캡처 직후 바로 붙여넣는 루프로 쓰는 게 자연스럽다.

자주 묻는 질문

PromptShot은 캡처한 이미지를 어디에 저장하나요?

저장하지 않는다. 캡처 결과는 브라우저 메모리에 잠깐 올라왔다가 클립보드에 복사되면 사라진다. 로컬 파일로 저장되거나 외부 서버로 전송되지 않기 때문에, 캡처 히스토리가 남는 서비스와 달리 민감한 화면을 캡처해도 데이터가 남지 않는다.

이미지를 지원하지 않는 LLM 환경에서도 쓸 수 있나요?

쓸 수 있다. Alt+2를 누르면 PNG 없이 텍스트 프롬프트 맥락만 클립보드에 복사된다. GitHub Copilot Chat이나 텍스트 전용 터미널 기반 도구처럼 이미지 입력이 안 되는 환경에서 UI 맥락을 텍스트로 전달할 때 그대로 활용할 수 있다.

Alt+Shift+S 단축키가 다른 확장 프로그램과 충돌하면 어떻게 하나요?

크롬 확장 프로그램 단축키는 chrome://extensions/shortcuts에서 사용자가 직접 변경할 수 있다. 이 페이지에서 PromptShot의 단축키를 원하는 키 조합으로 바꾸면 충돌을 피할 수 있다.

전체 화면이 아니라 특정 영역만 캡처하는 게 왜 더 나은가요?

LLM의 맥락 창 효율 때문이다. 전체 페이지 스크린샷을 넣으면 LLM이 처리해야 할 이미지 정보량이 많아지고, 정작 집중해야 할 컴포넌트가 묻힐 수 있다. 문제가 있는 영역만 잘라서 전달하면 응답이 더 정확해지고 토큰도 아낀다.

회사 보안 정책상 크롬 확장 프로그램 설치에 제한이 있는데, PromptShot은 어떤 권한을 요청하나요?

현재 탭의 화면 캡처 권한(activeTab, tabs)과 클립보드 쓰기 권한만 요청한다. 파일 시스템 접근, 원격 서버 통신, 기타 탭 내용 읽기 권한은 포함되지 않는다. 크롬 웹스토어의 확장 프로그램 상세 페이지에서 요청 권한 목록을 직접 확인할 수 있다.

코딩 루프에서 컨텍스트를 타이핑하는 시간을 줄이는 방법은 여러 가지가 있지만, 로컬 처리라는 조건을 동시에 만족하는 도구는 드물다. PromptShot은 영역 드래그 하나로 캡처, 프롬프트 생성, 클립보드 복사까지 끝내면서, 캡처한 화면 데이터가 브라우저 밖으로 나가지 않는다는 점에서 개발 환경의 보안 요건을 갖추면서도 빠른 흐름을 유지하려는 개발자에게 실질적인 선택지가 된다. 크롬에 추가하고, 다음 버그 리포트나 Cursor 프롬프트에서 Alt+Shift+S를 한 번 눌러보자.

수작업 미분 대신 역전파(Backpropagation) 코드로 완성하는 신경망 최적화 원리

이종현 — Thu, 27 Aug 2026 00:51:32 +0000

딥러닝을 공부하다 보면 미적분이 벽처럼 느껴지는 순간이 옵니다. 편미분, 연쇄 법칙, 기울기 계산. 수식만 보면 막막하지요. 그런데 실제로 신경망이 학습하는 원리는 이렇습니다. 오차를 측정하고, 그 오차를 줄이는 방향으로 가중치를 조금씩 움직이는 것. 이 글은 그 메커니즘을 NumPy 역전파 함수로 직접 구현하면서, 수식이 코드 안에서 어떻게 살아 움직이는지 확인합니다.

경사하강법과 미적분: 딥러닝 모델이 스스로 최적의 가중치를 찾아 업데이트하는 메커니즘

경사하강법(Gradient Descent)은 오차 함수의 기울기를 따라 가중치를 조금씩 내려가는 알고리즘입니다. 미적분의 역할은 "지금 이 지점에서 어느 방향이 내리막인가"를 수치로 알려주는 것입니다.

손실 함수(Loss Function)를 L, 가중치를 w라 할 때, 업데이트 규칙은 다음과 같습니다.

w ← w - η × (∂L/∂w)

여기서 η(에타)는 학습률(Learning Rate)로, 한 번에 얼마나 크게 내려갈지를 결정합니다. 너무 크면 발산하고, 너무 작으면 학습이 느립니다. 이 숫자 하나가 모델 성능에 생각보다 큰 영향을 미칩니다.

핵심은 편미분값, 즉 기울기(Gradient)입니다. 기울기가 양수면 w를 줄이고, 음수면 w를 늘려서 손실이 작아지는 방향으로 이동합니다. 수식을 외울 필요는 없습니다. "내리막 방향으로 한 걸음"이라는 감각이 먼저입니다.

편미분과 연쇄 법칙(Chain Rule): 여러 신경망 계층을 거슬러 오차를 전달하는 흐름

신경망에는 계층(Layer)이 여러 개 있습니다. 출력층에서 계산한 오차를 입력층 방향으로 역으로 전달해야 각 가중치의 기울기를 구할 수 있습니다. 이 과정이 역전파(Backpropagation)입니다.

여기서 연쇄 법칙(Chain Rule)이 등장합니다. 합성 함수의 미분을 분해하는 규칙으로, 수식으로 쓰면 이렇습니다.

∂L/∂w = (∂L/∂y) × (∂y/∂w)

각 항의 의미를 풀어보면:

∂L/∂y : 출력값 y가 손실 L에 얼마나 영향을 주는지 (뒤에서 넘어온 기울기)
∂y/∂w : 가중치 w가 출력값 y에 얼마나 영향을 주는지 (현재 계층의 기울기)

이 두 값을 곱하면 "이 가중치가 최종 오차에 얼마나 책임이 있는가"가 나옵니다. 계층이 10개라도 이 곱셈을 순서대로 거슬러 올라가면 됩니다. 코드 관점에서는 각 계층이 순전파(Forward Pass) 때 계산한 중간 값을 저장해 두고, 역전파 때 꺼내 쓰는 구조입니다.

활성화 함수로 시그모이드(Sigmoid)를 쓴다면, 그 미분값은 σ(x) × (1 - σ(x))입니다. 이 값이 1보다 작기 때문에 계층을 많이 쌓을수록 기울기가 점점 작아지는 기울기 소실(Vanishing Gradient) 문제가 생깁니다. ReLU 같은 함수가 나온 이유 중 하나입니다.

어떤 손실 함수를 선택해야 역전파가 안정적으로 작동할까?

역전파의 안정성은 손실 함수 선택과 밀접합니다. 잘못 선택하면 기울기가 제대로 전달되지 않아 학습이 겉돌 수 있습니다.

상황	권장 손실 함수	출력층 활성화 함수	기울기 특성
이진 분류	Binary Cross-Entropy	Sigmoid	안정적, 포화 문제 적음
다중 분류	Categorical Cross-Entropy	Softmax	확률 합 = 1 보장
회귀	MSE (Mean Squared Error)	선형(없음)	이상치에 민감
회귀 (이상치 많음)	MAE 또는 Huber Loss	선형(없음)	기울기 폭발 억제

표에서 보듯, 분류 문제에 MSE를 쓰면 기울기 계산이 비효율적으로 됩니다. 손실 함수는 편의 선택이 아니라, 역전파 흐름 자체를 설계하는 결정입니다.

수식 너머의 실전 코드: NumPy로 오차 역전파 함수를 빌드하는 연습

수식을 코드로 바꾸는 연습이 이해를 굳힙니다. 아래는 1개의 은닉층을 가진 신경망을 NumPy만으로 구현하는 흐름입니다. 실제로 돌아가는 코드 구조를 단계별로 보겠습니다.

1단계: 순전파(Forward Pass) 정의

import numpy as np

def sigmoid(x):
    return 1 / (1 + np.exp(-x))

def forward(X, W1, b1, W2, b2):
    Z1 = X @ W1 + b1          # 은닉층 선형 변환
    A1 = sigmoid(Z1)           # 활성화
    Z2 = A1 @ W2 + b2          # 출력층 선형 변환
    A2 = sigmoid(Z2)           # 최종 출력 (이진 분류)
    cache = (X, Z1, A1, Z2, A2)
    return A2, cache

cache에 중간 값을 저장하는 것이 핵심입니다. 역전파 때 이 값들을 꺼내 기울기 계산에 씁니다.

2단계: 손실 함수 계산

def compute_loss(A2, Y):
    m = Y.shape[0]
    loss = -np.mean(Y * np.log(A2 + 1e-8) + (1 - Y) * np.log(1 - A2 + 1e-8))
    return loss

1e-8을 더하는 이유는 log(0) 오류를 막기 위해서입니다. 작은 디테일이지만 없으면 런타임 에러가 납니다.

3단계: 역전파(Backward Pass) 구현

def backward(cache, W2, Y, learning_rate=0.01):
    X, Z1, A1, Z2, A2 = cache
    m = Y.shape[0]

    # 출력층 기울기
    dZ2 = A2 - Y
    dW2 = (A1.T @ dZ2) / m
    db2 = np.mean(dZ2, axis=0)

    # 연쇄 법칙: 은닉층으로 기울기 전달
    dA1 = dZ2 @ W2.T
    dZ1 = dA1 * A1 * (1 - A1)   # 시그모이드 미분
    dW1 = (X.T @ dZ1) / m
    db1 = np.mean(dZ1, axis=0)

    return dW1, db1, dW2, db2

dA1 * A1 * (1 - A1) 부분이 연쇄 법칙의 실제 코드 표현입니다. 뒤에서 온 기울기(dA1)와 현재 계층의 미분(A1 * (1 - A1))을 곱합니다. 수식이 코드 한 줄로 압축됩니다.

4단계: 가중치 업데이트

def update(W1, b1, W2, b2, dW1, db1, dW2, db2, lr=0.01):
    W1 -= lr * dW1
    b1 -= lr * db1
    W2 -= lr * dW2
    b2 -= lr * db2
    return W1, b1, W2, b2

경사하강법 공식 w ← w - η × gradient가 그대로입니다. 복잡해 보이던 미적분이 빼기와 곱하기로 끝납니다.

주의해야 할 점이 있습니다. 가중치 초기화를 0으로 하면 모든 뉴런이 똑같이 학습해서 은닉층이 의미를 잃습니다. np.random.randn() 같은 난수 초기화가 필요한 이유입니다. 처음에 이 부분에서 막히는 경우가 많습니다.

모두의AI 딥러닝 실천 과정: 코드 플레이그라운드로 역전파 개념을 체화하는 방법

개념을 이해하고 코드를 짜는 것과, 실제로 돌려보면서 "이 값이 왜 이렇게 나오지?"를 경험하는 것은 다릅니다. 두 번째 경험이 진짜 학습입니다.

모두의AI 딥러닝 실천 과정은 이 차이를 메우는 데 초점을 맞춥니다. 개념 설명 다음에 바로 코드 플레이그라운드가 열리고, 학습률을 바꿔보거나 계층 수를 늘려보면서 손실이 어떻게 달라지는지 직접 확인합니다. 수식을 외우는 게 아니라, 파라미터를 건드리면서 신경망이 반응하는 방식을 몸으로 익히는 구조입니다.

주니어 개발자라면 특히 역전파 함수에서 shape 오류가 자주 납니다. 행렬 곱의 차원이 맞지 않아 생기는 오류인데, 이 과정에서는 각 단계마다 텐서의 차원을 확인하는 습관을 같이 잡아줍니다. 코드가 돌아가는 것과 올바르게 돌아가는 것의 차이를 구분하는 눈이 생기는 지점입니다.

자주 묻는 질문

미적분을 깊이 공부하지 않아도 역전파를 구현할 수 있을까요?

연쇄 법칙의 직관, 즉 "앞 계층의 기울기를 뒤 계층에서 받아서 현재 계층 미분과 곱한다"는 흐름을 이해하면 충분합니다. 수식 유도를 처음부터 할 줄 몰라도 NumPy 코드로 구현하고 검증하는 데는 지장이 없습니다.

학습률(Learning Rate)을 어떻게 정해야 할까요?

정해진 공식은 없습니다. 보통 0.001에서 시작해서 손실이 줄지 않으면 줄이고, 발산하면 더 줄입니다. Adam 같은 적응형 옵티마이저는 이 조정을 자동으로 해줘서, 초반에는 Adam을 쓰면서 감각을 익히는 것이 실용적입니다.

기울기 소실(Vanishing Gradient) 문제는 어떻게 피할 수 있을까요?

시그모이드 대신 ReLU 활성화 함수를 쓰고, 배치 정규화(Batch Normalization)를 적용하는 것이 현재 가장 일반적인 방법입니다. 깊은 네트워크일수록 이 선택이 학습 안정성에 직접 영향을 미칩니다.

NumPy 역전파 코드와 PyTorch autograd의 차이는 무엇인가요?

PyTorch의 autograd는 연산 그래프를 자동으로 추적해서 역전파를 대신 계산합니다. NumPy로 직접 구현하면 각 계층의 기울기 흐름을 눈으로 확인할 수 있어서, 원리를 이해하는 데 훨씬 효과적입니다. 원리를 먼저, 편의 도구는 그 다음입니다.

역전파 구현 연습에 가장 좋은 데이터셋은 무엇인가요?

XOR 문제나 사이킷런(scikit-learn)의 make_moons 데이터가 적합합니다. 데이터가 작고, 비선형 패턴이 있어서 은닉층의 효과를 눈으로 확인하기 쉽습니다. MNIST는 그 다음 단계로 넘어갈 때 쓰면 됩니다.

딥러닝의 미적분 원리는 수식 암기에 있지 않습니다. 경사하강법이 오차를 줄이는 방향을 찾고, 연쇄 법칙이 그 신호를 계층마다 거슬러 전달하며, 역전파 코드가 그 흐름을 실제로 실행합니다. 이 세 단계를 NumPy로 한 번 직접 써보면 블랙박스처럼 느껴지던 신경망이 다르게 보입니다. 모두의AI 실전 예제 챕터에서 직접 파이썬 역전파 코드를 돌려보며 신경망 최적화를 검증해 보세요.

더 보기: mdooai.com

화면 캡처 한 번으로 AI 코딩 프롬프트를 클립보드에 담는 크롬 확장 프로그램

이종현 — Wed, 19 Aug 2026 00:35:07 +0000

PromptShot ? Screenshot to AI Prompt for Cursor, ChatGPT & Claude - Chrome Web Store

Screenshot to AI prompt. Drag a region, copy LLM-ready prompt + image for Cursor, ChatGPT & Claude.

chromewebstore.google.com

AI 코딩 도구에 맥락을 전달하는 가장 큰 병목은 코드도, 로직도 아니다. 화면에 이미 보이는 내용을 손으로 다시 타이핑하는 과정이다. PromptShot은 그 타이핑을 없앤다. 영역을 드래그해 캡처하면, LLM용 프롬프트 텍스트와 PNG 이미지를 한 번에 클립보드에 복사해 Cursor, Claude, ChatGPT, Copilot 어디에나 바로 붙여넣을 수 있다.

AI 코딩 워크플로우에서 텍스트 타이핑이 끊는 흐름

Cursor나 Claude에게 UI 버그를 설명할 때, 많은 개발자가 이렇게 한다. 브라우저를 보고, 에디터로 전환하고, 컴포넌트 이름과 에러 메시지를 손으로 입력하고, 다시 브라우저로 돌아가 확인한다. 화면에 이미 있는 정보를 다시 타이핑하는 이 왕복이 생각보다 많은 집중력을 소모한다.

문제는 정확도이기도 하다. 에러 메시지를 기억에 의존해 입력하면 미묘하게 달라진다. 컴포넌트 레이아웃을 텍스트로 묘사하면 LLM이 구조를 잘못 파악하기도 한다. 반면 스크린샷을 직접 첨부하면 맥락이 정확히 전달된다. 그런데 스크린샷을 찍고, 저장하고, 첨부하는 과정도 그 나름대로 흐름을 끊는다.

AI 코딩 도구가 멀티모달을 지원하기 시작한 이후로, 실제 워크플로우의 병목은 이미지 캡처가 아니라 캡처된 이미지에 프롬프트 텍스트를 연결하는 단계로 이동했다. 이 두 가지를 동시에 클립보드에 올려주는 도구가 필요한 이유다.

PromptShot이 캡처와 프롬프트를 동시에 처리하는 방식

PromptShot은 크롬 확장 프로그램으로, 브라우저에서 특정 영역을 드래그하면 해당 영역의 PNG 이미지와 LLM 프롬프트 텍스트를 클립보드에 함께 복사한다. 별도로 파일을 저장하거나 이미지를 첨부 창에서 찾을 필요가 없다.

작동 방식은 단순하다.

Alt+Shift+S를 눌러 캡처 모드를 활성화한다.
브라우저 화면에서 원하는 영역을 드래그한다.
클립보드에 PNG 이미지와 함께 구조화된 프롬프트 텍스트가 담긴다.
Cursor, Claude, ChatGPT, Copilot 입력창에 그대로 붙여넣는다.

Alt+1은 이미지만, Alt+2는 프롬프트 텍스트만 복사하는 단축키다. 전체 화면이 아닌 특정 컴포넌트 영역만 잘라내고 싶을 때 드래그 범위를 조정하면 된다.

실제로 어떤 상황에서 쓰이는지 구체적으로 보면:

UI 버그 리포트: 깨진 레이아웃 영역을 드래그하면 LLM에게 "다음 UI에서 발생한 문제를 분석해줘"라는 맥락과 이미지가 같이 전달된다.
컴포넌트 추출: 디자인 화면의 특정 카드 영역을 캡처해 "이 컴포넌트를 React로 구현해줘"라는 프롬프트로 바로 이어진다.
반복 수정 루프: 수정 결과를 확인하고, 다시 영역을 드래그하고, 다음 프롬프트를 붙여넣는 바이브 코딩 흐름을 끊김 없이 유지할 수 있다.

이 흐름을 다른 방식과 비교하면 차이가 드러난다.

방식	이미지 전달	프롬프트 연결	클립보드 통합
OS 기본 스크린샷 + 수동 첨부	파일 저장 후 첨부	수동 타이핑	별도 단계
브라우저 스크린샷 확장	파일 저장 또는 링크	수동 타이핑	없음
PromptShot	드래그 즉시	자동 구조화	한 번에

프롬프트 텍스트를 "자동 구조화"한다는 표현에 대해 부연하자면, PromptShot은 캡처 영역의 URL, 페이지 제목 같은 기본 맥락을 프롬프트에 포함시킨다. 매번 직접 붙여 넣어야 했던 배경 정보가 자동으로 딸려 온다.

로컬에서만 처리되는 캡처가 보안 측면에서 의미하는 것

AI 도구를 개발 환경에 도입할 때 보안 정책이 까다로운 이유가 있다. 확장 프로그램이 페이지 내용을 외부 서버로 전송하면, 미공개 코드나 내부 디자인 시안이 그 서버를 거쳐간다.

PromptShot은 모든 처리를 브라우저 안에서만 수행한다. 캡처된 이미지와 프롬프트 텍스트는 로컬 클립보드에만 담기고, 외부 서버로 전송되지 않는다. 페이지 콘텐츠를 PromptShot 서버가 읽거나 저장하는 일은 없다.

이 구조가 중요한 팀이 있다. 미공개 프로덕트 UI를 작업 중인 팀, 사내 어드민 화면을 캡처해 LLM에게 전달해야 하는 개발자, 클라이언트 보안 정책상 데이터 외부 전송에 제약이 있는 프리랜서. 이들에게 "로컬에서만 처리된다"는 것은 도구 선택의 전제 조건이 된다.

물론 PromptShot을 통해 클립보드에 담은 이미지를 Claude나 ChatGPT에 붙여넣는 순간, 그 내용은 해당 LLM 서비스로 전달된다. 그 시점의 데이터 처리는 각 LLM 서비스의 정책을 따른다. PromptShot이 보장하는 범위는 캡처에서 클립보드까지다.

어떤 개발자에게 이 도구가 실제로 맞을까?

모든 확장 프로그램이 모든 워크플로우에 맞지는 않는다. PromptShot이 특히 유용한 경우와 그렇지 않은 경우를 구분하면 선택이 명확해진다.

잘 맞는 상황:

Cursor, Claude, ChatGPT로 UI를 반복 수정하는 바이브 코딩 루프
디자인 화면을 보며 컴포넌트를 LLM에게 구현 요청할 때
브라우저 에러 화면을 캡처해 버그 리포트 프롬프트를 만들 때
전체 화면이 아닌 특정 패널이나 컴포넌트만 잘라내야 할 때

덜 유용한 상황:

코드 파일 자체를 LLM에 전달하는 경우 (이미지 캡처보다 코드 복사가 낫다)
브라우저 외부 화면을 캡처해야 할 때 (크롬 내 웹페이지에 한정된다)

PromptShot 사용을 검토하고 있다면, 이 소개 글에서 실제 설치 흐름과 초기 설정 방법을 확인할 수 있다.

자주 묻는 질문

PromptShot은 어떤 LLM 도구와 함께 쓸 수 있나요?

클립보드 붙여넣기를 지원하는 모든 AI 입력창에서 작동한다. Cursor, Claude, ChatGPT, GitHub Copilot Chat이 대표적이다. 이미지 붙여넣기를 지원하는 인터페이스라면 PNG도 같이 전달된다.

캡처한 이미지나 텍스트가 외부 서버에 저장되나요?

저장되지 않는다. PromptShot은 모든 처리를 로컬 브라우저 안에서만 수행한다. 캡처된 내용은 클립보드에만 담기고, PromptShot 서버로는 전송되지 않는다.

Alt+Shift+S 단축키가 다른 프로그램과 충돌하면 어떻게 하나요?

크롬 확장 프로그램의 단축키는 chrome://extensions/shortcuts에서 직접 변경할 수 있다. 현재 시스템에서 충돌하는 조합이 있다면 다른 키로 재지정하면 된다.

전체 화면이 아닌 특정 영역만 캡처할 수 있나요?

드래그로 범위를 직접 지정한다. 전체 화면, 특정 컴포넌트, 에러 메시지 영역 등 원하는 크기로 자유롭게 잘라낼 수 있다.

무료로 사용할 수 있나요?

크롬 웹 스토어에서 설치해 사용할 수 있다. 설치 후 바로 Alt+Shift+S로 캡처를 시작할 수 있다.

화면에 이미 보이는 내용을 다시 타이핑하는 것은 AI 코딩 도구가 해결했어야 할 문제다. PromptShot은 그 한 단계를 드래그 한 번으로 줄인다. 캡처, 프롬프트 구성, 클립보드 복사가 하나의 동작으로 합쳐지기 때문에 LLM과의 반복 루프가 실제로 가벼워진다. 브라우저에서 크롬 확장 프로그램으로 설치하면 바로 쓸 수 있다. Chrome에 추가하고 Alt+Shift+S를 눌러보면 된다.

더 보기: eajiai.com

슬랙 웹버전, 시스템 다크모드와 연동해 모든 채널을 어둡게 표시하는 법

이종현 — Sat, 15 Aug 2026 03:22:50 +0000

웹 브라우저로 접속한 슬랙은 시스템 다크모드를 무시하고 밝은 화면을 그대로 띄웁니다. Everything Dark Mode 확장 프로그램을 쓰면, 슬랙 웹버전의 모든 채널과 대화창을 시스템 테마와 연동해 자동으로 어둡게 표시할 수 있습니다.

브라우저에서 열린 슬랙이 눈에 주는 부담

밤에 코드를 짜다 슬랙 알림을 확인하는 순간, 흰 배경이 확 튀어나옵니다. VS Code는 어둡고, GitHub도 어둡고, Confluence도 다크 테마로 설정해 뒀는데, 슬랙 웹버전만 유독 환합니다.

데스크톱 앱은 자체 다크모드가 있습니다. 하지만 팀 계정이 여럿이거나, 회사 방침으로 앱 설치가 안 되는 환경이라면 웹버전을 쓸 수밖에 없습니다. 웹버전 슬랙은 prefers-color-scheme: dark 미디어 쿼리에 반응하지 않습니다. 브라우저가 시스템 다크 모드 신호를 내려보내도, 슬랙 웹앱은 이를 무시하고 밝은 테마를 고집합니다.

OLED 패널에서는 흰 픽셀이 발광하므로 밝기 차이가 더 두드러집니다. 주변 환경이 어두울수록 대비가 커지고, 눈이 빠르게 피로해집니다. 다크 테마가 없는 사이트에 브라우저 확장 프로그램이 필요한 이유가 바로 여기에 있습니다.

Everything Dark Mode로 슬랙 웹버전에 다크모드를 강제 적용하는 방법

Everything Dark Mode는 슬랙 웹버전처럼 자체 다크 테마가 없는 사이트에 CSS 필터와 색 반전 처리를 씌웁니다. 슬랙 도메인만 따로 지정하면, 다른 사이트는 건드리지 않고 슬랙만 어둡게 유지할 수 있습니다.

동작 원리는 단순합니다. 확장 프로그램은 지정한 도메인에서 hue-rotate와 invert 필터를 페이지 루트에 적용하고, 이미지와 동영상은 다시 반전시켜 색상이 뒤집히지 않게 보정합니다. 결과적으로 텍스트·배경·사이드바가 어두워지고, 사진이나 첨부 파일 미리보기는 원본 색을 유지합니다.

적용 절차

Chrome 웹 스토어에서 Everything Dark Mode를 설치합니다. (Add to Chrome)
브라우저에서 app.slack.com을 엽니다.
확장 프로그램 아이콘을 클릭해 팝업을 엽니다.
상단 토글로 현재 사이트에 대해 다크모드를 켭니다.
사이트별 설정으로 저장하면, 다음에 슬랙을 열 때도 자동 적용됩니다.

시스템 테마와 연동 옵션을 활성화하면, macOS나 Windows에서 시스템 테마가 다크로 바뀌는 순간 슬랙 웹버전도 함께 어두워집니다. 낮에 라이트 모드로 쓰다가 밤에 자동으로 전환되는 흐름이 끊기지 않습니다.

슬랙 웹버전에만 다크모드를 적용하고 나머지 사이트는 그대로 두는 방법?

확장 프로그램의 사이트별 토글이 핵심입니다. 전체 켜기를 쓰면 모든 사이트가 어두워져, 이미 자체 다크 테마를 가진 GitHub나 Figma가 이중으로 처리됩니다. 그 대신 슬랙 도메인만 개별 지정하는 방식이 깔끔합니다.

설정 방식	적용 범위	이미 다크인 사이트
전체 켜기	모든 사이트	이중 반전 발생 가능
사이트별 켜기	지정 도메인만	영향 없음
시스템 연동	지정 도메인 + OS 테마 따라 자동 전환	영향 없음

실무에서 가장 무난한 조합은 사이트별 켜기와 시스템 연동을 함께 쓰는 것입니다. 슬랙만 어둡게 하고, OS가 라이트로 바뀌면 슬랙도 자연스럽게 밝아집니다.

밝기와 대비 슬라이더로 텍스트 가독성을 조정하는 방법

다크모드를 켰는데 텍스트가 너무 희거나, 배경이 지나치게 진해서 읽기 불편한 경우가 있습니다. 이 문제는 밝기(Brightness)와 대비(Contrast) 슬라이더로 조정합니다.

슬랙 웹버전 기준으로 실용적인 출발점은 다음과 같습니다.

밝기: 기본값(100)에서 85-90 정도로 낮추면 배경이 덜 어두워지고, 밝은 아이콘이 눈에 덜 쏩니다.
대비: 110 안팎으로 살짝 올리면 슬랙 사이드바의 채널 목록과 본문 텍스트 구분이 뚜렷해집니다.

슬라이더는 필터 위에서 작동하므로 반응이 즉각적입니다. 슬랙 창을 열어 둔 채로 값을 움직이면 실시간으로 확인할 수 있습니다.

주의할 점이 하나 있습니다. 대비를 너무 높이면 슬랙의 미확인 채널 표시(굵은 텍스트)가 지나치게 도드라져, 오히려 시각적 노이즈가 늘어납니다. 대비는 115를 넘기지 않는 것이 무난합니다.

코드 호스팅·문서 도구와 함께 다크 환경을 일관되게 유지하는 방법?

VS Code, GitHub, Confluence를 함께 쓰는 개발 환경에서 슬랙만 밝으면 화면 전환 때마다 눈이 재적응을 요구합니다. Everything Dark Mode로 슬랙 도메인을 지정해 두면, 나머지 도구와 밝기 수준이 맞춰집니다.

GitHub는 자체 다크 테마를 제공하고 prefers-color-scheme에 반응하므로, 시스템 다크 모드를 설정해 두면 슬랙 확장 설정과 자연스럽게 맞물립니다. Confluence의 경우 설치 버전과 클라우드 버전의 다크 지원 수준이 달라서, 클라우드 버전 일부 테마는 확장 프로그램의 추가 적용이 더 일관된 결과를 줍니다.

도구마다 다크 테마 지원 방식이 다른 것이 현실입니다. 자체 지원이 있는 곳은 자체 설정을 쓰고, 없는 곳에만 확장 프로그램을 씌우는 것이 가장 충돌이 적습니다.

자주 묻는 질문

슬랙 데스크톱 앱을 쓰면 이 확장 프로그램이 필요 없나요?

네. 슬랙 데스크톱 앱은 설정 메뉴에서 자체 다크모드를 제공합니다. Everything Dark Mode는 데스크톱 앱에서는 작동하지 않으며, 브라우저로 접속한 app.slack.com에만 적용됩니다. 앱 설치가 가능하다면 앱의 내장 테마 설정을 쓰는 편이 낫습니다.

다크모드를 적용하면 슬랙의 이모지나 이미지 색상이 이상해지지 않나요?

이미지와 이모지는 반전 후 재반전 처리를 거쳐 원본 색을 유지합니다. 다만 일부 SVG 아이콘은 색이 미묘하게 달라 보일 수 있습니다. 밝기 슬라이더를 85-90 사이로 설정하면 이 차이가 줄어드는 경향이 있습니다.

시스템 테마 연동 옵션을 켜면 슬랙이 항상 자동으로 전환되나요?

OS 테마 변경을 브라우저가 감지하면 즉시 전환됩니다. macOS에서 자동 테마 일정을 설정해 두거나, 수동으로 다크/라이트를 바꿀 때 모두 적용됩니다. 브라우저 탭을 새로 고칠 필요 없이 현재 탭에서 바로 반영됩니다.

app.slack.com 외에 슬랙 도메인이 더 있으면 어떻게 하나요?

슬랙 웹버전은 기본적으로 app.slack.com을 씁니다. 일부 엔터프라이즈 워크스페이스는 커스텀 도메인을 쓸 수 있는데, 그 경우 해당 도메인을 추가로 지정하면 됩니다. 확장 프로그램 팝업에서 도메인을 직접 입력하는 방식을 지원합니다.

확장 프로그램이 슬랙 성능에 영향을 주나요?

CSS 필터를 루트 엘리먼트에 적용하는 방식이라 JavaScript 번들이나 네트워크 요청에는 관여하지 않습니다. 렌더링 레이어에서만 처리되므로 체감 성능 차이는 거의 없습니다. 아주 오래된 저사양 기기라면 복잡한 레이아웃에서 미미한 렌더링 부하가 생길 수 있습니다.

슬랙 웹버전의 밝은 화면 문제는 설정 하나로 해결되지 않습니다. 자체 다크 지원이 없는 사이트에는 브라우저 레이어에서 처리해야 하고, Everything Dark Mode의 사이트별 토글과 시스템 연동 옵션이 그 역할을 담당합니다. 슬랙 도메인만 지정하고, 밝기와 대비를 실제 작업 환경에 맞게 조정해 두면 야간 개발 흐름에서 화면 전환 때마다 눈이 리셋되는 불편을 줄일 수 있습니다.

신입 개발자 온보딩용 내부 도구 사용 설명서 프로토타입 빌드하기

이종현 — Wed, 12 Aug 2026 22:51:02 +0000

기술팀에 합류한 신입 개발자가 가장 먼저 부딪히는 벽은 코드가 아니라 내부 도구다. 어떤 환경 설정 순서가 맞는지, 어떤 CLI 명령어를 어느 순서로 실행해야 하는지, 그 맥락을 전달하는 문서가 없으면 온보딩은 시니어 개발자의 시간을 반복적으로 소모한다. 이 글은 행동 로그와 스크린샷 캡처를 출발점으로, Upstage Document Parse와 Solar Pro 3를 거쳐 Markdown 파일까지 내보내는 설명서 프로토타입 빌드 과정을 단계별로 정리한다.

개발 환경 설정 및 도구 설명 가이드의 병목을 어떻게 해결할까?

신입 개발자 온보딩 가이드의 병목은 대부분 같은 지점에서 생긴다. 가이드가 없거나, 있어도 실제 화면과 달라서 신뢰를 잃은 경우다. 환경 설정 단계는 도구 버전이 바뀔 때마다 내용이 틀어지는데, 그 갱신 비용을 아무도 지지 않으려 하면 문서는 방치된다.

병목의 구조를 간단하게 분류하면 다음과 같다.

병목 유형	원인	기존 대응 방식의 한계
화면 불일치	UI 변경 후 스크린샷 미갱신	수동 캡처 반복, 유지 비용 높음
맥락 누락	클릭 이유가 문서에 없음	구두 전달에 의존
버전 드리프트	도구 업데이트 미반영	신입이 오류로 발견
문서 작성 지연	시니어 개발자의 우선순위 낮음	온보딩 완료 후 소급 작성

이 병목을 줄이려면 실제 작업 흐름을 직접 캡처해서 문서로 변환하는 루프가 필요하다. 별도의 글쓰기 작업 없이, 실제로 도구를 사용하는 행위 자체가 초안 생성의 재료가 되는 구조다.

행동 로그와 스크린샷 기록으로 개발 가이드 초안을 어떻게 작성할까?

Manual Maker 확장을 Chrome에 설치하고 녹화를 시작한다. 이후 내부 도구를 평소처럼 조작하면 된다. 확장은 클릭 직전 시점의 스크린샷을 캡처하고, 각 행동에 대한 로그(클릭 대상 요소, 입력 값, 페이지 URL, 타임스탬프)를 IndexedDB에 먼저 저장한다. 스크린샷은 로컬에 머물며 서버로 전송되지 않는다.

녹화 시 주의할 점이 있다. 비밀번호 입력 필드와 주민번호 형태의 값은 자동으로 마스킹 처리된다. 내부 API 키를 직접 화면에 입력하는 단계가 있다면 해당 필드가 블러 처리됐는지 녹화 후 반드시 확인한다.

녹화를 마치고 Ctrl+Shift+M(Mac: Cmd+Shift+M)을 누르면 행동 로그와 스크린샷 시퀀스를 묶어 Document Parse 파이프라인으로 넘기는 요청이 생성된다. 이 시점에 행동 로그만 전송되고, 스크린샷 바이너리 자체는 로컬에서 처리된다.

Upstage Document Parse로 복잡한 개발 도구 UI를 어떻게 인식할까?

Upstage Document Parse는 스크린샷 이미지에서 UI 구조를 추출하는 데 특화된 모델이다. 일반 OCR과 달리 버튼, 드롭다운, 입력 필드, 탭 구조를 레이아웃 단위로 인식한다. 개발 도구 화면처럼 텍스트 밀도가 높고 UI 요소가 겹치는 경우에도 요소별 바운딩 박스와 레이블을 JSON 형태로 반환한다.

Manual Maker는 이 출력을 행동 로그와 결합한다. 예를 들어, 행동 로그에 "버튼 클릭, id=deploy-btn"이 기록되어 있고, Document Parse가 해당 화면에서 "Deploy" 레이블의 버튼 위치를 식별했다면, 두 정보를 합쳐 "Deploy 버튼을 클릭한다"는 단계를 생성한다. 행동 로그만으로는 맥락이 빈약하고, 스크린샷만으로는 어떤 순서로 조작했는지 알 수 없는 문제를 이 결합이 보완한다.

Document Parse API 호출은 생성 단계에서 한 번 이루어진다. 이후 편집 화면에서 수동으로 내용을 수정해도 API를 재호출하지 않는다.

DOM 맥락 분석과 수동 수정 보호 기능으로 가이드 신뢰도를 어떻게 높일까?

스크린샷 기반 인식만으로는 한계가 있다. 같은 화면이라도 권한에 따라 표시되는 버튼이 다를 수 있고, 동적으로 렌더링되는 컴포넌트는 캡처 타이밍에 따라 상태가 달라진다. Manual Maker는 녹화 중 DOM 스냅샷을 병행 수집해서 aria-label, data-testid, 요소의 텍스트 콘텐츠 같은 속성을 행동 로그에 추가한다. Document Parse 출력과 DOM 데이터를 함께 Solar Pro 3 모델에 전달하면 "이 버튼의 실제 레이블은 무엇인가"를 더 정확하게 판단할 수 있다.

Solar Pro 3는 생성한 각 단계에 대해 자기검증 루프를 돌린다. 행동 로그에서 추론한 단계 설명이 DOM 맥락 및 Document Parse 결과와 일치하는지를 모델이 스스로 채점하고, 신뢰도가 낮은 단계에 플래그를 붙인다. 편집 화면에서 플래그가 붙은 단계는 강조 표시되어 수동 검토를 유도한다.

수동 수정 보호 기능은 이 루프 이후에 작동한다. 사용자가 특정 단계를 직접 편집하면 해당 단계는 이후 재생성 요청에서 덮어쓰지 않는다. 수정 내용이 의도치 않게 초기화되는 상황을 막는 단순한 잠금이다.

Markdown 파일로 내보내어 사내 위키에 가이드를 등록하는 방법

편집이 끝난 초안은 Markdown, Word, PDF, ZIP 네 가지 형식으로 내보낼 수 있다. 사내 위키(Confluence, Notion, GitHub Wiki 등)에 직접 붙여 넣거나 파일로 업로드할 때 Markdown 형식이 가장 적합하다.

내보낸 Markdown 파일의 구조는 다음과 같다.

H1: 가이드 제목 (녹화 시작 시 입력한 이름)
H2: 각 주요 단계 (Document Parse가 페이지 전환을 기준으로 자동 구분)
번호 목록: 세부 클릭 및 입력 단계
이미지 참조: 로컬 스크린샷 경로 또는 Base64 인라인 이미지
플래그 주석: 자기검증에서 신뢰도가 낮은 단계에 추가

ZIP 내보내기를 선택하면 Markdown 파일과 스크린샷 이미지가 폴더 구조로 묶인다. GitHub 레포지토리의 docs/ 디렉터리에 ZIP을 풀어 커밋하면 PR 리뷰 흐름 안에서 가이드 갱신도 관리할 수 있다.

가이드를 사내 위키에 등록할 때 권장하는 메타데이터는 아래와 같다.

항목	권장 값 예시
문서 버전	v1.0 (초안), v1.1 (수동 검토 완료)
대상 독자	신입 개발자, 온보딩 1주차
마지막 검증 날짜	문서 등록일 기재
관련 도구 버전	캡처 당시 도구 버전 명시
다음 갱신 주기	분기 1회 또는 도구 업데이트 시

온보딩 설명서 자동화 전체 워크플로는 이 가이드에서 더 자세히 확인할 수 있다.

자주 묻는 질문

녹화 중 실수로 잘못된 클릭을 했을 때 어떻게 처리하나?

편집 화면에서 개별 단계를 삭제하거나 순서를 바꿀 수 있다. 녹화 자체를 재시작할 필요는 없다. 잘못된 단계만 지우고 나머지를 유지하면 초안 품질에 영향이 없다.

스크린샷이 외부 서버로 전송되는지 확인하는 방법은?

브라우저 개발자 도구의 네트워크 탭에서 녹화 종료 후 발생하는 요청을 확인할 수 있다. Manual Maker는 행동 로그 JSON만 API 엔드포인트로 전송하고, 스크린샷 바이너리는 전송 페이로드에 포함되지 않는다.

Document Parse가 인식하지 못하는 UI 요소가 있을 때 어떻게 보완할까?

DOM 맥락 데이터가 보완재로 작동한다. DOM에서 aria-label이나 data-testid가 잘 정의된 요소라면 Document Parse 인식 실패 시에도 Solar Pro 3가 DOM 데이터로 단계 설명을 생성할 수 있다. 두 소스 모두 불충분하면 해당 단계에 플래그가 붙고 수동 입력을 요구한다.

무료 플랜과 Pro 플랜의 차이는?

무료 플랜은 매뉴얼 10페이지까지 생성할 수 있다. 신입 개발자 온보딩 가이드 한 세트를 프로토타입으로 만들기에 충분한 분량이다. 10페이지를 초과하는 가이드나 팀 전체 설명서 세트가 필요하다면 Pro 플랜이 필요하다. Pro는 일회성 결제 평생 라이선스 구조로, 구독 방식이 아니다.

가이드 내용이 오래되어 갱신이 필요할 때 기존 파일을 재사용할 수 있나?

기존 Markdown 파일을 Manual Maker에 가져와서 특정 단계만 재녹화하는 기능은 현재 지원하지 않는다. 변경된 워크플로 구간만 새로 녹화해서 별도 초안을 만든 뒤, 기존 파일의 해당 섹션을 수동으로 교체하는 방식이 현재 가장 간단한 갱신 경로다.

신입 개발자 온보딩 가이드 프로토타입의 핵심은 문서 작성을 별도 작업으로 분리하지 않는 것이다. 행동 로그와 스크린샷 캡처로 시작해 Upstage Document Parse와 Solar Pro 3의 자기검증 루프를 거치면, 빈 페이지 대신 검토 가능한 초안이 생긴다. 무료 플랜 10페이지로 팀의 핵심 도구 설정 가이드를 먼저 만들어보고, 규모가 커지면 일회성 Pro 라이선스로 전환하면 된다.

드래그 캡처 한 번으로 이미지와 코드 리뷰 프롬프트를 Cursor·Copilot에 전달하는 크롬 익스텐션 워크플로

이종현 — Wed, 12 Aug 2026 22:49:21 +0000

개발자가 UI 버그를 발견하고 AI 코딩 도구에 설명하는 과정은 생각보다 손이 많이 간다. 스크린샷을 찍고, 파일로 저장하고, Cursor나 Copilot 창을 열어 "이 버튼의 padding이 의도한 것과 다릅니다"라는 문장을 직접 타이핑한다. 이 흐름에서 진짜 병목은 캡처 자체가 아니라 맥락을 손으로 옮기는 과정이다. PromptShot은 브라우저 안에서 영역을 드래그하면 PNG 이미지와 코드 리뷰용 프롬프트를 클립보드에 동시에 올려 그 병목을 없앤다.

웹 개발 흐름에서 캡처·설명 타이핑이 실제로 느린 이유

영역 캡처 자체는 1초다. 문제는 그 앞뒤다. 전체 화면 캡처 도구는 필요 없는 영역까지 잘라야 하고, 운영체제 기본 스크린샷은 파일 시스템 어딘가에 떨어진다. 그 파일을 AI 채팅창에 첨부하고, 거기에 "이 컴포넌트의 레이아웃이 모바일에서 깨집니다. flex-wrap 속성을 확인해 주세요"라는 맥락을 별도로 입력해야 한다.

바이브 코딩(vibe coding) 방식으로 작업하는 경우엔 이 반복이 더 빨리 쌓인다. 화면을 보면서 수정하고, 수정 결과를 다시 AI에게 보여주는 루프가 짧기 때문에, 캡처-저장-설명-첨부 4단계가 그대로 마찰로 남는다.

결국 필요한 건 두 가지다. 특정 UI 영역만 정확히 자르는 것, 그리고 그 영역에 대한 설명 프롬프트가 이미지와 함께 자동으로 따라오는 것.

드래그로 클립보드에 이미지와 프롬프트를 동시에 올리는 방식

PromptShot은 크롬 익스텐션으로 설치되며, 단축키 Alt+Shift+S를 누르면 화면에 캡처 모드가 활성화된다. 원하는 UI 영역을 드래그하면 두 가지가 클립보드에 올라간다.

드래그한 영역의 PNG 이미지
해당 영역을 기술하는 코드 리뷰용 텍스트 프롬프트 (Alt+1은 이미지만, Alt+2는 이미지+프롬프트)

Cursor에서는 채팅창에 Ctrl+V만 하면 이미지와 프롬프트가 붙여넣어진다. GitHub Copilot Chat도 동일하다. 타이핑 없이 캡처 직후 AI에게 맥락을 전달할 수 있는 구조다.

특히 UI 버그 리포트 작성 시 유용한 점은, 프롬프트가 "이 스크린샷에서 무엇이 문제인지 설명해 주세요"처럼 열린 질문이 아니라 컴포넌트 분석과 코드 수정을 유도하는 형식으로 구성된다는 것이다. 드래그 한 번이 맥락 타이핑 전체를 대체한다.

관련 자동화 흐름은 크롬 익스텐션 자동 설치 가이드에서 확인할 수 있다.

단축키와 클립보드 연동으로 개발 루프를 짧게 유지하는 방법

단축키는 키맵을 바꿀 수 있다. 기본값은 아래와 같다.

단축키	동작
`Alt+Shift+S`	캡처 모드 활성화
`Alt+1`	이미지만 클립보드에 복사
`Alt+2`	이미지 + 코드 리뷰 프롬프트를 클립보드에 복사

Alt+2가 핵심이다. 이 단축키 하나로 다음 동작이 모두 완료된다.

지정 영역 PNG 캡처
코드 리뷰용 프롬프트 텍스트 생성
두 가지를 클립보드에 동시 저장

Cursor 채팅창, Copilot Chat, ChatGPT 등 붙여넣기를 지원하는 모든 AI 인터페이스에서 그대로 Ctrl+V로 전달된다. 파일 저장 경로를 신경 쓸 필요도, 첨부 버튼을 찾을 필요도 없다.

실제 개발 루프에서 이 구조가 가진 이점은 컨텍스트 스위칭이 줄어든다는 점이다. 브라우저에서 Cursor로 전환할 때 캡처 파일을 탐색기에서 찾는 동작이 사라진다. 드래그하고, 붙여넣고, 다음 대화로 넘어간다.

민감한 코드가 외부 서버로 전송되지 않는 이유

개발 환경에서 스크린샷 도구를 쓸 때 가장 현실적인 우려는 페이지 내용이 어딘가에 올라가는 것이다. 사내 스테이징 서버 화면, 미출시 기능 UI, 로컬호스트에서 돌아가는 관리자 패널 등은 외부 서버로 나가서는 안 된다.

PromptShot은 모든 처리를 브라우저 안에서 끝낸다. 캡처, 프롬프트 생성, 클립보드 저장 전 과정이 로컬에서만 이루어지며, 어떤 이미지나 텍스트도 외부 서버로 전송되지 않는다. 확장 프로그램이 네트워크 요청을 하는 순간은 없다.

이 구조가 실질적으로 의미하는 바는 간단하다.

localhost:3000에서 열린 개발 서버 화면을 캡처해도 된다
VPN 안쪽 스테이징 환경에서도 동일하게 쓸 수 있다
회사 정책상 화면 데이터 외부 전송이 제한된 환경에서도 충돌이 없다

크롬 익스텐션이 실제로 어떤 권한을 요청하는지는 웹스토어 권한 목록에서 직접 확인할 수 있다. activeTab 권한과 clipboardWrite 권한만 사용한다. 백그라운드 네트워크 연결 권한은 없다.

AI와 브라우저를 동기화해 디자인 피드백과 컴포넌트 추출에 활용하는 요령

코드 리뷰 프롬프트는 버그 리포트에만 쓰이지 않는다. 디자인 핸드오프나 컴포넌트 추출 작업에서도 동일한 흐름이 유효하다.

예를 들어, 피그마 없이 브라우저에서 직접 컴포넌트 스펙을 AI에게 물어보는 경우를 생각해보자. 특정 카드 컴포넌트를 드래그 캡처하고 Alt+2로 프롬프트와 함께 Cursor에 붙여넣으면, AI는 이미지와 텍스트 맥락을 함께 받아 더 정확한 CSS나 React 컴포넌트 코드를 제안할 수 있다. "이 카드의 shadow와 border-radius를 Tailwind로 재현해 줘"처럼 직접 요청을 이어 붙이면 충분하다.

디자이너가 버그를 리포트할 때도 마찬가지다. 형광펜이나 화살표 같은 마크업 기능은 PromptShot이 직접 제공하지 않지만, 캡처 후 이미지 편집 도구에서 표시를 추가하고 다시 Cursor에 첨부하는 방식으로 조합할 수 있다.

AI와 브라우저를 동기화한다는 말은 결국 두 창 사이의 맥락 전달 비용을 줄인다는 뜻이다. PromptShot은 그 비용을 드래그 한 번으로 압축한다.

자주 묻는 질문

PromptShot은 어떤 AI 도구와 함께 쓸 수 있나요?

클립보드 붙여넣기를 지원하는 모든 AI 인터페이스에서 쓸 수 있다. Cursor, GitHub Copilot Chat, ChatGPT, Claude 등이 해당된다. 이미지와 프롬프트를 클립보드에서 읽어들이는 구조라면 별도 연동 설정 없이 Ctrl+V로 전달된다.

전체 페이지가 아닌 특정 영역만 캡처할 수 있나요?

캡처 모드에서 마우스로 드래그해 원하는 영역만 선택한다. 전체 화면 캡처나 특정 DOM 요소 기준 자동 감지 방식이 아니라, 픽셀 단위로 영역을 직접 지정하는 방식이다.

로컬호스트 환경에서도 캡처가 되나요?

된다. localhost나 내부 IP 주소로 접근하는 스테이징 서버 화면도 동일하게 캡처할 수 있다. 모든 처리가 브라우저 로컬에서 이루어지기 때문에 외부 네트워크 접근이 필요하지 않다.

생성되는 프롬프트 형식을 수정할 수 있나요?

현재 버전에서는 프롬프트 템플릿을 직접 편집하는 기능은 제공되지 않는다. 캡처 후 Cursor 등 AI 채팅창에 붙여넣은 뒤 추가 요청 문장을 이어 입력하는 방식이 현실적이다.

크롬 외 브라우저에서도 동작하나요?

현재는 크롬(Chromium 기반 포함)을 지원한다. Edge처럼 크롬 웹스토어 익스텐션을 설치할 수 있는 Chromium 기반 브라우저에서는 동작을 확인할 수 있다.

캡처, 저장, 설명 타이핑으로 이루어지는 버그 리포트 루프는 익숙하다고 해서 효율적인 것이 아니다. 드래그하고, Alt+2를 누르고, 붙여넣는 세 동작으로 이미지와 코드 리뷰 프롬프트를 동시에 AI에게 전달하는 구조가 갖춰지면, 반복이 짧아지고 AI 응답의 품질도 맥락이 충분해진 만큼 따라온다. 크롬 웹스토어에서 PromptShot을 검색하거나 즉시 설치하여 타이핑 수작업이 없는 버그 리포팅을 시작하세요.

확률 분포로 AI 모델 가중치를 초기화하고 손실을 평가하는 파이썬 프로토타입

이종현 — Wed, 12 Aug 2026 22:40:54 +0000

AI 모델이 학습을 시작하려면 가중치에 초기값을 넣어야 합니다. 그 초기값을 어떤 분포에서 뽑는지에 따라 학습이 안정되기도 하고, 처음부터 흔들리기도 합니다. 이 글은 가우시안 분포와 균등 분포라는 두 가지 확률 개념을 NumPy 시뮬레이션으로 직접 구현해, 실제로 동작하는 프로토타입을 손으로 확인하는 과정을 다룹니다.

AI 모델은 왜 확률적으로 사고하는가: 불확실성의 정량화

AI 모델은 "정답을 외우는 기계"가 아닙니다. 정답에 가까울 확률을 높여 나가는 구조입니다.

분류 모델을 예로 들면, 마지막 출력층은 "이 이미지가 고양이일 확률은 0.82, 개일 확률은 0.18"처럼 확률 벡터를 내놓습니다. 이 확률은 소프트맥스(Softmax) 함수가 만들어 내고, 손실 함수는 그 확률이 실제 정답 분포와 얼마나 다른지를 수치로 계산합니다. 손실을 줄이는 과정이 곧 학습입니다.

학습이 시작되는 첫 순간에도 확률이 개입합니다. 가중치 초기값을 어떤 분포에서 샘플링하느냐에 따라 그래디언트(gradient)가 폭발하거나 소멸할 수 있습니다. 확률 분포는 그래서 AI 수학에서 장식이 아니라 뼈대에 해당합니다.

어려운 수학이 필요하다고 걱정할 필요는 없습니다. 지금 당장 필요한 건 분포 두 가지의 성질을 이해하고, NumPy 함수를 한 줄씩 실행해 보는 경험입니다.

가우시안 분포와 균등 분포: 가중치 초기화에 쓰이는 핵심 개념

가우시안 분포(정규 분포)는 평균을 중심으로 종 모양으로 퍼지는 분포입니다. 두 매개변수로 정의됩니다.

평균(μ): 값들이 모이는 중심
표준편차(σ): 평균에서 얼마나 넓게 퍼지는지의 정도

딥러닝에서 가중치를 초기화할 때 평균 0, 작은 표준편차(예: 0.01)로 설정하는 이유는 초기 가중치가 너무 크면 출력이 포화 상태에 빠져 그래디언트가 사라지기 때문입니다.

균등 분포(Uniform Distribution)는 지정한 구간 [a, b] 안에서 모든 값이 동일한 확률로 선택됩니다. Xavier 초기화(Glorot Initialization)처럼 층의 입출력 뉴런 수를 고려해 구간을 설정하는 방식이 여기서 나옵니다.

두 분포를 나란히 비교하면 이렇습니다.

분포	형태	초기화 활용 예	장점	주의점
가우시안(정규)	종 모양, 평균 중심	작은 σ로 무작위 초기화	학습 초기 안정성	σ가 크면 출력 포화 위험
균등	구간 내 평평	Xavier / He 초기화	층별 분산 제어	구간 설정에 신중해야 함
표준정규 (μ=0, σ=1)	가우시안의 특수형	z-score 정규화	스케일 통일	원래 단위 해석 주의

Xavier 초기화는 활성화 함수가 선형에 가까울 때(Sigmoid, tanh) 잘 작동합니다. 반면 ReLU 계열 활성화 함수를 쓸 때는 He 초기화(가우시안 기반, σ를 입력 뉴런 수에 맞게 조정)가 더 적합합니다. 초기화 방식 선택은 단순한 취향이 아니라, 쓰는 활성화 함수에 따라 달라지는 구조적 결정입니다.

파이썬 NumPy를 활용한 확률적 시뮬레이션 프로토타입 작성

아래 예제는 비전공자도 한 줄씩 따라올 수 있도록 단계를 나눴습니다. 실행 환경은 Python 3.8 이상, NumPy와 Matplotlib이 설치된 상태면 충분합니다.

1단계: 가우시안 분포로 가중치 초기화 시뮬레이션

import numpy as np
import matplotlib.pyplot as plt

# 뉴런 수가 64인 레이어의 가중치를 가우시안 분포로 초기화
np.random.seed(42)
weights_gaussian = np.random.normal(loc=0.0, scale=0.01, size=(64, 64))

print("가우시안 초기화 가중치 통계")
print(f"  평균: {weights_gaussian.mean():.6f}")
print(f"  표준편차: {weights_gaussian.std():.6f}")
print(f"  최솟값: {weights_gaussian.min():.6f}")
print(f"  최댓값: {weights_gaussian.max():.6f}")

출력 예시:

가우시안 초기화 가중치 통계
  평균: 0.000032
  표준편차: 0.009987
  최솟값: -0.030451
  최댓값: 0.027913

평균이 거의 0, 표준편차가 0.01에 근접합니다. 이 수치가 의미하는 건 초기 가중치들이 0 근방에 조밀하게 모여 있다는 것입니다.

2단계: Xavier 균등 초기화 구현

Xavier 초기화의 구간은 [-√(6 / (fan_in + fan_out)), +√(6 / (fan_in + fan_out))]입니다. fan_in은 입력 뉴런 수, fan_out은 출력 뉴런 수입니다.

fan_in, fan_out = 64, 64
limit = np.sqrt(6.0 / (fan_in + fan_out))

weights_xavier = np.random.uniform(low=-limit, high=limit, size=(fan_in, fan_out))

print(f"\nXavier 초기화 구간: [{-limit:.4f}, {limit:.4f}]")
print(f"  평균: {weights_xavier.mean():.6f}")
print(f"  표준편차: {weights_xavier.std():.6f}")

출력 예시:

Xavier 초기화 구간: [-0.3062, 0.3062]
  평균: 0.000847
  표준편차: 0.176951

균등 분포라서 표준편차가 가우시안보다 훨씬 크게 나옵니다. 층이 깊어질수록 이 차이가 학습 속도와 안정성에 영향을 줍니다.

3단계: 크로스 엔트로피 손실로 확률 분포 평가

분류 모델의 출력은 확률 벡터입니다. 손실 함수인 크로스 엔트로피(Cross-Entropy)는 예측 확률과 실제 정답 사이의 거리를 측정합니다.

def cross_entropy_loss(y_true, y_pred):
    """
    y_true: 정답 원-핫 벡터 (예: [0, 1, 0])
    y_pred: 모델 출력 확률 벡터 (예: [0.1, 0.8, 0.1])
    """
    epsilon = 1e-9  # log(0) 방지
    y_pred = np.clip(y_pred, epsilon, 1 - epsilon)
    return -np.sum(y_true * np.log(y_pred))

# 예시: 정답이 클래스 1인 경우
y_true = np.array([0, 1, 0])

# 잘 예측한 경우
y_pred_good = np.array([0.05, 0.90, 0.05])
# 잘못 예측한 경우
y_pred_bad  = np.array([0.60, 0.20, 0.20])

loss_good = cross_entropy_loss(y_true, y_pred_good)
loss_bad  = cross_entropy_loss(y_true, y_pred_bad)

print(f"좋은 예측의 손실: {loss_good:.4f}")
print(f"나쁜 예측의 손실: {loss_bad:.4f}")

출력 예시:

좋은 예측의 손실: 0.1054
나쁜 예측의 손실: 1.6094

손실값이 작을수록 예측 확률 분포가 정답에 가깝습니다. 학습의 목표가 이 숫자를 줄이는 것이고, 그 과정에서 확률 분포 개념이 핵심 역할을 합니다.

4단계: 두 초기화 방식의 분포를 시각화

fig, axes = plt.subplots(1, 2, figsize=(12, 4))

axes[0].hist(weights_gaussian.flatten(), bins=50, color='steelblue', alpha=0.8)
axes[0].set_title('가우시안 초기화 (μ=0, σ=0.01)')
axes[0].set_xlabel('가중치 값')
axes[0].set_ylabel('빈도')

axes[1].hist(weights_xavier.flatten(), bins=50, color='tomato', alpha=0.8)
axes[1].set_title('Xavier 균등 초기화')
axes[1].set_xlabel('가중치 값')

plt.tight_layout()
plt.savefig('weight_distributions.png', dpi=150)
plt.show()

히스토그램을 나란히 놓으면 가우시안은 중심에 몰리고, 균등은 구간 전체에 고르게 퍼진 모양을 직접 눈으로 확인할 수 있습니다. 코드 한 줄이 개념을 몸으로 이해하게 만드는 순간입니다.

모두의AI 인터랙티브 Playground를 통한 실전 확률 연습

위 코드를 직접 타이핑하는 것도 좋지만, 처음엔 결과를 즉시 보며 감을 잡는 편이 훨씬 빠릅니다. 모두의AI의 인터랙티브 Playground에서는 σ 값이나 fan_in/fan_out 숫자를 슬라이더로 바꾸면 분포 그래프가 실시간으로 바뀌는 환경을 제공합니다. 코드를 처음부터 짜지 않아도 "σ를 크게 하면 어떻게 되는가"를 직접 실험할 수 있습니다.

확률 분포 대시보드와 실전 실습 환경은 mdooai.com에서 확인할 수 있습니다. 개념 설명 직후 바로 실습으로 이어지는 구조라, 글만 읽고 넘어가는 것보다 개념이 훨씬 오래 남습니다.

자주 묻는 질문

가우시안 분포와 정규 분포는 다른 건가요?

같은 분포를 부르는 두 이름입니다. 정규 분포(Normal Distribution)가 공식 명칭이고, 가우시안 분포는 수학자 가우스의 이름에서 온 별칭입니다. AI 문서에서는 두 용어를 혼용하므로 어느 쪽을 만나도 동일하게 이해하면 됩니다.

가중치 초기화를 전부 0으로 하면 왜 안 되나요?

모든 뉴런이 같은 값으로 시작하면 역전파 과정에서 그래디언트도 동일하게 계산됩니다. 결과적으로 모든 뉴런이 똑같이 업데이트되어 층이 아무리 많아도 하나의 뉴런과 다를 바 없어집니다. 이를 대칭성 깨기 실패(symmetry breaking failure)라 부릅니다.

크로스 엔트로피 손실을 직접 구현하지 않고 라이브러리를 써도 되나요?

실무에서는 PyTorch의 nn.CrossEntropyLoss나 TensorFlow의 tf.keras.losses.CategoricalCrossentropy를 씁니다. 직접 구현하는 이유는 내부에서 어떤 확률 계산이 일어나는지 이해하기 위해서입니다. 구조를 한 번 손으로 써봤다면 라이브러리를 쓸 때 매개변수 의미가 훨씬 명확해집니다.

NumPy만으로 딥러닝을 공부할 수 있나요?

초기화와 손실 계산 같은 개념을 이해하는 데는 NumPy로 충분합니다. 실제 모델을 학습시키려면 자동 미분 기능이 있는 PyTorch나 TensorFlow가 필요하지만, 확률 분포의 작동 원리는 NumPy 수준에서 완전히 실험할 수 있습니다.

확률 분포 개념 없이 AI 프레임워크를 바로 배우면 안 되나요?

배울 수는 있습니다. 다만 초기화 옵션이나 손실 함수 선택 앞에서 막히는 순간이 반드시 옵니다. 그때 "왜 이 옵션인가"를 이해하지 못하면 무작정 복붙하는 코드가 됩니다. 확률 분포를 먼저 짚어두면 그 선택 기준이 생깁니다.

AI 모델을 공부할 때 확률통계가 어렵게 느껴지는 건 개념이 어렵기 때문이 아니라, 코드와 개념이 연결되는 경험이 없어서인 경우가 대부분입니다. 가우시안 분포로 가중치를 초기화하고, 균등 분포로 Xavier 범위를 계산하고, 크로스 엔트로피로 확률 예측을 평가하는 이 세 단계를 NumPy로 직접 실행해 보면 수식이 살아있는 도구처럼 느껴집니다. 모두의AI가 추구하는 "한 걸음씩, 올바르게"는 바로 이 지점에서 시작합니다. 개념을 외우기 전에 먼저 실행해 보세요.

더 보기: mdooai.com

네이버 지도 맛집 사진, 큰 그리드로 펼쳐 한눈에 비교하는 방법

이종현 — Wed, 12 Aug 2026 22:32:59 +0000

네이버 지도 와이드 갤러리를 설치하면 사진 탭에서 초록 버튼 하나로 수십 장의 맛집 사진을 큰 그리드로 펼치고, 키보드 방향키로 끊김 없이 탐색할 수 있습니다. 작은 썸네일을 무한히 내려야 했던 번거로움이 사라지고, 메뉴판·테이블 구조·분위기를 한 화면에서 비교해 결정할 수 있습니다.

맛집 사진 탐색 시 기존 네이버 지도 UI의 한계

네이버 지도 기본 사진 탭은 작은 썸네일이 좁은 패널에 세로로 늘어서 있습니다. 스크롤을 내릴수록 이미 본 사진과 아직 못 본 사진의 경계가 흐릿해지고, 마음에 드는 사진을 클릭해 확대하면 이전 위치를 잃습니다. 한 식당 안에서도 메뉴판 사진과 테이블 구조 사진이 섞여 있어 원하는 유형만 골라보기 어렵습니다.

두 곳을 비교할 때 문제는 더 커집니다. A 식당 탭과 B 식당 탭을 오가면서 각각 스크롤을 반복해야 하고, 기억에 의존해 분위기를 견줘야 합니다. 사진 한 장의 크기가 작으니 주방이 보이는지, 좌석 간격이 넓은지 같은 디테일을 확인하려면 클릭과 확대를 계속 반복합니다.

이 구조적 불편함은 UI 문제입니다. 사진 데이터 자체가 부족한 게 아니라, 그것을 보여주는 방식이 비교에 맞지 않습니다.

와이드 그리드로 메뉴판과 테이블 구조를 파악하는 방법

네이버 지도 와이드 갤러리를 Chrome에 설치하고 네이버 지도에서 식당 페이지를 열면 사진 탭 상단에 초록 버튼이 하나 추가됩니다. 클릭하면 전체화면 그리드 갤러리가 열립니다.

그리드의 핵심은 크기 조절입니다. 기본값보다 셀을 크게 설정하면 썸네일 단계에서도 메뉴판의 글자가 보이고, 테이블 배치나 창가 좌석 유무 같은 공간 정보가 보입니다. 스크롤 없이 한 화면에 사진 수십 장이 펼쳐지기 때문에, 특정 유형의 사진이 얼마나 있는지 패턴 자체를 볼 수 있습니다.

아래는 기본 네이버 지도 UI와 와이드 갤러리의 탐색 방식을 항목별로 정리한 표입니다.

비교 항목	기본 네이버 지도 UI	와이드 갤러리
사진 표시 방식	좁은 패널 세로 스크롤 썸네일	전체화면 조절 가능 그리드
한 화면 내 사진 수	약 3-6장	수십 장
세부 사진 보기	클릭 후 개별 확대	키보드로 그리드 내 이동 후 Enter
메뉴판 글자 가독성	확대 클릭 필요	그리드 셀 크기 조절로 확인
동영상 지원	별도 탭 이동	그리드 내 인라인 재생
테마 선택	없음	7가지 테마

그리드를 열자마자 처음 할 일은 셀 크기 슬라이더를 올리는 것입니다. 메뉴판처럼 텍스트가 포함된 사진은 셀이 클수록 정보 가치가 높아집니다. 반대로 분위기 전체를 빠르게 훑을 때는 셀을 줄여 더 많은 사진을 한 화면에 담는 방식이 효율적입니다.

키보드 방향키로 사진을 끊김 없이 탐색하는 방법은?

전체화면 갤러리에서 마우스 없이 키보드만으로 모든 탐색이 가능합니다. 작동 방식은 단순합니다.

← →: 그리드 내 사진 좌우 이동
↑ ↓: 행 단위 위아래 이동
Enter: 선택한 사진 상세 보기 열기
Esc: 상세 보기 닫기 또는 갤러리 종료
Alt+Shift+F: 갤러리 빠른 실행 단축키

이 구조가 기존 UI와 다른 점은 컨텍스트를 잃지 않는다는 것입니다. 사진 하나를 Enter로 크게 보다가 Esc로 닫으면, 그리드에서 방금 있던 위치로 정확히 돌아옵니다. 기본 UI에서 사진을 확대하면 스크롤 위치가 초기화되는 것과 다릅니다.

두 식당을 비교할 때 이 흐름은 실질적으로 달라집니다. A 식당 그리드를 키보드로 빠르게 훑고, B 식당 탭으로 전환해 같은 방식으로 탐색하면 스크롤 리셋 없이 동일한 탐색 패턴을 유지할 수 있습니다. 비교 기준이 기억이 아니라 탐색 동작 자체에 실립니다.

동영상이 포함된 경우도 같은 그리드 안에서 처리됩니다. 별도 탭으로 이동하거나 외부 플레이어가 열리지 않습니다.

사용자 데이터를 수집하지 않는 원칙과 작동 구조

브라우저 확장 프로그램은 설치 단계에서 어떤 권한을 요청하는지가 가장 중요한 신뢰 지표입니다. 네이버 지도 와이드 갤러리는 네이버 지도 도메인(map.naver.com)에만 접근합니다. 다른 사이트의 데이터를 읽거나 쓰지 않고, 방문 기록을 수집하지 않으며, 외부 서버로 어떤 데이터도 전송하지 않습니다.

작동 방식은 로컬 스크립트 실행입니다. 확장 프로그램은 네이버 지도 페이지가 이미 불러온 사진 데이터를 화면에 다르게 렌더링합니다. 새로운 네트워크 요청을 만들거나 제3자 서비스와 통신하지 않습니다. 그리드 레이아웃, 테마, 셀 크기 설정은 브라우저 로컬 스토리지에 저장되므로 사용자 계정이나 서버 연동 없이 유지됩니다.

아래는 권한 범위를 정리한 표입니다.

항목	상태
접근 도메인	`map.naver.com` 단독
다른 사이트 접근	없음
사용자 데이터 수집	없음
외부 서버 전송	없음
설정 저장 위치	브라우저 로컬 스토리지
사용자 계정 필요 여부	불필요

확장 프로그램을 선택할 때 '권한 최소화'는 실용적인 기준입니다. 기능과 무관한 권한을 요청하는 확장 프로그램은 설령 유용해도 불필요한 리스크를 동반합니다. 네이버 지도 와이드 갤러리의 권한 구조는 기능이 필요로 하는 최소 범위만 요청합니다. 이 점은 설치 전 Chrome 웹 스토어의 권한 상세 화면에서 직접 확인할 수 있습니다.

자주 묻는 질문

네이버 지도 와이드 갤러리는 어떤 브라우저에서 작동하나요?

Chrome 기반 브라우저에서 작동합니다. Chrome 웹 스토어에서 설치하면 되며, Chromium 기반의 Edge나 Whale 같은 브라우저에서도 Chrome 확장 프로그램 설치를 허용하는 설정을 켜면 사용할 수 있습니다. Firefox는 현재 지원하지 않습니다.

설치 후 기존 네이버 지도 사용 방식이 바뀌나요?

사진 탭에 초록 버튼 하나가 추가될 뿐, 나머지 네이버 지도 UI는 그대로입니다. 버튼을 클릭하지 않으면 기존 방식으로 탐색합니다. 와이드 갤러리를 켜는 것은 사용자가 선택하는 행동이고, 기본 상태에서는 어떤 변화도 없습니다.

그리드에서 사진 종류를 필터링할 수 있나요?

사진 탭이 기본으로 열려 있는 상태에서 갤러리를 실행하면 해당 탭의 사진 전체가 그리드에 표시됩니다. 네이버 지도가 메뉴, 내부, 외부 등 카테고리를 구분해 제공하는 경우, 해당 카테고리 탭을 먼저 선택한 뒤 갤러리를 실행하면 그 범위 안에서만 그리드가 열립니다.

동영상도 그리드에서 볼 수 있나요?

그리드 안에서 동영상 섬네일이 사진과 함께 표시되고, 선택하면 별도 탭 이동 없이 인라인으로 재생됩니다. 동영상이 포함된 식당 페이지라면 사진과 동영상을 같은 탐색 흐름 안에서 볼 수 있습니다.

확장 프로그램이 내 네이버 계정 정보에 접근하나요?

접근하지 않습니다. 확장 프로그램은 map.naver.com 페이지에서 이미 렌더링된 사진 데이터를 화면에 다르게 표시할 뿐입니다. 로그인 정보, 즐겨찾기, 검색 기록 같은 계정 데이터는 읽지 않습니다.

맛집을 고를 때 사진 탐색이 번거로운 이유는 데이터 부족이 아니라 보는 방식의 문제입니다. 네이버 지도 와이드 갤러리는 이미 지도에 올라온 사진을 큰 그리드로 펼치고, 키보드로 끊김 없이 탐색하도록 해줍니다. 설치는 Chrome 웹 스토어에서 가능하고, 권한은 map.naver.com 단독입니다. 지금 설치하고 다음 맛집 탐색에서 바로 써보세요.

업무 생산성 도구 보안 검증: 로컬 처리 아키텍처가 기준이 되는 이유

이종현 — Tue, 11 Aug 2026 04:53:35 +0000

스크린샷이 서버로 나가는 순간, 그 파일은 통제 범위 밖이다. Manual Maker는 녹화 중 캡처한 스크린샷을 외부 서버로 전송하지 않고 로컬 기기 내에서만 처리해 매뉴얼 초안을 생성한다. 이 글은 그 메커니즘이 어떻게 작동하는지, 그리고 보안성 높은 업무 생산성 도구를 고를 때 어떤 기준으로 판단해야 하는지를 다룬다.

TL;DR

업무 생산성 도구 도입 전 스크린샷·입력값·행동 로그 각각의 전송 경로를 반드시 확인한다.
로컬 처리 방식과 마스킹 기반 클라우드 처리 방식은 설계 철학이 다르며, 어느 쪽이 조직 보안 정책에 맞는지 먼저 판단해야 한다.
Manual Maker는 스크린샷을 서버로 보내지 않고, 행동 로그와 Document Parse 맥락만 생성 시점에 전송한다.
비밀번호·주민번호형 입력값은 자동으로 마스킹·블러 처리된다.

업무 생산성 도구 도입 시 보안 담당자가 필수로 검증해야 할 항목

업무 생산성 도구를 도입할 때 보안 담당자가 가장 먼저 확인해야 할 것은 "데이터가 어디에 머무는가"다. 도구 카테고리를 불문하고 아래 세 가지 경로를 명확히 파악해야 한다.

스크린샷 또는 화면 이미지
- 로컬 기기에만 저장되는지, 외부 서버로 업로드되는지 구분한다.
- 업로드된다면 저장 기간, 암호화 방식, 제3자 공유 여부를 서비스 약관과 개인정보처리방침에서 직접 확인해야 한다.
입력값 및 텍스트 로그
- 사용자가 화면에 입력하는 텍스트가 어느 시점에 어느 서버로 전달되는지 확인한다.
- 비밀번호 필드, 주민등록번호형 입력, 신용카드 번호 등 민감 정보가 로그에 포함될 가능성이 있다.
행동 로그(클릭·스크롤·네비게이션 이벤트)
- 행동 로그 자체가 업무 흐름의 상세 기록이다. 실시간 스트리밍인지 배치 전송인지, 그리고 생성 완료 후 삭제 정책이 있는지 확인한다.

조직의 보안 정책이 강할수록 이 세 경로 중 하나라도 불명확하면 도입을 보류하는 게 맞다. 도구 공급사가 위 세 항목을 아키텍처 문서나 공개 FAQ에서 명시하지 않는다면, 별도 요청 없이는 알기 어렵다.

로컬 기반 데이터 처리와 마스킹 텍스트 전송 방식의 차이는 무엇인가?

두 접근법 모두 "민감 정보를 보호한다"는 목표를 공유하지만, 메커니즘이 다르다.

로컬 처리 방식

스크린샷을 포함한 이미지 파일이 기기 밖으로 나가지 않는다.
초안 생성에 필요한 맥락은 DOM 구조, 클릭 좌표, 요소 레이블 같은 구조화된 텍스트 형태로만 서버에 전달된다.
스크린샷은 로컬 스토리지(IndexedDB 등)에 저장되고, 사용자가 직접 열람하거나 ZIP으로 내보낼 때만 외부로 이동한다.

마스킹 기반 클라우드 처리 방식

화면 이미지 자체는 서버로 전송하되, 민감 필드(비밀번호, 주민번호 등)는 캡처 전 블러 또는 마스킹 처리한다.
처리 정확도가 높지만, 이미지가 외부 인프라를 경유한다는 사실 자체가 특정 규제 환경(금융, 의료, 공공)에서 허용되지 않을 수 있다.
서버 측 OCR이나 AI 처리가 마스킹 이후에도 잔여 데이터를 분석할 가능성을 배제할 수 없다.

어느 방식이 "더 낫다"는 절대 기준은 없다. 조직의 데이터 분류 정책과 규제 요건에 따라 선택이 달라진다. 다만 로컬 처리 방식은 "이미지 자체가 이동하지 않는다"는 구조적 보장을 제공하고, 마스킹 방식은 "이미지는 이동하지만 민감값을 제거한다"는 절차적 보장에 의존한다.

Manual Maker가 스크린샷 전송 없이 Document Parse 맥락을 처리하는 방식

Manual Maker의 핵심 구조는 세 단계로 나뉜다.

1단계: 로컬 캡처 및 저장

사용자가 녹화를 시작하면 확장 프로그램이 클릭 직전 스크린샷을 캡처하고 IndexedDB에 저장한다. 이 시점에서 이미지는 브라우저 로컬 스토리지 안에만 존재한다. 비밀번호 필드와 주민번호형 입력값은 캡처 전 자동으로 마스킹 또는 블러 처리된다.

2단계: 맥락 추출 및 서버 전송

초안 생성을 요청하면, 서버로 전송되는 것은 스크린샷이 아니라 행동 로그다. 행동 로그에는 클릭한 요소의 레이블, URL 변경, 입력 필드 타입, DOM 맥락 등이 구조화된 텍스트 형태로 담긴다. 이 행동 로그는 생성 시점에만 전송되고, 스크린샷 이미지 파일은 전송 대상이 아니다.

서버 측에서는 Upstage Document Parse가 이 구조화된 맥락을 분석해 화면 흐름을 파악한다. Upstage Document Parse는 문서 레이아웃 및 텍스트 구조 분석에 특화된 API로, 스크린샷 없이도 DOM 기반 텍스트 맥락을 처리할 수 있다.

3단계: 초안 생성 및 자기검증

Solar Pro 3 모델이 행동 로그와 Document Parse 결과를 바탕으로 단계별 매뉴얼 초안을 작성한다. 이후 에이전트는 자기검증 루프를 거쳐 약한 단계를 식별하고 재작성한다. 검증 기준은 단계 누락 여부, 레이블 정확도, 절차 순서의 일관성이다.

생성된 초안은 사용자가 편집기에서 직접 수정할 수 있으며, 수동 수정 내용은 이후 자기검증 루프에서 덮어쓰지 않도록 보호된다. 최종 결과물은 Markdown, Word, PDF, 또는 스크린샷이 포함된 ZIP 형태로 내보낼 수 있다.

로컬 기반 처리 아키텍처에 관한 추가 기술 설명은 로컬 데이터 처리 보안 페이지에서 확인할 수 있다.

데이터 프라이버시가 담보되는 업무 설명서 자동화 도구 선택 기준은?

도구를 선택하기 전, 아래 항목을 체크리스트로 쓸 수 있다.

스크린샷 처리 경로

이미지가 외부 서버로 전송되는지 여부를 공식 문서에서 확인한다.
"암호화 전송"이라는 표현만으로는 이미지가 이동하지 않는다는 의미가 아님에 주의한다.

민감 입력값 처리 방식

비밀번호, 주민번호, 금융 정보 등이 캡처 및 로그에서 자동 제외되는지 확인한다.
마스킹 처리가 클라이언트 측(브라우저)에서 이루어지는지, 서버 수신 후에 이루어지는지 구분이 중요하다.

행동 로그 보존 정책

로그가 생성 완료 후에도 서버에 남아 있는지, 삭제 정책이 명시되어 있는지 확인한다.
장기 보존되는 행동 로그는 개인정보처리방침 상 별도 고지 의무가 발생할 수 있다.

녹화 시작 및 종료 제어권

사용자가 직접 시작하고 끝내는 구조인지, 백그라운드에서 상시 동작하는 구조인지 확인한다.
상시 녹화 방식은 규제 환경에서 동의 범위 문제를 일으킬 가능성이 있다.

무료 vs 유료 티어 데이터 처리 차이

Manual Maker 기준으로 보면:
- 무료 티어: 매뉴얼 10페이지까지 생성 가능, 로컬 처리 아키텍처 동일하게 적용
- Pro 티어: 10페이지 초과 시 필요, 일회성 평생 라이선스 방식, 처리 메커니즘은 동일

무료와 유료 모두 스크린샷 미전송 원칙은 동일하게 유지된다. 페이지 수 제한만 다르다.

자주 묻는 질문

스크린샷이 서버로 전송되지 않으면 초안 품질이 낮아지지 않나요?

그렇지 않다. Manual Maker는 스크린샷 대신 DOM 맥락과 행동 로그를 Upstage Document Parse로 분석해 절차를 재구성한다. 화면 이미지 없이도 클릭 요소의 레이블, 순서, URL 변경 등 구조 정보는 충분히 추출된다. 내보낼 때 스크린샷을 포함하고 싶다면 로컬에서 ZIP에 함께 패키징할 수 있다.

비밀번호가 입력된 화면도 녹화하면 로그에 남나요?

비밀번호 필드와 주민번호형 입력값은 캡처 전 자동으로 마스킹·블러 처리된다. 행동 로그에도 해당 필드의 값이 아닌 필드 타입 정보만 기록된다. 민감 값 자체는 로컬 스토리지와 서버 전송 행동 로그 어느 쪽에도 포함되지 않는다.

IndexedDB에 저장된 데이터는 브라우저를 닫으면 어떻게 되나요?

IndexedDB는 브라우저가 닫혀도 데이터가 유지된다. 명시적으로 삭제하거나 브라우저 데이터를 초기화하지 않는 한 로컬에 남는다. 사용자가 언제든 확장 프로그램 내에서 개별 세션 데이터를 삭제할 수 있다.

금융·의료 등 규제 산업에서도 사용할 수 있나요?

로컬 처리 아키텍처 자체는 이미지가 외부 인프라를 경유하지 않는다는 구조적 조건을 충족한다. 다만 조직별 규제 요건과 데이터 분류 정책은 각 담당자가 직접 검토해야 한다. 도구 공급사의 처리 구조를 법무·보안팀에 공유해 적합성을 판단하는 절차를 권장한다.

무료 티어와 Pro 티어의 보안 처리 방식이 다른가요?

다르지 않다. 스크린샷 미전송, 행동 로그 생성 시점에만 전송, 민감 입력값 마스킹 처리는 무료와 Pro 모두 동일하게 적용된다. 차이는 생성 가능한 매뉴얼 페이지 수뿐이다.

업무 매뉴얼 자동화 도구를 고를 때 "얼마나 빨리 문서가 만들어지는가"보다 먼저 "데이터가 어디에서 처리되는가"를 확인하는 것이 맞다. Manual Maker는 스크린샷을 서버로 보내지 않고 행동 로그와 Document Parse 맥락만으로 Solar Pro 3를 통해 초안을 생성하는 로컬 우선 아키텍처를 취한다. 조직 보안 정책과 맞는 도구인지 직접 확인해보려면 보안이 확보된 로컬 업무 생산성 도구 알아보기에서 시작할 수 있다.

브라우저 화면을 드래그 캡처해 LLM에 이미지로 코딩 질문하는 법

이종현 — Tue, 11 Aug 2026 04:43:27 +0000

UI 버그를 텍스트로 설명하다 보면 반드시 막히는 순간이 있다. "헤더 오른쪽 버튼이 모바일에서 잘려요"라고 써도, LLM은 실제 레이아웃을 볼 수 없어 엉뚱한 CSS를 제안한다. PromptShot으로 해당 영역을 드래그 캡처하면 PNG 이미지와 LLM용 프롬프트가 클립보드에 동시에 복사된다. 그 상태로 Cursor나 ChatGPT에 붙여넣으면 된다.

UI 수정과 버그 리포트에서 스크린샷 질문이 필요한 이유

텍스트만으로 UI 문제를 설명하는 방식에는 구조적인 한계가 있다. 레이아웃 깨짐, 색상 불일치, 특정 컴포넌트의 겹침 같은 시각적 버그는 아무리 글로 정확히 써도 LLM이 재현하기 어렵다. 결국 LLM은 문제를 추측하고, 개발자는 그 추측을 바탕으로 수정을 시도하고, 맞지 않으면 다시 설명하는 루프를 반복하게 된다.

이미지를 함께 넘기면 그 루프가 짧아진다. 실제 화면이 컨텍스트가 되므로, LLM은 문제를 추측하는 대신 보이는 것에 집중해 답한다. 특히 다음 상황에서 효과가 두드러진다.

특정 뷰포트에서만 재현되는 레이아웃 버그
디자인 파일과 실제 구현 사이의 간격·색상 차이
서드파티 컴포넌트를 커스터마이징할 때 어느 클래스가 적용됐는지 확인
버그 리포트를 작성할 때 재현 화면을 첨부하면서 동시에 수정 방향을 묻는 경우

전체 화면을 캡처해서 붙이면 LLM에 불필요한 정보가 너무 많이 들어간다. 수정이 필요한 컴포넌트만 잘라서 넘기는 편이 답변 품질이 높다. 그게 영역 드래그 캡처를 쓰는 이유다.

PromptShot으로 영역을 드래그해 이미지와 프롬프트를 동시에 복사하는 과정

PromptShot은 Chrome 확장 프로그램으로, 설치 후 브라우저 위에서 직접 동작한다. 외부 앱 전환 없이 캡처부터 LLM 붙여넣기까지 한 흐름으로 이어진다.

1단계: 확장 프로그램 설치

Chrome 웹 스토어에서 PromptShot을 설치한다. 설치가 완료되면 주소창 오른쪽 퍼즐 아이콘 영역에 PromptShot 아이콘이 생긴다.

2단계: 영역 캡처 시작 (Alt+Shift+S)

캡처하고 싶은 페이지에서 Alt+Shift+S를 누른다. 커서가 십자선으로 바뀌고 드래그 모드가 활성화된다. 마우스를 드래그해 캡처할 영역을 선택하면 된다. 버튼 하나, 카드 컴포넌트 하나처럼 정확히 문제가 있는 부분만 잡는 것이 핵심이다.

3단계: 캡처 형식 선택 (Alt+1 또는 Alt+2)

영역을 드래그한 뒤 두 가지 형식 중 하나를 고른다.

단축키	복사 내용	적합한 상황
`Alt+1`	PNG 이미지만 클립보드에 복사	이미지를 별도 파일로 저장하거나 GitHub 이슈에 첨부할 때
`Alt+2`	LLM용 프롬프트 텍스트 + PNG 이미지를 함께 복사	Cursor, ChatGPT, Claude에 바로 붙여넣을 때

AI 코딩 질문 목적이라면 Alt+2가 기본이다. 화면에 보이는 영역 이미지와 함께 "이 화면의 UI를 분석해 주세요"처럼 미리 구성된 프롬프트 텍스트가 클립보드에 올라간다. LLM 창을 열고 Ctrl+V만 누르면 이미지와 질문이 동시에 붙여넣어진다.

4단계: LLM에 붙여넣고 추가 질문 작성

Cursor의 채팅 패널, ChatGPT 입력창, Claude 대화창 어디든 Ctrl+V로 붙여넣은 다음 구체적인 질문을 이어 쓴다. 예를 들어 이런 식이다.

[붙여넣은 이미지]
[자동 생성된 프롬프트]

추가 질문: 이 버튼이 모바일 375px 뷰포트에서 오른쪽으로 잘리는 이유와
수정 방법을 알려줘. 현재 Tailwind CSS를 쓰고 있어.

이미지가 컨텍스트를 담당하므로 "왼쪽 위에 있는 파란 버튼"처럼 위치를 글로 설명할 필요가 없다. LLM이 직접 본다.

효율적인 이미지 기반 코딩 질문 흐름에 대한 추가 가이드는 AI 코딩 프롬프트 작성법 에서 확인할 수 있다.

브라우저 로컬에서 처리가 완결되는 이유가 중요한가?

캡처된 이미지와 생성된 프롬프트는 PromptShot 서버로 전송되지 않는다. 모든 처리는 브라우저 내부에서 로컬로 이뤄진다. 페이지 콘텐츠, DOM 구조, 입력한 텍스트 중 어느 것도 외부로 나가지 않는다.

이 구조가 특히 중요한 경우가 있다.

사내 관리 페이지나 스테이징 환경처럼 외부에 공개되면 안 되는 화면을 캡처할 때
고객 데이터가 일부 보이는 대시보드에서 레이아웃 버그를 수정할 때
회사 정책상 화면 내용을 외부 서비스에 전송하기 어려운 환경

클립보드에 올라간 이미지는 사용자가 직접 LLM에 붙여넣는 순간에만 이동한다. 어디에 붙여넣을지는 사용자가 결정한다.

도구가 중간에서 데이터를 가져가지 않는다는 점은, 사내 보안 정책이 엄격한 팀에서도 부담 없이 쓸 수 있는 조건이 된다. 이 부분은 확장 프로그램을 선택할 때 꽤 현실적인 기준이다.

화면 어노테이션을 추가해 질문 정밀도를 높이는 방법

캡처한 이미지 위에 화살표, 형광펜, 텍스트를 얹어 문제 지점을 직접 표시할 수 있다. 별도 이미지 편집기 없이 캡처 직후 PromptShot 내 편집 화면에서 처리한다.

어노테이션이 유용한 시나리오는 분명하다. 여러 컴포넌트가 겹쳐 있거나, 스크롤 위치에 따라 요소가 달라지는 페이지라면 "여기"가 어디인지 이미지만으로 불분명할 수 있다. 화살표 하나로 그 애매함이 사라진다.

버그 리포트 용도라면 형광펜으로 문제 영역을 칠하고 LLM에 넘기면, 수정 제안을 받은 뒤 같은 이미지를 GitHub 이슈에 그대로 첨부할 수 있다. 캡처와 리포팅이 한 흐름에서 해결된다.

자주 묻는 질문

PromptShot이 캡처한 이미지는 어디에 저장되나요?

이미지는 서버에 업로드되지 않는다. 캡처 즉시 브라우저 클립보드에만 올라가고, 이후에는 사용자가 붙여넣는 위치로 이동한다. PromptShot 측에는 어떤 데이터도 전달되지 않는다.

전체 페이지 캡처와 영역 캡처 중 어느 쪽이 LLM 답변 품질에 유리한가요?

UI 수정 목적이라면 영역 캡처가 낫다. LLM에 넘어가는 이미지가 작고 명확할수록 관련 없는 요소에서 오는 노이즈가 줄어 답변이 집중된다. 전체 화면은 페이지 전체 구조를 파악해야 할 때 유효하다.

Cursor, ChatGPT, Claude 중 어떤 LLM과 함께 써야 하나요?

이미지를 지원하는 LLM이라면 어디든 동작한다. Cursor 채팅, ChatGPT-4o, Claude 3.5 Sonnet 이상에서 이미지 붙여넣기가 가능하다. 클립보드에서 Ctrl+V로 붙여넣으면 이미지와 프롬프트 텍스트가 함께 입력된다.

단축키를 커스터마이징할 수 있나요?

현재 기본 단축키는 Alt+Shift+S로 캡처 시작, Alt+1은 이미지만, Alt+2는 이미지와 프롬프트 동시 복사다. Chrome 확장 프로그램 단축키 설정 페이지(chrome://extensions/shortcuts)에서 변경할 수 있다.

사내 스테이징 환경처럼 인트라넷 페이지에서도 동작하나요?

동작한다. PromptShot은 브라우저에서 렌더링된 화면을 캡처하는 방식이므로, 공개 URL 여부와 관계없이 현재 탭에 로드된 페이지라면 어느 환경에서든 쓸 수 있다.

영역 드래그로 문제 컴포넌트만 잘라 LLM에 넘기는 방식은, 텍스트로 설명하는 루프를 줄이는 가장 직접적인 방법이다. 캡처부터 붙여넣기까지 모든 처리가 브라우저 로컬에서 완결되므로 민감한 화면도 부담 없이 쓸 수 있다. Chrome에 추가하고 다음 UI 버그 리포트에 바로 적용해 보자.