운영 프로젝트 작업 사례 — 유채연 포트폴리오

Case 01

마스킹 정책 변경 및 인증 UI 개선

GNB에 위치한 버튼으로 로그인 상태에 따라 조건부 노출되며, 최초 방문 시 Lottie 애니메이션을 1회 재생합니다. localStorage로 재생 여부를 관리해 재방문 시 마지막 프레임을 바로 노출합니다.

HTML/CSS JavaScript Lottie

// default : 애니메이션 자동 재생 X
const params = {
  container: document.getElementById("lottie_container"),
  renderer: "svg",
  loop: false,
  autoplay: false,
  path: "[CDN 경로]"
};

const anim = lottie.loadAnimation(params);

if (!localStorage.getItem("hasPlayedMotion")) {
  anim.play();
  // 재생했음을 저장
  localStorage.setItem("hasPlayedMotion", "true");
} else {
  // 애니메이션 재생 없이 마지막 스틸 노출
  anim.addEventListener("DOMLoaded", function() {
    anim.goToAndStop(anim.totalFrames, true);
  });
}

Case 02

선물하기 서비스 개편 (모바일)

서비스 전면 개편으로 마크업 구조를 새로 설계했습니다. 기존 컴포넌트를 재활용하고 신규 컴포넌트를 추가하며 약 20개 페이지를 담당했습니다. 처음부터 접근성을 고려한 마크업 작업을 진행했습니다.

HTML/CSS JavaScript 모바일

<!-- 1. 탭 UI -->
<ul role="tablist" class="tab-accessibility">
  <li role="presentation">
    <a role="tab" aria-selected="true" aria-controls="tab1-tab" id="tab1">바로선물</a>
  </li>
  <li role="presentation">
    <a role="tab" aria-selected="false" aria-controls="tab2-tab" id="tab2">가족끼리 자동선물</a>
  </li>
</ul>

<!-- 2. 폼 에러 텍스트 -->
<span class="error-txt" aria-hidden="true">휴대폰 번호 11자리를 입력해 주세요.</span>
<!-- 초기값 true | 활성화 시 false -->

<!-- 3. 팝업 버튼 연결 -->
<button type="button" aria-haspopup="dialog" aria-controls="연결된 팝업의 id" aria-expanded="false">100MB</button>

Case 03

긴급 이슈 대응

서비스 긴급 이슈 발생으로 디자인 미확정 상태에서 퍼블리싱을 병행했습니다. 메인 페이지 컨텐츠 추가 및 신규 안내 페이지를 긴급 퍼블리싱했으며, 실시간 수정 요청에 빠르게 대응했습니다.

HTML/CSS SCSS TSX

운영 프로젝트작업 사례

운영 프로젝트
작업 사례