Overlay Image Tool

UI 개발 시 디자인 시안을 페이지 위에 겹쳐 놓고 디자인과 일치하는지 비교하고 확인할 수 있는 도구입니다.

사용법 1 : 확장 프로그램을 클릭해서 popup 안의 upload를 사용하거나 미리보기 영역에 붙여넣기를 하고 Generate 버튼을 누르면 됩니다.

사용법 2 : Enable Directly Paste: 이 옵션을 체크하면 클립보드의 이미지를 브라우저에 직접 붙여넣을 수 있습니다. 이 경우에는 이미지의 위치를 방향키 키보드로 이동할 수 있습니다.

이후에 개발자 도구를 통해서 html element의 css를 수정합니다.

Tip: Figma를 사용한다면 오브젝트를 선택하고 Ctrl + Shift + C를 사용하여 클립보드로 이미지를 복사한 다음, 브라우저에 Ctrl + V로 현재 탭에 이미지를 붙여 넣을 수 있습니다.

Compare images by overlaying them on websites.
A tool that allows you to overlay design images on a website to compare and check if it matches the design when creating a website.

1. Enable Directly Paste: When this option is checked, you can directly paste an image from the clipboard into the current tab. It can be used with basic options, and once pasted, the image's position can be adjusted using the arrow keys on the keyboard.

2. Choose File: You can select a downloaded image and overlay it on the current tab. Position and size can be adjusted using option settings.

3. Without selecting an image, you can copy it to the clipboard and then paste it into the extension's popup window. Afterward, you can overlay it on the current tab.

4. After adding an image, you can fine-tune its position using the arrow keys on the keyboard. By default, it moves by 1px, and you can combine it with the Shift or Ctrl key for more precise adjustments.

Tip: You can copy an image to the clipboard from Figma using Ctrl + Shift + C, and then paste the image into the current tab by Ctrl + V