안녕하세요? 스프링노트 UI 개편 소식을 알려드립니다~

월요일 저녁 스프링노트에 접속해보신 분들이라면 새로이 바뀐 디자인에 깜짝 놀라셨으리라 생각됩니다.^^  드디어 9일 저녁에 새로운 스프링노트 디자인을 여러분들께 선보이게 되었습니다. 새 디자인 UI 개편을 준비하던 스프링노트 팀의 풍경부터 먼저 보여드릴까요? ^^
 

△ 8일 일요일 밤, 개편을 앞둔 스프링노트팀의 풍경, 휴일도 마다않고 새로이 바뀌게 될 디자인 UI 구성요소들을 꼼꼼히 챙겨보고 있습니다.

△ 9일 월요일 오후, 마지막까지도 좀 더 쉽고 직관적인 스프링노트 UI를 만들기 위해 고민, 고민을 반복했죠. ^^

△ 9일 월요일 오후, 오픈 직전까지 미처 챙기지 못한 버그는 없는지 보고 또 보고..

△ 9일 월요일 오후, 소스코드에 문제는 없는지 챙겨보고 있습니다.

△ 9일 월요일 오후, 버그가 발견될 때마다 바로바로 수정하기~

스프링노트 새싹오픈 이후 사용자 커뮤니티에 올려주셨던 많은 의견들과 지난 4월 말에 진행되었던 사용성 테스트 결과를 바탕으로 디자인 및 UI 설계 작업을 진행하였습니다. 이전 스프링노트의 익숙함을 크게 변경하지 않되, 혼돈을 주었던 요소들을 깔끔하게 정리한다는 것이 이번 디자인 개편의 가장 큰 목표였습니다.

 
새 스프링노트 디자인에서 바뀌게 된 부분들을 요약하면 다음과 같습니다.

1. 전체 스크롤에서 내부 스크롤로 위치 변경하여 잦은 이동 없이 네이게이션 하기
   
2. 바로가기를 없애고 검색 버튼 통일로 혼란 없애기
   
3. 에디터 분리로 필요할 때만 에디터가 나오기
   
4. 페이지 관계(엮인 페이지, 하위페이지)들을 한 눈에 보기
   
5. 각 페이지의 상태 (공개/비공개, 공유)를 한 눈에 파악하기
6. 어려운 공개/공유 설정을 쉽게 하기
   
7. 자주 쓰는 기능 메뉴 버튼에서 빨리 찾기
8. 첨부파일 정보 자세히 보기, 본문에 쉽게 담기
9. 페이지의 변동 사항을 쉽게 확인하기
10. 왼쪽,본문,오른쪽 3단 영역의 크기를 각각 자유롭게 변경하기
11. 책갈피 제목 글자 길게 보기

기능들을 재편하고, 복잡했던 UI를 단순화하는 것이 이번 디자인 UI 개편의 주 목표이기도 하지만, 많은 분들께서 요청 주셨던 '스킨/테마' 기능을 제공해드리기 위한 준비작업 역시 이번에 함께 진행되었습니다.

이제 아래에서 이번에 개선된 디자인 UI요소들을 하나하나 자세히 소개해드리겠습니다. 새 스프링노트 디자인! 함께 살펴볼까요?

스프링노트 디자인UI Ver.2 / 이렇게 바뀌었습니다!

• 긴 페이지를 아래로 스크롤해도, 네비게이션과 책갈피를 항상 이용할 수 있습니다.
  

페이지를 아래로 내리더라도 네비게이션이나 책갈피가 항상 따라다녔으면 한다는 스프링노트 사용자분들의 의견이 많이 올라왔었습니다. 이에 따라 노트의 스크롤을 내부에서 움직이게 하여 연관된 페이지나 히스토리도 스크롤 위치와 상관없이 확인할 수 있고, 첨부된 파일도 언제든지 본문에 넣을 수 있습니다.

내부 스크롤이 생기면서, 스프링노트 편집기에서 종종 발생되었던 상당수 버그들도 이번에 함께 해결되었습니다. 페이지를 올릴 때 케럿이 툴바 아래로 숨는 버그 등도 이번에 모두 해결되었습니다^^

△ 페이지를 아래로 스크롤해도 네비게이션과 책갈피를 항상 이용할 수 있습니다.

• 왼쪽, 오른쪽 영역 크기 조절이 가능합니다.

네비게이션 창폭 조절이 가능했으면 한다는 사용자분들의 의견도 많이 올라와, 왼쪽, 오른쪽 영역의 크기 조절이 가능하도록 개선하였습니다. 책갈피 길이도 조절할 수 있게 하자는 의견도 함께 반영하였습니다.
 

△ 왼쪽 네비게이션 영역의 사이즈를 조정할 수 있습니다. 오른쪽 영역을 늘리면 책갈피 글자 길이도 길게 볼 수 있습니다.

△ 상단에 페이지 위치가 표시되어 빠르게 페이지를 이동할 수 있습니다.

• 페이지 아이콘으로 공개/비공개 여부도 알 수 있습니다.

