반응형 UI로 개선된 iLiFO CBT 시스템 UX

by

아이리포 CBT 시스템을 구축하는 프로젝트에 참여하여 프론트엔드의 반응형 UI를 구축했습니다. Vue.js와 Bootstrap을 활용하여 효율적이고 직관적인 UX를 제공하고자 하였습니다. 

1. 프로젝트 개요

iLiFO CBT 시스템은 SQLD 학습자를 대상으로 설계된 온라인 학습 시스템으로, 추후 ADsP와 빅데이터분석기사 학습자를 위한 추가 메뉴도 오픈될 예정입니다. 이 시스템은 학습자가 단순히 이론 공부에 그치지 않고, 실제로 배운 내용을 문제를 통해 복습하고 점검할 수 있도록 돕는 것을 목표로 합니다.

학습자는 책으로 학습한 내용을 바탕으로 연습문제나 기출문제를 풀 수 있으며, 이를 통해 이론과 실습을 균형 있게 병행할 수 있습니다. 특히, 학습의 편리함을 극대화하기 위해 사용하기 쉬운 인터페이스와 반응형 디자인을 적용하여 데스크톱뿐만 아니라 태블릿과 모바일 환경에서도 학습 경험이 원활하도록 설계되었습니다.

  • 반응형 UI 설계: 화면 크기에 따라 UI가 자연스럽게 적응
  • 재사용 가능한 컴포넌트 개발: 유지보수성과 생산성 향상
  • Vue.js와 Bootstrap의 통합: 각각의 강점을 최대한 활용

2. 반응형 SCSS 설계 전략

  1. 환경 분류
  • 모바일/태블릿 환경: 화면 크기가 작아 주요 UI 요소를 간소화하고, 화면 공간을 효율적으로 활용
  • 데스크탑 환경: 더 넓은 화면을 활용해 정보량을 늘리고, 복잡한 레이아웃(OMR 카드 등)을 지원
  1. 미디어 쿼리 사용
  • SCSS에서 미디어 쿼리를 사용해 디바이스별 스타일을 분리했습니다. 

3. SCSS 코드 구성 예시

  1. 공통 스타일

모든 환경에서 동일하게 적용되는 공통 요소를 먼저 정의했습니다.

body {
  font-family: ‘Noto Sans’, sans-serif;
  margin: 0;
  padding: 0;
  color: $primary-color;
}

.container {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 15px;
}
  1. 모바일/태블릿 환경 

작은 화면에서 효율적으로 표시하기 위해 주요 요소를 간소화 했습니다.

@media (max-width: $breakpoint-tablet) {
  .header {
    font-size: $font-size-mobile;
    padding: 10px;
  }

  .menu {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
  1. 데스크탑 환경

넓은 화면을 고려해 레이아웃을 확장하고 세부 정보를 추가했습니다.

@media (min-width: $breakpoint-desktop) {  
.header {
    font-size: $font-size-desktop;    
padding: 20px;  
}
.menu {
display: flex;    
flex-direction: row;    
justify-content: space-between;  
}
}

3. 구현 결과

  • 데스크탑:
    • 헤더: 요소들이 가로로 나열되고, 텍스트 크기와 여백이 넉넉하게 배치
    • 메인: OMR카드로 현재 문제 풀이 상황을 한눈에 확인할 수 있음

[그림 1] 데스크탑 환경에서의 아이리포 CBT 사이트 문제 풀이 화면

  • 모바일/태블릿:
    • 헤더: 왼쪽 상단의 요소가 사라지고, 메인 폰트가 작아지며, 사용자 정보를 드롭다운 형태로 변경
    • 바디: OMR 카드를 숨겨 레이아웃을 간소화함

[그림 2] 모바일/태블릿 환경에서의 아이리포 CBT 사이트 문제 풀이 화면

4. 결론

다음 화면 이외에도 사용자의 경험을 향상시키고자 모든 페이지에 반응형 UI를 적용하였습니다. 이를 통해 학습자는 사용 중 디바이스의 화면 크기나 해상도에 구애받지 않고, 동일한 품질의 학습 경험을 누릴 수 있게 되었습니다.

특히, 모바일 사용자들이 편리하게 접근할 수 있도록 버튼의 크기와 간격을 조정하고, 불필요한 요소는 제거해 심플하고 직관적인 인터페이스를 제공하였습니다. 태블릿 환경에서는 화면 공간을 최대한 활용하여 중요한 정보를 한눈에 확인할 수 있도록 최적화하였으며, 데스크탑 환경에서는 넓은 화면을 활용한 복잡한 레이아웃과 상세한 데이터를 제공해 학습 효율성을 높였습니다.

이번 프로젝트를 통해 UI/UX 설계의 중요성과 다양한 디바이스 환경을 고려한 디자인의 필요성을 다시 한번 실감하게 되었습니다. 또한, SCSS를 사용한 반응형 디자인의 유연성과 Bootstrap의 강점을 적극 활용함으로써 코드의 가독성과 유지보수성을 높일 수 있었습니다.

향후 iLiFO CBT 시스템은 추가 학습 메뉴와 더불어 새로운 사용자 요구를 반영한 업데이트를 통해 더욱 정교하고 편리한 학습 플랫폼으로 발전할 계획입니다. 이 과정에서도 반응형 UI 설계는 학습자의 편의성과 효율성을 지속적으로 강화하는 데 중요한 역할을 할 것입니다.

이번 프로젝트 경험은 다양한 디바이스 환경에서 최적화된 서비스를 제공하는 데 필요한 기술적 통찰력을 키워준 소중한 기회였습니다. 이를 기반으로 앞으로도 더욱 발전된 기술과 창의적인 아이디어로 사용자 중심의 UI/UX를 구현해 나갈 것입니다.