인스타그램 프로필 격자와 상품 태그 게시물

D-목업-인스타그램-프로필격자

언제 쓰는가

오가닉 운영·쇼핑 태그 제안에서 프로필 9칸 구성과 상품 태그 게시물을 나란히 보여줄 때. 화면 2개 고정, 격자 9칸(3행), 태그 1개. 설명 4행. 값 바꾸는 법: 견본 안의 브랜드명·문구와 오른쪽 설명만 교체. 사진·영상 자리는 회색 또는 어두운 상자 유지. 금액은 넣지 않고 가격 자리는 회색 막대. 격자 칸의 글자는 행 역할 표시. 실제 제안에서는 행 이름만 바꿈. 태그 말풍선은 1개.

참고

인스타그램 프로필·게시물 화면, 메타 비즈니스 도움말 인스타그램 쇼핑 자격 요건과 상품 태그 안내(facebook.com/business/help). 화면 구성과 규격만 참고, HTML·CSS 직접 제작. 로고·캡처 이미지 미사용.

조각

<div class="dk dk-migpg">
  <div class="lf">
    <div class="fr">
      <div class="fc"><p class="fl">프로필 격자</p><div class="ph mock n"><div class="sb"><span>9:41</span><i></i></div><p class="t12 bd" style="padding:2px 12px 6px">supgilfit</p>
<div class="fx" style="padding:0 12px;gap:4px"><span class="av" style="width:44px;height:44px"></span><span class="st"><b>128</b>게시물</span><span class="st"><b>1.2만</b>팔로워</span><span class="st"><b>86</b>팔로잉</span></div>
<div class="pd col" style="gap:1px;padding-bottom:6px"><p class="t10 bd">숲길핏</p><p class="t10" style="color:#444">집 안 한 평에서 시작하는 필라테스</p></div>
<div class="fx" style="padding:0 12px 8px;gap:5px"><span class="bt on">팔로우</span><span class="bt">메시지</span><span class="bt">숍 보기</span></div>
<div class="gr"><div class="g" style="">정체성</div><div class="g" style="">정체성</div><div class="g" style="">정체성</div><div class="g" style="">생활 장면</div><div class="g" style="">생활 장면</div><div class="g" style="">생활 장면</div><div class="g" style="">제품</div><div class="g" style="">제품</div><div class="g" style="">제품</div></div></div></div>
      <div class="fc"><p class="fl">상품 태그 게시물</p><div class="ph mock n"><div class="sb"><span>9:41</span><i></i></div><div class="fx" style="padding:4px 10px 6px"><span class="av"></span><p class="t10 bd f1">supgilfit</p><span class="mu">···</span></div>
<div class="rel"><div class="g" style="height:178px;border-radius:0">사용 장면 사진 4:5</div><div class="tag"><b>접이식 리포머 미니</b><br>제품 보기 ›</div></div>
<div class="vp"><span>제품 보기</span><span class="mu">›</span></div>
<div class="fx" style="padding:7px 10px 4px;gap:10px"><i class="ic o"></i><i class="ic o"></i><i class="ic"></i><span class="f1"></span><i class="ic"></i></div>
<div class="col" style="padding:0 10px;gap:2px"><p class="t10 bd">저장 842 · 공유 317</p><p class="t10"><b>supgilfit</b> 퇴근 후 15분, 거실 한쪽에서 펼치는 루틴</p></div></div></div>
    </div>
    <p class="cap">구성 예시, 실제 소재 아님</p>
  </div>
  <div class="rt">
    <p class="dk-lb">인스타그램 · 프로필 · 쇼핑 태그</p>
    <h3>프로필 격자 3행 구성과 상품 태그 게시물</h3>
    <dl>
      <div><dt>노출 위치</dt><dd>프로필 격자(오가닉)와 피드·릴스·스토리의 상품 태그 게시물. 지면마다 순위를 따로 산정</dd></div>
      <div><dt>과금 방식</dt><dd>오가닉 운영 지면으로 과금 없음. 확산은 초기 부스팅과 광고로 별도 집행</dd></div>
      <div><dt>소재 규격</dt><dd>1행 정체성, 2행 생활 장면, 3행 제품 이야기. 카드 핵심 문구는 가운데 66% 안, 상품 이미지 500×500 이상</dd></div>
      <div><dt>운영 포인트</dt><dd>저장·공유 상위 콘텐츠를 다음 달 주제와 광고 소재로 사용. 대표 상품 상시 태그, 카탈로그는 24시간마다 갱신</dd></div>
    </dl>
  </div>
</div>

스타일

