genser 활용 제안

사용자에게 AI 검색 UX를 어떤 방식으로 제공하느냐에 따라 검색 서비스의 실제 활용도와 만족도가 달라집니다. 서비스의 아이덴티티와 페이지 구조를 고려하여, 가장 몰입감 있는 최적의 검색 패턴을 적용해 보세요.

탭 전환형 (Explicit Toggle)

• 로그인 회원에게만 AI 검색을 제공하고 싶을 때 사용하면 좋습니다.

• 일반 검색과 AI 검색을 구분하여 사용하도록 유도할 수 있습니다.

• AI 검색에 대한 고객의 인지를 점층적으로 높이고, 검색 목적 별로 고객에게 선택권을 줄 수 있습니다.

Tip

탭 전환 시 Placeholder(입력 안내 문구)를 함께 변경하여, 사용자가 어떤 검색어를 입력해야 할지 가이드를 주는 것이 중요합니다.

React 코드 예시

const TabSearchPattern = () => {
  const [mode, setMode] = useState('AI'); // 'AI' | 'GENERAL'
  const [query, setQuery] = useState('');
  const [products, setProducts] = useState([]);
  const [requestId, setRequestId] = useState(null); // 검색 요청 ID 저장

  // 노출(DI) 로그 전송
  // 상품 목록(products)이 업데이트되고 화면 렌더링이 완료된 시점에 호출합니다.
  useEffect(() => {
    if (products.length > 0 && requestId) {
      window.genser.call('DI', {
        instance: { key: 'YOUR_INSTANCE_KEY' },
        goods: products.map(p => ({ code: p.code, name: p.name })),
        requestId: requestId
      });
      // console.log('DI 전송 완료');
    }
  }, [products, requestId]);

  // 클릭(CL) 로그 전송
  const handleProductClick = (product) => {
    if (!requestId) return;
    
    window.genser.call('CL', {
      instance: { key: 'YOUR_INSTANCE_KEY' },
      goods: [{ code: product.code, name: product.name }],
      requestId: requestId
    });
    
    // 이후 상품 상세 페이지로 이동
    console.log('CL 전송 완료, 페이지 이동:', product.name);
  };

  const handleSearch = (e) => {
    e.preventDefault();
    if (mode === 'AI') {
      // genser AI 검색 호출
      window.genser.call('searchProducts', {
        instanceKey: 'YOUR_INSTANCE_KEY',
        queryText: query
      }).success((res) => {
        if (res.type === 'SEARCH') {
          // 상태 업데이트 -> 리렌더링 발생 -> useEffect 실행 -> DI 전송
          setProducts(res.products);
          setRequestId(res.requestId);
        }
      });
    } else {
      console.log('일반 키워드 검색 실행:', query);
    }
  };

  return (
    <div>
      <div className="tabs">
        <button onClick={() => setMode('AI')} className={mode === 'AI' ? 'active' : ''}>AI 검색</button>
        <button onClick={() => setMode('GENERAL')} className={mode === 'GENERAL' ? 'active' : ''}>일반 검색</button>
      </div>
      <form onSubmit={handleSearch}>
        <input
          type="text"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          placeholder={mode === 'AI' ? "결혼식에 입고 갈 30대 여자 네이비 자켓 추천해줘!" : "검색어를 입력하세요"}
        />
        <button type="submit">검색</button>
      </form>
      
      {/* 결과 리스트 예시 */}
      <ul>
        {products.map(p => (
          <li key={p.code} onClick={() => handleProductClick(p)}>
            {p.name}
          </li>
        ))}
      </ul>
    </div>
  );
};

Vue 코드 예시

<template>
  <div class="search-container">
    <div class="tabs">
      <button :class="{ active: mode === 'AI' }" @click="mode = 'AI'">✨ AI 검색</button>
      <button :class="{ active: mode === 'GENERAL' }" @click="mode = 'GENERAL'">일반 검색</button>
    </div>
    <div class="input-wrapper">
      <input 
        v-model="query" 
        @keyup.enter="handleSearch"
        :placeholder="placeholderText" 
      />
      <button @click="handleSearch">검색</button>
    </div>
    
    <!-- 결과 리스트 -->
    <ul>
      <li 
        v-for="p in products" 
        :key="p.code" 
        @click="handleProductClick(p)"
      >
        {{ p.name }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, computed, nextTick } from 'vue';

const mode = ref('AI');
const query = ref('');
const products = ref([]);
const requestId = ref(null);

