이미지 픽셀 좌표 추출하는 방법 (x, y)

HMI, 임베디드 UI, 터치스크린 인터페이스 개발 시 이미지의 특정 지점이 정확히 몇 픽셀 위치인지 파악해야 할 때가 많습니다. 이미지를 측정 도구 없이 눈대중으로 추측하거나, Photoshop을 매번 열기엔 번거롭습니다. 이 글에서는 이미지를 브라우저에 끌어놓고 클릭만 해도 픽셀 좌표(x, y)를 즉시 추출하는 방법을 정리합니다. 이미지는 서버로 전송되지 않습니다.

이런 분께 필요해요

• HMI 또는 임베디드 UI 화면 레이아웃의 버튼·요소 좌표를 코드에 입력해야 할 때
• 디자인 시안에서 특정 위치의 픽셀 좌표를 빠르게 뽑아야 할 때
• 터치 좌표, 클릭 영역 정의를 위해 이미지 기준 x·y 위치를 확인할 때
• Photoshop 없이 브라우저에서 바로 좌표를 읽고 싶을 때

픽셀 좌표 추출하는 단계

1. 이미지 열기좌표를 추출할 이미지를 화면에 드래그&드롭하거나 선택해 불러옵니다. 이미지는 서버로 전송되지 않으며, 브라우저 안에서만 처리됩니다.
2. 클릭으로 좌표 찍기이미지 위 원하는 위치를 클릭하면 해당 픽셀의 x, y 좌표가 즉시 표시됩니다. 여러 점을 순서대로 찍어 목록으로 쌓을 수 있습니다.
3. 방향키로 미세 조정1px 단위 정밀 조정이 필요할 때는 키보드 방향키로 좌표를 조금씩 이동합니다. 세밀한 위치 지정이 가능합니다.
4. 원하는 포맷으로 복사좌표값, #define 매크로, 함수 호출 형태 중 코드에 바로 붙여넣기 좋은 포맷을 선택해 복사합니다.

코드 포맷이란

임베디드 C, MCU 펌웨어, HMI 소프트웨어 개발에서는 좌표를 코드에 직접 넣는 경우가 많습니다. 복사 포맷을 미리 선택해 두면 추출한 좌표를 별도 가공 없이 곧바로 붙여넣을 수 있습니다.

• 좌표값 — 120, 45 형태의 단순 숫자 쌍
• #define 매크로 — #define BTN_OK_X 120 / #define BTN_OK_Y 45
• 함수 호출 — draw_button(120, 45) 같은 함수 인자 형태

좌표 기준과 정밀도

좌표 기준점은 이미지의 좌상단 (0, 0)입니다. x는 오른쪽, y는 아래쪽으로 증가합니다. 이미지를 확대한 상태에서 클릭해도 원본 이미지 크기 기준의 실제 픽셀 좌표가 계산되므로 정밀도가 유지됩니다.

자주 묻는 질문