DIT 아카데미 UX/UI 리뷰

개요

DIT의 핵심 고객 과업은 ‘목표 확인 → 과정 탐색 → 비교 → 신청’입니다. 첫 화면에는 목표 달성 로드맵과 대표 성과(합격/취업/포트폴리오)를 간략히 제시해 신뢰를 구축합니다. 과정 상세에는 커리큘럼을 주차/모듈 단위로 공개하고, 실습 비중과 과제 산출물 예시를 보여주면 기대치가 정렬됩니다. 가격/혜택/환불 정책은 가독성 높은 테이블로 요약하고, 신청 버튼은 스크롤 깊이에 따라 반복 배치합니다. 후기 섹션에는 텍스트뿐 아니라 결과물 이미지·숏폼 영상을 함께 제공하면 설득력이 크게 상승합니다.

학습 여정

수강 전: 관심→설명회→상담→신청의 흐름에서 마찰을 줄이려면, 설명회 일정 선택과 상담 예약을 한 화면에서 처리할 수 있어야 합니다. 수강 중: 대시보드는 과제 마감·피드백·다음 학습 권장 순서를 명확히 보여주고, 알림은 이메일/앱/캘린더와 연동합니다. 수강 후: 포트폴리오 정리와 레퍼런스 추천, 취업 지원 도구를 제공해 장기 관계를 유지합니다. 각 단계에는 가벼운 성공 경험(퀴즈·미션 배지)을 설계해 동기 부여를 지속해야 합니다.

정보 구조(IA)

과정-커리큘럼-강사진-후기-FAQ의 5단 구조가 기본이며, 모든 상세 페이지는 동일한 위계(h2/h3)와 요약 박스를 갖습니다. 검색/필터에는 목적(취업/업스킬), 난이도, 기간, 방식(온라인/오프라인)이 포함되어야 하며, URL로 상태를 공유할 수 있어야 합니다. 입학 관련 정책 페이지는 비교적 숨겨져 있으므로, 신청 전 반드시 확인하도록 흐름 내에서 다시 링크합니다.

비주얼 & 브랜드

교육 브랜드는 신뢰·성장·커뮤니티를 시각적으로 전달해야 합니다. 사진/영상 에셋은 실제 수업·메ンタ링 장면과 결과물을 중심으로 선별하고, 대체 텍스트에 ‘과업 중심 서술’을 적용해 의미를 강화하세요. 버튼/폼 요소는 충분한 명도 대비와 포커스 스타일을 제공해야 하며, 모바일 1열 레이아웃에서 폼 입력 터치 영역은 최소 44px 이상으로 확보합니다.

SEO · 접근성 · 성능

과정 상세는 Course/Organization 스키마와 FAQ를 적용하면 검색 노출에 유리합니다. 이미지 최적화와 레이지 로딩을 병행하되, LCP 이미지는 예외 처리합니다. JS는 지연 로딩하고, 폰트는 preload + font-display: swap으로 플래시를 최소화합니다. 내부 링크는 카테고리 허브-세부 과정-후기-FAQ로 유기적으로 연결해 탐색과 인덱싱 효율을 함께 높입니다.

마무리 및 더블루캔버스

DIT는 학습자 여정에 맞춘 설계를 통해 만족도와 완주율을 높일 수 있습니다. 더블루캔버스는 교육 도메인 경험을 바탕으로 전환과 성과를 만드는 UX/SEO 전략을 제공합니다. 아래 링크에서 프로젝트 상담을 요청해 주세요.

더블루캔버스 공식 홈페이지: https://bluecvs.com/