const placeholderText = computed(() => 
  mode.value === 'AI' ? "결혼식에 입고 갈 30대 여자 네이비 자켓 추천해줘!" : "검색어를 입력하세요"
);

const handleSearch = () => {
  if (mode.value === 'AI') {
    // 검색 API 호출
    window.genser.call('searchProducts', {
      instanceKey: 'YOUR_INSTANCE_KEY',
      queryText: query.value
    }).success((res) => {
      products.value = res.products;
      requestId.value = res.requestId;
      
      // DI 로그 전송 
      nextTick(() => {
        window.genser.call('DI', {
          instance: { key: 'YOUR_INSTANCE_KEY' },
          goods: res.products.map(p => ({ code: p.code, name: p.name })),
          requestId: res.requestId
        });
      });
    });
  } else {
    console.log('일반 검색 실행');
  }
};

// 클릭(CL) 로그 전송
const handleProductClick = (product) => {
  if (!requestId.value) return;
  
  window.genser.call('CL', {
    instance: { key: 'YOUR_INSTANCE_KEY' },
    goods: [{ code: product.code, name: product.name }],
    requestId: requestId.value
  });
  
  console.log('CL 전송 및 이동', product.name);
};
</script>

HTML/JS 코드 예시

<div class="search-wrapper">
  <div class="tab-group">
    <button onclick="setMode('AI')" id="btn-ai" class="active">✨ AI 검색</button>
    <button onclick="setMode('GENERAL')" id="btn-gen">일반 검색</button>
  </div>
  <input type="text" id="search-input" placeholder="결혼식에 입고 갈 30대 여자 네이비 자켓 추천해줘!">
  <button onclick="executeSearch()">검색</button>
  
  <!-- 결과 리스트 영역 -->
  <ul id="result-list"></ul>
</div>

<script>
let currentMode = 'AI';
let currentRequestId = null; // 전역 변수나 상태로 requestId 관리

function setMode(mode) {
  // ... (기존과 동일)
}

function executeSearch() {
  const query = document.getElementById('search-input').value;
  
  if(currentMode === 'AI') {
    // AI 검색 호출
    genser.call('searchProducts', {
      instanceKey: 'YOUR_INSTANCE_KEY',
      queryText: query
    }).success(function(res) {
      currentRequestId = res.requestId; // ID 저장
      
      // 결과 렌더링
      renderList(res.products);
      
      // DI 로그 전송 (렌더링 직후)
      genser.call('DI', {
        instance: { key: 'YOUR_INSTANCE_KEY' },
        goods: res.products.map(p => ({ code: p.code, name: p.name })),
        requestId: res.requestId
      });
    });
  }
}

function renderList(products) {
  const ul = document.getElementById('result-list');
  ul.innerHTML = '';
  products.forEach(p => {
    const li = document.createElement('li');
    li.textContent = p.name;
    // 클릭 이벤트 바인딩
    li.onclick = function() {
      handleProductClick(p);
    };
    ul.appendChild(li);
  });
}

function handleProductClick(product) {
  if (!currentRequestId) return;
  
  genser.call('CL', {
    instance: { key: 'YOUR_INSTANCE_KEY' },
    goods: [{ code: product.code, name: product.name }],
    requestId: currentRequestId
  });
  
  console.log('CL 전송 및 이동', product.name);
}
</script>

AI 검색 버튼 유도형 (Dropdown Nudge)

• 기존 검색 UX를 해치지 않으면서 자연스럽게 AI 검색을 유도하는 방식입니다.

• 사용자가 검색창을 클릭했을 때(Focus), 하단 드롭다운에 AI 검색 버튼을 노출합니다.

• AI 검색에 대한 고객 인지를 확실히 한 후 검색 페이지로 유도가 가능합니다.

React 코드 예시

const DropdownNudgePattern = () => {
  const [isFocused, setIsFocused] = useState(false);
  
  const goToAiSearch = () => {
    alert("AI 검색 모드로 전환!");
    // window.location.href = '/ai-search';
  };

  return (
    <div className="relative">
      <input
        type="text"
        placeholder="검색어를 입력하세요"
        onFocus={() => setIsFocused(true)}
        // Blur 시 바로 닫히면 버튼 클릭이 안 될 수 있으므로 약간의 지연을 줍니다.
        onBlur={() => setTimeout(() => setIsFocused(false), 200)}
      />
      
      {isFocused && (
        <div className="dropdown">
          {/* AI 검색 유도 버튼 */}
          <button onClick={goToAiSearch} className="ai-nudge-btn">
            <strong>✨ 내가 찾는 옷, AI에게 질문해보세요!</strong>
            <span>"이번주 하객룩 추천해줘"</span>
          </button>
          <ul><li>최근 검색어...</li></ul>
        </div>
      )}
    </div>
  );
};

