손으로 그린 사용자 흐름도

UX 리서치·디자인 · 손·소품 · uxlab-006 · 가로·세로 마스터 2장에서 11종

생성형 AI로 만든 이미지

서브 비주얼subvisual · 1920×520 · WebP 42KB 크게 보기

가로 마스터에서 8종

hero

slide

subvisual

content-wide

content

card

square

세로 마스터에서 3종

portrait

mobile-hero

side-banner

텍스트 여백

왼쪽

세로판은 위쪽 여백에 문구를 얹습니다.

밝기

밝음

검은 글씨를 쓰세요.

주요 색

D7D4D2BEB9B66E504092857F

초점 (주인공 위치)

object-position: 75% 50%

화면 비율이 바뀌어도 이 자리가 남도록 잘라 두었습니다.

대체 텍스트 초안

KO손으로 그린 사용자 흐름도 장면

ENTop-down photograph of a hand drawing simple boxes connected by lines with a black marker on large white paper

이미지 받기

둘러보기

선택한 크기 서브 비주얼 subvisual · 1920×520 · WebP 42KB

이용 권리 · 모든 등급 같음

웹사이트·SNS·인쇄물 등 상업 용도에 쓸 수 있습니다.
이미지 자체를 다시 팔거나 묶어서 배포할 수 없습니다.
나온 사람을 실존 인물처럼 쓸 수 없습니다.

이용 권리 전문 보기

이 이미지가 들어간 홈페이지 예시

홈페이지 첫 화면에 넣은 모습입니다. 데스크톱에는 hero, 휴대폰에는 mobile-hero가 자동으로 바뀝니다.

웹즐 고객

붙여 넣으면 끝나는 코드

데스크톱과 휴대폰에 다른 이미지를 보여 주고, 크기를 미리 적어 화면 밀림을 막습니다. 대체 텍스트와 초점 위치도 들어 있습니다.

무료 회원은 고른 크기 하나의 <img> 코드를 받습니다.

picture.html

<picture>
  <source media="(max-width: 767px)"
          srcset="uxlab-006-mobile-hero-1080x1920.webp"
          width="1080" height="1920">
  <img src="uxlab-006-hero-1920x1080.webp"
       srcset="uxlab-006-hero-1920x1080.webp 1x,
               uxlab-006-hero-2880x1620.webp 2x"
       width="1920" height="1080"
       style="object-fit: cover; object-position: 75% 50%"
       alt="손으로 그린 사용자 흐름도 장면"
       fetchpriority="high">
</picture>