.dk-migpg{display:grid;grid-template-columns:auto minmax(0,1fr);gap:40px;align-items:center}
.dk-migpg .lf{display:flex;flex-direction:column;align-items:center;gap:10px}
.dk-migpg .fr{display:flex;gap:18px;align-items:flex-start}
.dk-migpg .fc{display:flex;flex-direction:column;align-items:center;gap:6px}
.dk-migpg .fl{font-size:var(--f-cap);font-weight:600;color:var(--ink2);margin:0}
.dk-migpg .cap{font-size:var(--f-cap);color:var(--mu);margin:0}
.dk-migpg .rt .dk-lb{margin:0 0 4px}
.dk-migpg .rt h3{font-size:var(--f-lg);font-weight:700;margin:0 0 var(--s3);letter-spacing:-.02em;line-height:1.35}
.dk-migpg .rt dl{margin:0;border-top:1px solid var(--line2)}
.dk-migpg .rt dl div{display:grid;grid-template-columns:88px minmax(0,1fr);gap:var(--s4);padding:13px 0;border-bottom:1px solid var(--line)}
.dk-migpg .rt dt{font-size:var(--f-sm);font-weight:600;color:var(--mu);padding-top:2px}
.dk-migpg .rt dd{margin:0;font-size:var(--f-body);color:var(--ink2)}
.dk-migpg .rt.tight dl div{padding:10px 0;grid-template-columns:76px minmax(0,1fr);gap:var(--s3)}
.dk-migpg .rt.tight dd{font-size:var(--f-sm)}
.dk-migpg .ph{width:300px;height:372px;border:5px solid var(--ink);border-radius:24px;background:#fff;overflow:hidden;display:flex;flex-direction:column;font-size:11px;line-height:1.4;color:#222;letter-spacing:-.01em;text-align:left;position:relative}
.dk-migpg .ph.n{width:232px}
.dk-migpg .ph.s{width:190px}
.dk-migpg .ph.xs{width:150px;height:316px;border-width:4px;border-radius:18px;font-size:10px}
.dk-migpg .ph.dkm{background:#242424;color:#fff}
.dk-migpg .ph>*{flex:none}
.dk-migpg p{margin:0}
.dk-migpg .ph b,.dk-migpg .pc b,.dk-migpg .tv b{color:inherit;font-weight:700}
.dk-migpg .sb{display:flex;justify-content:space-between;align-items:center;padding:6px 16px 3px;font-size:10px;font-weight:600}
.dk-migpg .xs .sb{padding:5px 12px 2px;font-size:9px}
.dk-migpg .sb i{display:block;width:16px;height:8px;border:1px solid currentColor;border-radius:2px;opacity:.7}
.dk-migpg .g{background:var(--soft);border-radius:4px;flex:none;display:flex;align-items:center;justify-content:center;color:#a39d98;font-size:9px;text-align:center}
.dk-migpg .gd{background:#3a3a3a;border-radius:4px;flex:none;display:flex;align-items:center;justify-content:center;color:#9a9a9a;font-size:9px;text-align:center}
.dk-migpg .ln{display:block;height:6px;border-radius:3px;background:var(--g1)}
.dk-migpg .pr{display:block;height:9px;border-radius:3px;background:#c9c4bf}
.dk-migpg .fx{display:flex;align-items:center;gap:6px}
.dk-migpg .col{display:flex;flex-direction:column;gap:2px;min-width:0}
.dk-migpg .sp{justify-content:space-between}
.dk-migpg .f1{flex:1;min-width:0}
.dk-migpg .t8{font-size:8px}
.dk-migpg .t9{font-size:9px}
.dk-migpg .t10{font-size:10px}
.dk-migpg .t12{font-size:12px}
.dk-migpg .t13{font-size:13px}
.dk-migpg .bd{font-weight:700}
.dk-migpg .mu{color:#8b8f94}
.dk-migpg .hr{height:6px;background:#f0f1f3}
.dk-migpg .pd{padding:8px 12px}
.dk-migpg .ic{display:inline-block;width:14px;height:14px;border:1.5px solid currentColor;border-radius:4px;flex:none}
.dk-migpg .ic.o{border-radius:50%}
.dk-migpg .av{width:22px;height:22px;border-radius:50%;background:var(--g1);flex:none}
.dk-migpg .adb{font-size:9px;color:#8b8f94;border:1px solid #d5d8dc;border-radius:3px;padding:0 3px;line-height:13px;flex:none;white-space:nowrap}
.dk-migpg .rel{position:relative}
.dk-migpg .pin{position:absolute;z-index:6;width:17px;height:17px;border-radius:50%;background:var(--ink);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;border:1.5px solid #fff;line-height:1;letter-spacing:0}
.dk-migpg .nw{white-space:nowrap}

.dk-migpg .st{display:flex;flex-direction:column;align-items:center;font-size:9px;color:#555;flex:1}
.dk-migpg .st b{font-size:12px;color:#111}
.dk-migpg .bt{flex:1;background:#efefef;border-radius:6px;padding:5px 0;text-align:center;font-size:10px;font-weight:600}
.dk-migpg .bt.on{background:#0095f6;color:#fff}
.dk-migpg .gr{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.dk-migpg .gr .g{height:56px;border-radius:0}
.dk-migpg .tag{position:absolute;left:22px;top:112px;background:rgba(0,0,0,.78);color:#fff;border-radius:5px;padding:4px 8px;font-size:9px;line-height:1.3}
.dk-migpg .vp{display:flex;justify-content:space-between;align-items:center;padding:7px 10px;border-bottom:1px solid #efefef;font-size:10px;font-weight:600}