Vue 코드 예시

<template>
  <div class="search-wrap">
    <input 
      @focus="isFocused = true" 
      @blur="handleBlur"
      placeholder="검색어를 입력하세요" 
    />
    <div v-if="isFocused" class="dropdown">
      <button class="ai-nudge-btn" @click="goToAiSearch">
        <strong>✨ 내가 찾는 옷, AI에게 질문해보세요!</strong>
        <span>"이번주 하객룩 추천해줘"</span>
      </button>
      <ul class="history"><li>최근 검색어...</li></ul>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
// ... (이전과 동일)
</script>

HTML/JS 코드 예시

<div class="search-box">
  <input type="text" id="inp-search" placeholder="검색어를 입력하세요">
  <!-- 기본적으로 숨겨져 있다가 Focus 시 노출 -->
  <div id="dropdown" class="dropdown-content hidden">
    <button class="ai-nudge-btn" onclick="goToAiSearch()">
      <strong>✨ 내가 찾는 옷, AI에게 질문해보세요!</strong>
      <span>"이번주 하객룩 추천해줘"</span>
    </button>
    <div class="history">최근 검색어...</div>
  </div>
</div>

<script>
  const input = document.getElementById('inp-search');
  const dropdown = document.getElementById('dropdown');

  input.addEventListener('focus', () => {
    dropdown.classList.remove('hidden'); // CSS .hidden { display: none; }
  });
  
  // blur 시 숨김 처리 (setTimeout으로 클릭 이벤트 허용 시간 확보)
  input.addEventListener('blur', () => {
    setTimeout(() => dropdown.classList.add('hidden'), 200);
  });

  function goToAiSearch() {
    alert("AI 검색 모드로 전환!");
    // location.href = '/ai-search';
  }
</script>
<style>
  .hidden { display: none; }
  .dropdown-content { position: absolute; /* 스타일 생략 */ }
</style>

검색 몰입형 (Immersive/Focus)

• ChatGPT나 Gemini와 유사한 스타일로, 검색 자체가 메인 기능인 페이지에서 사용합니다.

• 긴 문장의 질문도 편하게 입력할 수 있도록 넓은 입력 영역을 제공합니다.

• 질의 예시를 노출하여 AI 검색 활성화를 자연스럽게 유도합니다.

React 코드 예시

const ImmersiveSearch = () => {
  const [query, setQuery] = useState('');
  const [products, setProducts] = useState([]);
  const [requestId, setRequestId] = useState(null);
  const textareaRef = useRef(null);

  // DI 로그 전송
  useEffect(() => {
    if (products.length > 0 && requestId) {
      window.genser.call('DI', {
        instance: { key: 'YOUR_INSTANCE_KEY' },
        goods: products.map(p => ({ code: p.code, name: p.name })),
        requestId: requestId
      });
    }
  }, [products, requestId]);
  
  // CL 로그 전송
  const handleProductClick = (product) => {
    if (!requestId) return;
    window.genser.call('CL', {
      instance: { key: 'YOUR_INSTANCE_KEY' },
      goods: [{ code: product.code, name: product.name }],
      requestId: requestId
    });
  };

  const handleInput = (e) => {
    setQuery(e.target.value);
    if (textareaRef.current) {
      textareaRef.current.style.height = 'auto';
      textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
    }
  };

  const executeSearch = () => {
    window.genser.call('searchProducts', {
      instanceKey: 'YOUR_INSTANCE_KEY',
      queryText: query
    }).success((res) => {
      if(res.type === 'SEARCH') {
        setProducts(res.products);
        setRequestId(res.requestId);
      }
    });
  };

  return (
    <div className="immersive-box">
      <textarea
        ref={textareaRef}
        value={query}
        onInput={handleInput}
        rows={1}
        placeholder="AI에게 무엇이든 물어보세요."
      />
      <button onClick={executeSearch}>Send</button>
      
      {/* 결과 리스트 */}
      <ul>
          {products.map(p => (
            <li key={p.code} onClick={() => handleProductClick(p)}>{p.name}</li>
          ))}
      </ul>
    </div>
  );
};

