01_리디자인, 초기화면구성까지

한 것 What I have done

멋사7기 과제 중 하나였던 두근두근 다이어리를 리디자인해서 당장복습헤! 라는 복습용 기록 저장 사이트를 디자인했다. 총 4회 복습을 하도록 의도하였다. 공부 직후 1회, 24시간 후 1회, 1주일 후 1회, 1달 후 1회, 총 4회 복습을 하면 공부를 한 내용의 최대 80%를 장기기억으로 전환할 수 있다는 이론을 바탕으로 기획되었다. 복습을 기록하는 시점에서는 어제, 일주일전, 한 달 전에 작성했던 기록들이 표시되면서, 다시 타이핑 하면서 복기할 수 있도록 의도하였다.

• 깃허브 repository

• 실행 페이지

1 . 리디자인

메인페이지 As-is

메인페이지 To-be

기존 다이어리의 기능이 오늘의 일기를 입력하고 이전의 일기를 표시하는 간단한 기능이었고, 이를 보자마자 내가 평소 공부하면서 활용하는 복습법을 서비스하는 페이지를 만들고 싶었다.

1. 컬러팔레트: 다크모드의 velog 배색을 따왔다.

2. 레이아웃

• 기존의 두근두근 다이어리 레이아웃을 그대로 사용했다가, 새로운 기록을 추가하는 창과 기존 기록들을 보는 창을 분리하였다.

• 기록들을 경과한 시간 별로 분류하는 탭을 추가하였다.

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 코드

• 이전 기록들이 점점 쌓일텐데 그 많은 기록들을 어떻게 모아보고 보기좋게 표시할지 분류와 정렬, 검색과 같은 기능이 필요할 것으로 예상된다.