화면 자리와 번호 주석 4개

랜딩 화면, 상세 화면, 광고 지면의 어느 부분을 고칠지 짚을 때. 왼쪽 화면 자리 위의 번호가 오른쪽 설명과 이어짐. 주석 3~4개, 제목 1줄과 설명 1~2줄. 값 바꾸는 법: 화면 자리 .scr 안의 회색 블록은 실제 화면 구성에 맞게 위치만 조정하거나 캡처 그림 자리로 교체. 핀 위치는 b.pin 의 style(left, top, 화면 자리 왼쪽 위 기준 px). 오른쪽 li 의 번호와 같은 숫자를 씀. 가장 먼저 고칠 곳 하나에 hot(핀과 li 둘 다).

사용성 점검 보고서와 디자인 검수 문서의 번호 주석(화면 위 번호 핀과 옆 설명 목록을 같은 번호로 연결). 글머리표 대안 정리 글(Visme 'bullet points presentation' https://visme.co/blog/bullet-points-presentation/ , SlideGenius '3 Bullet Point Alternatives' https://www.slidegenius.com/blog/3-bullet-point-alternatives-that-will-improve-your-deck , Maurizio La Cava FAQ https://www.mauriziolacava.com/en/faq/creative-alternatives-to-using-bullet-points-on-a-slide/)의 '목록을 구조로 바꾼다'는 방식 참고. 구성 방식만 참고, 그림과 코드는 직접 제작.

<div class="dk dk-tanno">
  <div class="scr mock">
    <div class="bar"><i></i><i></i><i></i></div>
    <div class="img"></div>
    <div class="inf"><i class="w1"></i><i class="w2"></i><i class="w3"></i><i class="btn"></i></div>
    <div class="rv"><i></i><i></i><i></i></div>
    <b class="pin hot" style="left:300px;top:54px">1</b><b class="pin" style="left:104px;top:150px">2</b><b class="pin" style="left:352px;top:206px">3</b><b class="pin" style="left:40px;top:296px">4</b>
  </div>
  <ol>
    <li class="hot"><b class="pin">1</b><div><h3>첫 문장</h3><p>브랜드 소개 대신 광고 문구와 같은 문장을 첫 줄에 배치</p></div></li>
    <li><b class="pin">2</b><div><h3>대표 사진</h3><p>연출 사진보다 구성품이 모두 보이는 사진을 먼저</p></div></li>
    <li><b class="pin">3</b><div><h3>구매 버튼</h3><p>스크롤 없이 보이는 위치로 올리고 문구를 한 가지로 통일</p></div></li>
    <li><b class="pin">4</b><div><h3>후기 구역</h3><p>최근 3개월 후기를 위로, 사진 후기를 먼저 노출</p></div></li>
  </ol>
</div>

.dk-tanno{display:grid;grid-template-columns:520px minmax(0,1fr);gap:56px;align-items:center}
.dk-tanno .scr{position:relative;height:372px;border:1px solid var(--line2);border-radius:var(--r);background:var(--card);padding:16px}
.dk-tanno .scr i{display:block;background:var(--soft);border-radius:4px}
.dk-tanno .bar{display:flex;gap:8px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.dk-tanno .bar i{width:56px;height:10px}
.dk-tanno .bar i:first-child{width:88px;background:var(--g1)}
.dk-tanno .img{position:absolute;left:16px;top:56px;width:230px;height:200px;border-radius:6px;background:var(--soft)}
.dk-tanno .inf{position:absolute;left:266px;top:56px;right:16px;display:flex;flex-direction:column;gap:12px}
.dk-tanno .inf .w1{height:20px;width:100%;background:var(--g1)}
.dk-tanno .inf .w2{height:10px;width:80%}
.dk-tanno .inf .w3{height:10px;width:60%}
.dk-tanno .inf .btn{height:40px;width:100%;margin-top:76px;border-radius:6px;background:var(--g2)}
.dk-tanno .rv{position:absolute;left:16px;right:16px;top:276px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.dk-tanno .rv i{height:78px;border-radius:6px}
.dk-tanno .pin{display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--card);font-size:var(--f-sm);font-weight:700;font-variant-numeric:tabular-nums}
.dk-tanno .scr .pin{position:absolute;box-shadow:0 0 0 3px var(--card)}
.dk-tanno .pin.hot,.dk-tanno li.hot .pin{background:var(--ac)}
.dk-tanno ol{list-style:none;margin:0;padding:0}
.dk-tanno li{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:start;padding:17px 0;border-bottom:1px solid var(--line)}
.dk-tanno li:first-child{border-top:1px solid var(--line2)}
.dk-tanno li:last-child{border-bottom-color:var(--line2)}
.dk-tanno h3{margin:0;font-size:var(--f-lg);font-weight:700;line-height:1.4}
.dk-tanno li p{margin:2px 0 0;font-size:var(--f-body);color:var(--ink2)}