Marketing Atlas
한국어
▽ Funnels & journeys

Awareness stage

인지 단계

Design signals for the moment people first notice a need and a possible brand.

···
html
<div class="aware"><div class="aware-head"><b>AUDIENCE / 12 PEOPLE</b><span id="aware-label">AFTER MESSAGE</span></div><div class="aware-people" id="aware-people"></div><div class="aware-bottom"><span id="aware-count">8 RECOGNIZE THE IDEA</span><button id="aware-toggle" type="button">SHOW BEFORE</button></div></div>
css
.aware{width:min(88%,620px);display:grid;gap:clamp(9px,2.6vmin,21px);font:800 clamp(10px,max(1.8vmin,1vw),16px)/1.2 sans-serif}.aware-head,.aware-bottom{display:flex;justify-content:space-between;align-items:center;gap:7px}.aware-head span,.aware-bottom span{color:var(--accent)}.aware-people{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(3px,1.2vmin,9px)}.aware-people i{display:block;aspect-ratio:1;border-radius:50%;background:var(--line);border:2px solid var(--fg);transition:background .4s,transform .4s}.aware-people i.on{background:var(--accent-2);transform:translateY(-5px)}.aware button{border:2px solid var(--fg);background:var(--surface);color:var(--fg);padding:clamp(5px,1.4vmin,10px);font:inherit;cursor:pointer}
js
const people=document.getElementById('aware-people');for(let i=0;i<12;i++)people.appendChild(document.createElement('i'));let after=true;function show(){[...people.children].forEach((el,i)=>el.classList.toggle('on',i<(after?8:2)));document.getElementById('aware-label').textContent=after?'AFTER MESSAGE':'BEFORE MESSAGE';document.getElementById('aware-count').textContent=(after?8:2)+' RECOGNIZE THE IDEA';document.getElementById('aware-toggle').textContent=after?'SHOW BEFORE':'SHOW AFTER'}document.getElementById('aware-toggle').onclick=()=>{clearInterval(auto);after=!after;show()};show();const auto=setInterval(()=>{after=!after;show()},2600);
···

AIDA modelAIDA 모델

Shape messages for attention, interest, desire, and action.

···

Consideration stage고려 단계

People shortlist options and compare their trade-offs against chosen criteria.

···

Sales-qualified lead영업 적격 리드

Route a lead to sales when both fit and buying intent are sufficiently clear.

···

Conversion funnel전환 퍼널

Track who stays and who drops out between first visit and purchase.

The awareness stage begins when people notice a need and learn that a brand or product might help. They may not yet be comparing options or planning a purchase.

The demo changes how many people in a fictional audience recognize a message after exposure. At this stage, test whether the problem explanation and brand cues are remembered.

Exposure is not the same as awareness or intent. Separate reach from measured recognition or recall.

When to use

Use it to plan first-contact messaging and awareness measurement in a new market.

Open as page ↗