Vue 코드 예시

<template>
  <div class="immersive-box">
    <textarea
      ref="textarea"
      v-model="query"
      @input="resize"
      rows="1"
      placeholder="AI에게 무엇이든 물어보세요."
    ></textarea>
    <button @click="executeSearch">Send</button>

    <!-- 결과 리스트 -->
    <ul>
      <li v-for="p in products" :key="p.code" @click="handleProductClick(p)">
        {{ p.name }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, nextTick } from 'vue';

const query = ref('');
const textarea = ref(null);
const products = ref([]);
const requestId = ref(null);

const resize = () => {
  const el = textarea.value;
  el.style.height = 'auto';
  el.style.height = el.scrollHeight + 'px';
};

const executeSearch = () => {
  window.genser.call('searchProducts', {
    instanceKey: 'YOUR_INSTANCE_KEY',
    queryText: query.value
  }).success((res) => {
    if (res.type === 'SEARCH') {
      products.value = res.products;
      requestId.value = res.requestId;

      // DI 로그 전송
      nextTick(() => {
        window.genser.call('DI', {
          instance: { key: 'YOUR_INSTANCE_KEY' },
          goods: res.products.map(p => ({ code: p.code, name: p.name })),
          requestId: res.requestId
        });
      });
    }
  });
};

// CL 로그 전송
const handleProductClick = (product) => {
  if (!requestId.value) return;
  window.genser.call('CL', {
    instance: { key: 'YOUR_INSTANCE_KEY' },
    goods: [{ code: product.code, name: product.name }],
    requestId: requestId.value
  });
};
</script>

HTML/JS 코드 예시

<div class="immersive-box">
  <textarea id="ai-input" rows="1" placeholder="AI에게 무엇이든 물어보세요."></textarea>
  <button onclick="doSearch()">Send</button>
  <ul id="immersive-results"></ul>
</div>

<script>
  const tx = document.getElementById('ai-input');
  let currentRequestId = null;
  
  tx.addEventListener("input", function() {
    this.style.height = 'auto';
    this.style.height = (this.scrollHeight) + "px";
  });

  function doSearch() {
    const query = tx.value;
    genser.call('searchProducts', {
      instanceKey: 'YOUR_INSTANCE_KEY',
      queryText: query
    }).success(function(res) {
      if (res.type === 'SEARCH') {
        currentRequestId = res.requestId;
        renderImmersiveList(res.products);
        
        // DI 로그 전송
        genser.call('DI', {
          instance: { key: 'YOUR_INSTANCE_KEY' },
          goods: res.products.map(p => ({ code: p.code, name: p.name })),
          requestId: res.requestId
        });
      }
    });
  }

  function renderImmersiveList(products) {
    const ul = document.getElementById('immersive-results');
    ul.innerHTML = '';
    products.forEach(p => {
      const li = document.createElement('li');
      li.textContent = p.name;
      // CL 로그 전송 바인딩
      li.onclick = function() {
        if (currentRequestId) {
          genser.call('CL', {
            instance: { key: 'YOUR_INSTANCE_KEY' },
            goods: [{ code: p.code, name: p.name }],
            requestId: currentRequestId
          });
        }
      };
      ul.appendChild(li);
    });
  }
</script>

기존 검색창 연동형 (Simple Integration)

• 별도의 UI/UX 변경 없이, 현재 사용 중인 검색창 로직에 genser 검색 엔진만 연결하는 방식입니다.

• 기존 검색창 UI를 그대로 유지함으로 UX에 대한 학습 등을 고객에게 요구하지 않고, AI 검색을 제공할 수 있습니다.

React 코드 예시

