본문 바로가기

H-MATE, 기아TONG

현대오토에버

2024 - 2025


Overview

H-MATE와 기아TONG은 임직원들을 위한 앱으로 2017년 구축 이후 서비스 품질 향상이 필요한 상황이었습니다. 이에 서비스 전반의 사용자 경험 개선을 목표로 애플리케이션 리뉴얼이 진행되었습니다.

퍼블리싱 작업 시 다양한 모바일 디바이스 환경에서 일관되고 최적화된 UI를 제공하는 데 중점을 두었습니다.

※ APP 작업으로 별도 사이트 없음

Work Detail

  • 주요 화면 퍼블리싱
    • H-MATE
      • 인트로, 팝업, 회사소식, 업무공지, 궁금해요(질문하기, 답변하기, 나의질문), 경조사, 함께해요, 급여명세서, 마이페이지(교육현황, 내 글 보관함, 현장관리자 매뉴얼), EDM
    • 기아TONG
      • 개인정보 처리방침, 안전환경소식지, 경조사, 벼룩시장, 수다방, 현장관리자, 급여명세서, 마이페이지(나의 찜 상세)
  • 모바일 UI 최적화 및 인터랙션 구현
    • 안드로이드 / iOS 환경 차이 대응

Tech Stack

  • HTML
  • CSS
  • JavaScript
  • jQuery / GSAP / Swiper

Tool

  • Visual Studio Code
  • Git
  • Figma / Photoshop
  • Notion
H-MATE, 기아TONG 스크린샷

안드로이드 / iOS 환경 차이 대응

안드로이드와 iOS 간의 렌더링 및 디바이스 환경 차이에 대한 이슈를 대응했습니다.

특히 iOS 기기의 상·하단 노치 영역으로 인해 발생하는 레이아웃 문제는 safe-area-inset 값을 활용한 CSS 환경 변수(env, constant)를 적용하여 처리했습니다. 해당 내용은 따로 정리하여 팀원분들에게 공유하는 시간을 가졌습니다.

또한 이로 인해 발생하는 다양한 이슈에 대해 개발자와 함께 원인을 분석하고 해결 방안을 도출 및 적용하며 일관된 사용자 경험을 제공할 수 있도록 작업했습니다.

날짜·시간 통합 선택 UI 구현

단일 input 내에서 날짜와 시간(AM/PM 포함)을 함께 선택해야 하는 요구 사항이 있었습니다.

기존 DatePicker 라이브러리나 input[type="date"]의 커스터마이징으로는 한계가 있다고 판단해 사용자 조작 흐름을 고려하여 선택한 값이 화면에 반영되는 기능을 구현했습니다.


다음 프로젝트

영진약품