01_리디자인, 초기화면구성까지
한 것 What I have done
멋사7기 과제 중 하나였던 두근두근 다이어리를 리디자인해서 당장복습헤! 라는 복습용 기록 저장 사이트를 디자인했다. 총 4회 복습을 하도록 의도하였다. 공부 직후 1회, 24시간 후 1회, 1주일 후 1회, 1달 후 1회, 총 4회 복습을 하면 공부를 한 내용의 최대 80%를 장기기억으로 전환할 수 있다는 이론을 바탕으로 기획되었다. 복습을 기록하는 시점에서는 어제, 일주일전, 한 달 전에 작성했던 기록들이 표시되면서, 다시 타이핑 하면서 복기할 수 있도록 의도하였다.
1 . 리디자인
기존 다이어리의 기능이 오늘의 일기를 입력하고 이전의 일기를 표시하는 간단한 기능이었고, 이를 보자마자 내가 평소 공부하면서 활용하는 복습법을 서비스하는 페이지를 만들고 싶었다.
컬러팔레트: 다크모드의 velog 배색을 따왔다.
레이아웃
기존의 두근두근 다이어리 레이아웃을 그대로 사용했다가, 새로운 기록을 추가하는 창과 기존 기록들을 보는 창을 분리하였다.
기록들을 경과한 시간 별로 분류하는 탭을 추가하였다.
2. 구현
module.html css를 만들어서 버튼이나 인풋과 같은 중복되는 ui를 재사용할 수 있도록 만들었다.
자발적으로 만들어보는 첫 페이지라서 JS나 React를 더 배우기 전까지 일단은 외관 구현에 중점을 두었다.
고민한 부분 What I have contemplated
1. UX writing
단순히 기록의 시점을 분류하는 타이틀이 아닌 기록을 함으로써 얻을 수 있는 효과를 포함한 타이틀을 작성함으로써 사용자가 서비스를 이용하고 싶게끔 유도하였는데, 같은 문구가 여러번 반복되니까 지루하다는 느낌을 줄 수 있을 것 같다.
2. 플로팅 버튼 위치
새로운 기록을 추가하는 버튼의 위치에 대한 고민 > 가장 주요한 기능이기 때문에 가운데 아래쪽 (엄지손가락이 잘 닿는 부분)에 위치시키고 싶었는데, 내용을 가려서 section 우측으로 뺐다. 그랬더니 눈에 잘 띄지 않는다 가장 중요한 CTA라고 생각해서 강조하고 싶었는데 잘 안 된 것 같다.
3. 섹션 - 페이지 분리 잘한일인가?
한 페이지에 한 가지 기능만 넣고싶어서 기록을 추가하는 섹션과 이전 기록을 보고 복습하는 섹션을 분리했는데, 둘 다 중요한 기능이라서 분리한게 맞는지에 대한 고민, 분리하면 한 뎁스가 늘어나는 거니까, 분리된 추가 섹션은 접근성이 약간이지만 떨어지는게 사실이라고 생각했다.
느낀 점 What I felt
CSS 클래스 재사용성을 고려하려면 더 체계적으로 디자인을 하고 코드를 짜야할 것 같다.
디자인만 할 때는 몰랐는데 직접 제작해보면서 하니 개선해야 할 부분이 계속 보이고 수정사항이 계속 생긴다.
앞으로 할 일 What I have to do from now on
동적으로 데이터를 넣기 위한 JS 코드
이전 기록들이 점점 쌓일텐데 그 많은 기록들을 어떻게 모아보고 보기좋게 표시할지 분류와 정렬, 검색과 같은 기능이 필요할 것으로 예상된다.
Last updated