스프링노트 사용자이신 투덜스님, 南無님, zyint님, hyeonseok님, Jesse님 등 정말 많은 분들께서 요청해주셨던 부분입니다. 페이지 목록보기나 전체 페이지 관리하기 등에서 보여지는 페이지 아이콘에, 함께 쓰기 상태 뿐만 아니라 공개/비공개 여부도 함께 보이게 했습니다.
 

△ 함께 쓰기 상태, 공개/비공개 여부를 아이콘에서 바로 확인 가능합니다.

△ 전체 페이지에서도 공개/비공개 여부를 바로 확인할 수 있습니다.

• 페이지 목록들을 편하게 접거나 펼쳐 볼 수 있습니다.
  

페이지 목록보기(트리) 를 사용하시면서 하위페이지가 잘 펼쳐지지 않는다거나, 현재 열려있는 페이지의 하위페이지는 자동으로 펼쳐졌으면 좋겠다는 여러분들의 의견이 많이 있었습니다. 왼쪽 네비게이션 영역의 각 탭을 누르면 펼쳐지도록 설계하고, 또 현재 읽고 있는 페이지의 하위페이지는 기본적으로 펼쳐져 보이게끔 개선하였습니다.

△ 각 탭을 펼치거나 접어 쓸 수 있고, 현재 페이지의 하위 페이지는 기본으로 펼쳐 보입니다.

△ 트리에서 페이지 이름을 마우스로 잡아 끌어 위치를 이동시킬 때, 옮길 페이지와 담길 페이지 표시가 더 잘 보입니다.

• 페이지 공개/비공개 설정, 함께 쓰기 초대를 쉽게 할 수 있습니다.
  

복잡하게 설계되어 있던 페이지의 공개/비공개 설정, 공유설정을 간단하고 쉽게 개선하였습니다. 이 부분을 해결하기 위해, 스프링노트팀 구성원 모두 모여 정말 많은 시간동안 머리를 맞대어 생각을 모았었습니다=)

△ 페이지 제목 오른쪽에 현재 몇명이 페이지를 쓰고 있는지, 페이지가 모두에게 혹은 몇 명에게만 공개되어 있는지, 나만 볼 수 있는지가 문장으로 나타납니다.

△ 권한 상태 문구를 누르면 대화상자를 통해 함께 쓸 사람, 같이 보여줄 사람을 초대할 수 있습니다. 함께 쓸 사람이나 함께 읽을 사람 영역에 오픈ID를 쓰면 초대장이 발송됩니다. '누구나 읽을 수 있게'에 체크하면 페이지가 모두에게 공개됩니다.

• 툴바의 각 기능에 대한 도움말이 뜹니다

스프링노트의 툴바에 담겨져 있는 다양한 기능들을 풍성하게 사용하실 수 있도록, 툴팁 영역을 신설하였습니다.

△ 툴바에 마우스를 가져다 놓을 때마다 기능에 대한 간단한 설명이 뜹니다.

• 페이지 이름 변경 더욱 쉽게 찾을 수 있습니다.
  

페이지 이름 변경을 어떻게 하는지 찾지 못하는 분들이 많으셨습니다. 페이지 이름 옆에 RENAME이라는 버튼을 달아 페이지 이름 변경을 더욱 쉽게 할 수 있도록 개선하였습니다.

△ RENAME 버튼을 눌르면 바로 제목 수정을 할 수 있습니다.

• 히스토리 변동사항을 상세하게 확인할 수 있습니다.

페이지 내용의 수정 뿐만 아니라, 페이지의 제목 변경, 첨부파일 등록과 삭제, 공개/비공개 및 함께쓰기 초대 등 페이지에서 일어나는 다양한 활동들을 한눈에 살펴볼 수 있도록 히스토리 기능을 더욱 강화하였습니다. 함께 편집하는 활동이 활발히 이루어지는 팀스프링노트 오픈을 대비해 우선 적용한 기능으로, 개인 스프링노트에서도 이 기능을 사용할 수 있도록 하였습니다.

△ 스프링노트의 히스토리보기 코너에서, 페이지의 변동사항을 모두 볼 수 있습니다.

△ 첨부파일에 관한 히스토리만 따로 살펴볼 수 있습니다. 누가 언제 어떤 첨부파일을 올리고 삭제했는지를 알 수 있습니다.

△ 함께쓰기/공개,비공개 변경 등의 히스토리도 한눈에 볼 수 있습니다.

새로 개편된 스프링노트 디자인 어떠신가요?

이번 개편을 통해, 그 동안 스프링노트를 쓰면서 불편했던 많은 부분이 해소되었으면 하는 바램입니다.  스프링노트 사용자커뮤니티에 이번 개편에 대한 여러분들의 의견을 남겨주세요^^

스프링노트의 UI는 이번 개편을 기점으로 앞으로도 지속적으로 개선될 예정입니다. 불편한 사항 있으시거나, 개선되었으면 하는 부분이 있으시면 언제든지 스프링노트 사용자 커뮤니티에 제안해주세요^^

---- 스프링노트팀 올림