LMS Web 클론코딩 2 (대쉬보드 페이지 그리기)

2024/01/13

 

어제 설계한 것을 바탕으로 일단은 먼저 프론트 페이지를 빠르게 만들어 놓고 기능 구현을 하면 좋겠다는 생각이 들어 오늘은 무작정 첫 화면을 그리기 시작했다. 총 소요시간은 3시간 30분 정도 걸린 것 같다.

 

처음엔 금방 그려낼 수 있다는 생각이었는데 클론 코딩을 해본 적이 없어 디테일을 잡는 부분이 꽤나 어려웠고 애초에 html.css를 다룬 지 오래되어 초반에 조금 시간이 걸렸었다. 그래도 따라서하다 보니 금방 감을 잡고 한 것 같고 나머지 페이지들도 집중해서 한다면 금방 만들 수 있겠다는 자신감이 생겼다.

 

일단 오늘은 로그인 이후 첫 화면으로 생각중인 Dashboard 페이지를 만들었고, 옆에 붙어있는 사이드 바 까지 만들었다. 사이드 바의 경우 모든 페이지에 동일하게 들어가므로 미리 오늘 잘 만들어 두면 개꿀이다. 사이드 바에 있는 아이콘들 중 Courses 아이콘은 누르면 옆으로 메뉴가 슬라이딩되어 수강 중인 강의 목록들이 나오는데 이것을 아직 구현하지는 못했다. LMS 페이지 자체가 UI가 간단하고 복잡한 부분이 따로 없어서 이 부분을 깔끔하게 구현하는 것이 Front 페이지에서는 가장 중요하다고 생각이 들었다.

 

그럼 이제 오늘 그린 페이지와 원본 페이지를 비교해보자.

 

 

LMS 클론코딩 대쉬보드 페이지

LMS 원본 대쉬보드 페이지

 

첫날치고 나름 비슷하게 된 것 같아 만족스럽다. 아이콘 디테일이나 이미지, 글꼴 등은 수정이 필요하다.