안녕하세요. 현재 한화, 동아ST와 같은 대기업부터 국립 목포대학교, 학교체육진흥회와 같은 공기관에서 프로젝트를 수주받아 진행한 아몽소프트웨어입니다.
이번 글에서는 이전에 끝났던 LMS 개발 프로젝트인, OKFriends에 대해서 소개할까 합니다.
OKFriends는 외국에 있는 재외동포를 위해, 대한민국의 역사와 문화를 온라인 강의 사이트로 체험하는 것을 목적으로 제작된 사이트입니다.
처음 OKFriends 담당자님이 아몽소프트웨어를 찾아오신 이유는, 담당자님 지인께서 아몽소프트웨어를 소개해주셔서 찾아오셨다고 말씀하셨습니다.
소개로 찾아오셨다는 말씀을 듣고 아몽소프트웨어는 ‘그동안 최선을 다해 프로젝트를 진행했던 노력들이 헛되지 않았구나’를 알 수 있게 되었습니다.
아울러, 이번 프로젝트도 최선을 다하여 마무리하자 생각을 하였으며, OKFriends 담당자님에게 다음과 같은 홈페이지를 안겨드렸습니다.
본 프로젝트는 일반적으로 회사소개 홈페이지가 아닌 LMS 사이트 였기에, 디자인적인 부분뿐만 아니라 기술적인 부분도 신경을 쓰면서 제작을 진행하였습니다.
OKFriends 프로젝트에는 어떤 기술과 디자인이 사용되었을까요? 지금 바로 알아보도록 하겠습니다.
LMS 개발 사례, OKFriends
이번 글에서 설명할 OKFriends는 재외동포 대학생을 위한 온라인 강의 사이트입니다.
이같은 강의 사이트의 특성상, 사이트의 안정도는 물론이거니와 한 눈에 알아보기 쉬운 친화적인 디자인이 매우 중요한데요.
사용자의 관점에서 제작한 UI/UX 디자인에 대해 먼저 설명을 드린 뒤, 기술적인 측면에 대해서도 설명을 드리도록 하겠습니다.
LMS 개발 사례, OKFriends 홈페이지 디자인
1. OKFriends 메인 페이지
담당자님께서는 홈페이지를 제작할 때 가장 중요한 부분이 어디라고 생각하시나요?
기술 부분? 물론 중요합니다. 홈페이지에 들어갈 내용도 당연히 중요하겠지요. 하지만, 아몽소프트웨어는 그보다 더 중요한 한 가지가 있다고 말씀드리고 싶습니다.
바로 홈페이지의 첫 화면입니다.
첫 화면이 중요한 이유는 95%의 사용자가 홈페이지에 방문하고 이탈하기까지 걸리는 시간이 5초 내외이기 때문입니다.
그 안에 사용자의 이탈을 막을만한 요소를 어필하거나, 어떤 일을 하는지 핵심을 확실하게 전달해야만 하는데요.
그래서 메인페이지의 첫 화면에 큰 글씨로 홈페이지의 핵심을 전달하고자 하였습니다. 또한, 부가적인 설명을 통해 더욱 확실하게 OKFriends가 무슨 일을 하는지 알렸습니다.
히어로페이지의 아랫부분에는 재외동포재단과 부산 YMCA의 로고를 추가함으로써 검증된 기관이 운영하는 홈페이지라는 인식을 주어 신뢰를 주고자 하였습니다.
아래 섹션에는 너무 과하지 않게 꼭 필요한 정보만 메인페이지에 배치하여 가독성을 높여주었으며, 최하단 부분에도 협력한 국가기관의 로고를 추가하여 다시 한 번 더 신뢰를 강화하였습니다.
2. OKFriends 연수실 페이지
연수실 페이지는 OKFriends의 가장 핵심인 강의 사이트 부분인데요.
앞서 강의 사이트의 디자인은 사용자가 알아보기 쉬운 친화적인 디자인이어야만 한다고 말씀드렸던 것을 기억하시나요?
누가 봐도 알기 쉽고, 누가 써도 편리하게 이용할 수 있도록 직관적인 디자인을 만드는 것이 핵심입니다.
그 이유는 무엇일까요? 우리가 평소 공부하는 환경을 생각해봅시다.
공부를 하려고 책상에 앉았는데, 하나도 정리가 되어 있지 않고 난잡하다면 집중이 잘 안되겠죠?
분명 공부를 시작하기도 전에 책상정리에만 2~3시간을 매진하는 사람도 있을 것 입니다.
이는 LMS 사이트에서도 마찬가지입니다. 결국 강의 사이트도 공부를 하기 위한 하나의 공간이기 떄문이죠.
강의를 듣기 위해 사이트에 들어왔는데, 원하는 강의는 찾기 힘들고 다음 강의로 이동하는 버튼은 어딨는지 보이지 않는다면 매우 불편하겠죠?
실제로 ATD에서 발표한 연구 결과에 의하면, 40%의 학습 대상자가 lMS에서 가장 불만족하는 포인트가 사용자 인터페이스(UI)라고 답변했습니다.
또한 LMS 활용을 저해하는 요인으로 46%의 응답자가 사용하는 LMS의 UI가 형편 없다라고 답했습니다.
다시 말해, LMS를 이용하는 학습자의 절반은 UI 때문에 사용을 그만둔다라는 말이 됩니다.
아몽소프트웨어는 OKFriends의 연수실 사이트를 제작할 때, 시청 유의사항을 맨 위에 배치하여 눈에 띄게 만들었습니다.
또, 강의를 항목별 탭으로 나누어 사용자가 필요한 강의를 손쉽게 찾아볼 수 있도록 만들었으며 강의제목 뿐만 아니라 썸네일을 활용해 가독성을 높이고 파악하기 쉽게 디자인하였습니다.
강의 클릭 시 강의 계획서, 자료, 과제제출 등 필요한 자료를 왼쪽에 배치함으로써 사용자 친화적인 UI/UX 디자인을 하였습니다.
강의 영상을 전체화면으로 늘릴 수 있게 하고, 일시정지 기능을 추가하였으며 화질을 바꾸는 옵션까지 추가하여 다양한 환경에서 강의를 볼 수 있도록 편리하게 제작하였습니다.
3. OKFriends 마이페이지
마지막으로 마이페이지에서는 수강생 수와 신청한 강의, 수강 중인 강의, 수강완료 된 강의를 보여주어 여태까지의 진행도를 살펴보기 쉽게 만들었습니다.
LMS 개발 사례, OKFriends 홈페이지 기술
1. Auto Scaling (서버 기술)
OKFriends와 같은 강의 사이트에서 가장 중요한 것은 사이트의 안정도입니다.
홈페이지 방문자들은 강의를 보기 위해 LMS 사이트에 방문할 것 입니다.
일반적인 사이트의 경우, 영상의 길이가 2분을 넘는 경우는 거의 없지만 lMS의 경우는 최소 10분 안팍의 동영상이 주 컨텐츠입니다.
심지어, 한 번에 한 명만 강의를 시청하는 것이 아니라 여러 사람이 동시에 시청을 할 수 있기 때문에 서버 용량을 신경쓰지 않는다면 서버가 터지는 불상사가 발생할 수 있습니다.
서버가 터지면 사이트 전체가 다운될 것이고, 어마무시한 금액의 서버 비용이 청구될 수도 있습니다.
그래서 아몽소프트웨어는 이같은 LMS의 문제를 해결하기 위해 서버에 오토 스케일링(Auto Scaling) 기술을 적용했습니다.
오토 스케일링이란 서버 사이즈를 자동으로 조절하는 기술로, 클라우드의 핵심 기술이라고만 알고 계시면 됩니다.
(여기서 더 알려드렸다간 담당자님께서 글을 나가실 수도 있으니까요!)
이 기술을 통해 갑자기 많은 사용자가 방문하는 것을 대응할 수 있습니다 .
또한 서버의 사이즈를 조절하여 서버 과부하를 예방하고, 사이트가 다운 되는 것을 막을 수 있으니 LMS 강의 사이트에선 꼭 필요한 기술입니다.
뿐만 아니라 OKFriends 홈페이지에서는 서버 용량을 효과적으로 관리하면서 서버에 들어갈 비용 또한 절약할 수 있도록 제작을 마쳤습니다.
2. 로그인 기능
앞서 설명했던 마이페이지에 접속하려면 우선 로그인이 필요합니다.
회원가입은 미리 발급된 아이디를 사용해야 하기 때문에 OKFriends 홈페이지에서는 따로 불가능하며, 로그인 및 상태 유지, 비밀번호 찾기 등의 기능을 구현했습니다.
아이디와 비밀번호를 입력한 뒤 로그인을 클릭하면 필드에 입력된 값이 중복인지, 존재하는지 등등 검사를 거쳐 로그인을 합니다.
만약 빈 칸으로 입력된 값이 넘어간다면 값이 입력되지 않았다는 오류 문구를 띄우게 됩니다.
또한, 비밀번호가 틀렸거나 존재하지 않는 아이디가 입력된다면 데이터베이스(DB)에서 이를 철저하게 검사하여 오류를 띄우도록 세팅했습니다.
로그인 성공 시 마이페이지로 넘어가며 세션에 아이디가 등록됩니다. 로그아웃을 클릭하면 세션이 초기화되며 로그인 화면으로 돌아갑니다.
3. SEO 세팅
마지막으로, 검색 엔진 최적회(SEO) 세팅을 해주었습니다.
검색 엔진 최적화란, 구글이나 네이버와 같은 검색 엔진에서 상위노출이 되도록 최적화를 하는 것을 의미하는데요.
검색 결과 상위노출이 중요한 이유는, 사람들은 상위에 노출된 5개의 결과물만 볼 확률이 높기 때문입니다.
담당자님께서도 궁금한 게 있어 검색을 하면 첫 번째, 두 번째에 있는 결과물을 가장 먼저 보듯이 말이죠.
그래서 아몽소프트웨어는 홈페이지 제작을 진행할 때마다 검색 엔진 최적화에 가장 많은 신경을 기울이는데요.
웹 표준에 맞는 HTML 태그를 사용하여 SEO 점수를 높이고, 이미지 압축을 통해 로딩 시간을 줄여 구글 SEO에 좋은 영향을 주었습니다.
뿐만 아니라 검색 키워드 분석을 통해 상위노출 시키기에 가장 최적화된 키워드를 찾아내어 적용시켜 주었습니다.
지금까지 LMS 개발 사례인 OKFriends에 대해 설명드렸습니다.
아몽소프트웨어는 수 차례 LMS 제작을 진행하면서 한 가지 깨닫게 된 사실이 있습니다.
바로 앞으로 발생할 문제상황을 예상하고, 이에 대한 방안을 미리 생각해내는 것이 매우 중요하다는 점이었습니다.
만약 LMS 제작을 진행하면서 서버 용량에 대한 문제를 미리 생각하지 못했다면 분명 서버 과부하로 인해 사이트가 다운되는 문제 상황이 발생했을 것 입니다.
영상으로 인한 문제를 파악했기에 천만다행이었습니다.
담당자님께서도 이처럼 문제를 미리 예상하고 해결할 수 있는 능력을 가진 업체를 만나셔야 합니다.
물론 아몽소프트웨어도 예상하지 못했던 이슈가 발생하는 순간은 항상 있었습니다. 하지만, 항상 대처를 잘해왔기에 꾸준히 프로젝트를 완수할 수 있었습니다.
긴 글 읽어주셔서 감사드리며, 다음번에는 더 좋은 정보로 찾아뵙겠습니다.