T ― Y

소개 및 역할

LG Shield는 LG전자의 보안 기술과 신뢰성을 효과적으로 전달하기 위해 제작된 브랜드 홈페이지입니다.

• 전체 페이지 퍼블리싱(HTML, Sass, Javscript) 및 애니메이션을 작업했습니다.
• 팀 구성: 퍼블리셔 1명, 프론트엔드 2명, 백엔드 2명, 디자이너 2명

기여한 부분

• 트러블슈팅 반응형에서 Sass @extend 기능 미지원 문제 해결 및 타이포 스타일 시스템 개선
  • 반응형 스타일 적용 시 Sass의 @extend가 Media Query 내부에서 동작하지 않아 재사용이 어려운 문제가 발생
    Build Error: You may not @extend selectors across media queries.
  • @extend를 통해 클래스를 확장하는 대신 조건 분기와 유틸 mixin을 활용한 @mixin 구조로 재구성하여, media query 내부에서도 재사용 가능하도록 개선
  • 결과적으로, 반응형 Media Query 스코프에서 일관된 타이포 스타일을 안정적으로 적용이 가능해지고, 유지보수성과 확장성을 향상 시킴

.fontTitle1 { 
	font-size: 54px; 
	line-height: 1.2;
}

// 🚫 media query 내부 사용 불가
// You may not @extend selectors across media queries.
@include mobile {
  h1 {
    @extend .fontTitle1; 
  }
}

// fontType을 간편하게 작성할 수 있는 유틸 mixin
@mixin fontType($fontSize, $lineHeight, $fontWeight: 400) {
  font-size: $fontSize;
  font-weight: $fontWeight;
  line-height: $lineHeight;
}

@mixin fontTitle($type: '54Bd') {
  // 공통 스타일
  
	// font 타입을 인자를 통해 분기처리
	// 타입명은 디자인시스템의 변수명과 동일
  @if $type == '54Bd' {
	  @include fontType(54px, 1.2, 700);
  }
  @if $type == '48Sd' {
	  @include fontType(45px, 1.2, 600);
  }
  ...
}

// ✅ media query 안에서도 재사용 가능
@include mobile {
  h1 {
    @include fontTitle('54Bd'); 
  }
}

• 탭, 아코디언, 모달, 드롭다운 등 UI 컴포넌트를 순수 JS로 구현

• header, footer 와 같은 공통 레이아웃을 템플릿화하여 HTML include 방식으로 반복 구조 분리

• GSAP ScrollTrigger로 디자인 의도를 정확하게 반영한 자연스러운 스크롤 인터랙션 구현

  

사용기술

• Sass

  mixin, function, variables 등을 사용하여 중복 스타일을 방지하고, 개발 효율성과 유지보수성을 높이기 위해 사용했습니다.