const SimpleSearch = () => {
  const [query, setQuery] = useState('');
  const [products, setProducts] = useState([]);
  const [requestId, setRequestId] = useState(null);

  // DI 로그 전송 (렌더링 직후)
  useEffect(() => {
    if (products.length > 0 && requestId) {
      window.genser.call('DI', {
        instance: { key: 'YOUR_INSTANCE_KEY' },
        goods: products.map(p => ({ code: p.code, name: p.name })),
        requestId: requestId
      });
    }
  }, [products, requestId]);

  // CL 로그 전송
  const handleProductClick = (product) => {
    if (!requestId) return;
    window.genser.call('CL', {
      instance: { key: 'YOUR_INSTANCE_KEY' },
      goods: [{ code: product.code, name: product.name }],
      requestId: requestId
    });
    // 이후 기존 상품 상세 페이지 이동 로직 실행
  };

  const handleSearch = (e) => {
    e.preventDefault();
    if (!query) return;

    // 기존 API 호출 대신 genser 호출
    window.genser.call('searchProducts', {
      instanceKey: 'YOUR_INSTANCE_KEY',
      queryText: query
    }).success((res) => {
      if (res.type === 'SEARCH') {
        // 기존 상태 업데이트 (변수명만 매핑)
        setProducts(res.products);
        setRequestId(res.requestId);
      }
    });
  };

  return (
    <div>
      <form onSubmit={handleSearch}>
        <input 
          type="text" 
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          placeholder="결혼식에 입고 갈 30대 여자 네이비 자켓 추천해줘!"
        />
        <button type="submit">검색</button>
      </form>

      {/* 기존 결과 리스트 UI 유지 */}
      <ul>
        {products.map(p => (
          <li key={p.code} onClick={() => handleProductClick(p)}>
            {p.name}
          </li>
        ))}
      </ul>
    </div>
  );
};

Vue 코드 예시

<template>
  <div class="search-container">
    <!-- 기존 검색 폼 -->
    <form @submit.prevent="handleSearch">
      <input v-model="query" placeholder="결혼식에 입고 갈 30대 여자 네이비 자켓 추천해줘!" />
      <button type="submit">검색</button>
    </form>

    <!-- 기존 결과 리스트 UI -->
    <ul>
      <li v-for="p in products" :key="p.code" @click="handleProductClick(p)">
        {{ p.name }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, nextTick } from 'vue';

const query = ref('');
const products = ref([]);
const requestId = ref(null);

const handleSearch = () => {
  if (!query.value) return;

  // 기존 검색 로직을 genser 호출로 변경
  window.genser.call('searchProducts', {
    instanceKey: 'YOUR_INSTANCE_KEY',
    queryText: query.value
  }).success((res) => {
    if (res.type === 'SEARCH') {
      products.value = res.products;
      requestId.value = res.requestId;

      // DI 로그 전송 (DOM 업데이트 직후)
      nextTick(() => {
        window.genser.call('DI', {
          instance: { key: 'YOUR_INSTANCE_KEY' },
          goods: res.products.map(p => ({ code: p.code, name: p.name })),
          requestId: res.requestId
        });
      });
    }
  });
};

// CL 로그 전송
const handleProductClick = (product) => {
  if (!requestId.value) return;
  window.genser.call('CL', {
    instance: { key: 'YOUR_INSTANCE_KEY' },
    goods: [{ code: product.code, name: product.name }],
    requestId: requestId.value
  });
};
</script>

HTML/JS 코드 예시

<div class="search-box">
  <input type="text" id="searchInput" placeholder="결혼식에 입고 갈 30대 여자 네이비 자켓 추천해줘!">
  <button onclick="executeSearch()">검색</button>
</div>
<ul id="resultList"></ul>

<script>
let currentRequestId = null;

function executeSearch() {
  const query = document.getElementById('searchInput').value;
  if (!query) return;

  // 기존 AJAX 호출 부분을 genser 호출로 교체
  genser.call('searchProducts', {
    instanceKey: 'YOUR_INSTANCE_KEY',
    queryText: query
  }).success(function(res) {
    if (res.type === 'SEARCH') {
      currentRequestId = res.requestId;
      renderList(res.products); // 기존 렌더링 함수 재사용

      // DI 로그 전송 (렌더링 직후)
      genser.call('DI', {
        instance: { key: 'YOUR_INSTANCE_KEY' },
        goods: res.products.map(p => ({ code: p.code, name: p.name })),
        requestId: res.requestId
      });
    }
  });
}

function renderList(products) {
  const ul = document.getElementById('resultList');
  ul.innerHTML = '';
  products.forEach(p => {
    const li = document.createElement('li');
    li.textContent = p.name;
    // CL 로그 전송 바인딩
    li.onclick = function() {
      handleProductClick(p);
    };
    ul.appendChild(li);
  });
}

function handleProductClick(product) {
  if (!currentRequestId) return;
  
  genser.call('CL', {
    instance: { key: 'YOUR_INSTANCE_KEY' },
    goods: [{ code: product.code, name: product.name }],
    requestId: currentRequestId
  });
  // 페이지 이동
}
</script>