Header

  1. View current page

    스프링노트 가이드

Profile_image?t=1221746419&type=big
스프링노트 가이드 노트입니다.
339

7월 2째주 릴리즈

스프링노트 통신 - 7월 둘째주 릴리즈 안내 - "디자인 개편 완료!"

안녕하세요? 생각이 자라나는 노트, 스프링노트 입니다=)

이번 주 역시 2주 단위로 진행되는 스프링노트 릴리즈의 일곱번째 소식을 전해드리려 합니다.

 

월요일 저녁 스프링노트에 접속해보신 분들이라면 새로이 바뀐 디자인에 깜짝 놀라셨으리라 생각됩니다^^ 지난 5월 넷째주 스프링노트 통신에서 스프링노트의 디자인UI 개편작업이 시작되었다는 소식을 전해드렸는데요, 드디어 9일 저녁에 새로운 스프링노트 디자인을 여러분들께 선보이게 되었습니다. 이번 스프링노트 통신에서는 지난 두 달 남짓 저희가 준비해왔던 스프링노트의 디자인 UI 개편 소식부터 전해드리려 합니다. 새 디자인 UI 개편을 준비하던 스프링노트 팀의 풍경부터 먼저 보여드릴까요? ^^

 

_개편앞두고.jpg

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

rnote3.jpg

△ 9일 월요일 오후, 마지막까지도 사용자에게 좀 더 쉽고 직관적인 스프링노트 UI를 만들기 위해 고민, 고민을 반복하였습니다.

rnote1.jpg

△ 9일 월요일 오후, 오픈 직전까지 미처 챙기지 못한 버그는 없는지 다시한번 살펴보고 있습니다.

 rnote4.jpg

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

rnote2.jpg

△ 9일 월요일 오후, 버그가 발견될 때마다 바로바로 체크해 그 자리에서 고치고 있습니다.

 

스프링노트팀에서는 스프링노트 새싹오픈 이후 여러분들께서 사용자 커뮤니티에 올려주셨던 수많은 의견들과 지난 4월 말에 진행되었던 사용성 테스트 결과를 바탕으로 디자인 및 UI 설계 작업을 진행하였습니다. 5월 둘째주 스프링노트 통신에서 소개해드렸던 대로, 이전의 스프링노트에서 갑자기 바꾸지는 않되, 혼돈을 주었던 요소들을 깔끔하게 정리한다는 것이 이번 디자인 개편의 가장 큰 목표였습니다.

 

새 스프링노트 디자인에서 바뀌게 된 부분들을 자세히 말씀드리면,

  • 스크롤이 아래로 길게 뻗었던 부분을 수정해서 내부에서 스크롤이 생기도록 바꾸었습니다.
    잦은 에디터 오류 몇 가지가 해결되는 점, 왼쪽 전체 페이지 목록과 오른쪽 책갈피가 항상 나오게 할 수 있다는 점 등이 내부 스크롤을 채택한 이유였습니다.
  • 바로가기와 검색 버튼이 동시에 있어 생겼던 혼란을 해결하기 위해, 검색 버튼 하나만 남기기로 결정하였습니다.
  • 페이지 위치가 표시되는 네비게이션 부분과, 링크 첨부 텍스트 등 에디터 툴바 부분을 분리하여, 편집을 할 때에만 에디터 툴바가 나오도록 개선하였습니다.
  • 엮인페이지와, 하위페이지를 함께 표시하여, 연관된 페이지 정보를 한번에 살펴볼 수 있도록 하였습니다.
  • 페이지 아이콘에 공유상태 뿐만 아니라, 공개/비공개 여부도 나타나게끔 개선하였습니다.
  • 페이지를 공개하거나, 다른 사람들과 공유하는 것을 좀 더 쉽고 편리하게 할 수 있도록 하였습니다.
  • 자주 쓰이는 기능들은 메뉴 버튼에서도 찾을 수 있도록 개선하였습니다.
  • 첨부파일에 대한 정보를 좀 더 자세하게 제공하고, 첨부파일을 더욱 쉽게 본문에 담을 수 있도록 하였습니다.
  • 페이지의 변동사항을 더욱 쉽고 직관적으로 확인하실 수 있도록 분류를 더욱 체계화하고, 비교 결과가 더욱 정확히 나오도록 개선하였습니다.
  • 왼쪽 네비게이션 부분과 오른쪽 편집영역의 크기를 조절할 수 있도록 하였습니다.
  • 2자까지만 표시되던 책갈피 글자 길이를 더욱 늘릴 수 있도록 하였습니다.

 

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

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

 

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

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

페이지를 아래로 내리더라도 네비게이션이나 책갈피가 항상 따라다녔으면 한다는 스프링노트 사용자분들의 의견이 많이 올라왔었습니다. 이에 따라 노트의 스크롤을 내부에서 움직이게끔 새로이 개선하였습니다. 이제 긴 페이지를 아래로 스크롤해도, 네비게이션과 책갈피를 어디에서나 이용할 수 있습니다.

내부스크롤.gif

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

연관된 페이지나 히스토리도 스크롤 위치와 상관없이 확인할 수 있고, 첨부된 파일도 언제든지 본문에 넣을 수 있습니다.

 

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

 

왼쪽, 오른쪽 영역 크기 조절이 가능하도록 개선하였습니다

네비게이션 창폭 조절이 가능했으면 한다는 사용자분들의 의견도 많이 올라왔었습니다. 이번에 디자인을 개편하면서 왼쪽, 오른쪽 영역의 크기 조절이 가능하도록 새로이 개선하였습니다. 책갈피 길이도 조절할 수 있게 하자는 여러분들의 의견도 이번에 함께 반영하였습니다.

 

사이즈조정.gif

△ 왼쪽 네비게이션 영역의 사이즈를 조정할 수 있습니다. 많은 분들께서 요청주셨던 대로, 오른쪽 책갈피 글자 길이도 늘릴 수 있도록 하였습니다.

 

아코디언.gif

△ 왼쪽 네비게이션 영역의 각 탭 제목을 누르면 해당 항목이 펼쳐지도록 설계하였습니다.

동시에 여러 항목을 펼칠 수도 있고, 한 항목을 남기고 모두 접을 수도 있습니다.

 

위치표시.gif

△ 상단에 페이지 위치가 모두 표시되어 빠르게 페이지를 이동할 수 있게끔 개선하였습니다.

 

 

페이지 아이콘에 공개/비공개 여부도 표시되도록 개선하였습니다.

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

 

공유공개상태를한눈에아이콘.gif

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

전체페이지관리.gif

△ 전체 페이지 관리하기 역시 개선된 아이콘으로 공개/비공개 여부를 바로 확인할 수 있습니다.

 

페이지 목록보기(트리)의 성능을 개선하였습니다.

페이지 목록보기(트리) 를 사용하시면서 하위페이지가 잘 펼쳐지지 않는다거나, 현재 열려있는 페이지의 하위페이지는 자동으로 펼쳐졌으면 좋겠다는 여러분들의 의견이 많이 있었습니다. 이번 디자인 UI 개편 과정에서 페이지 목록보기의 성능도 대폭 개선하였습니다.

트리.gif

△ 현재 읽고있는 페이지의 하위페이지는 기본적으로 펼쳐져 보이게끔 개선하였습니다.

 

명확한이동.gif

△ 트리에서 페이지 이름을 마우스로 잡아다가 위치를 이동시킬 때,
옮길 페이지와 담길 페이지 표시가 더욱 잘 보이게끔 개선하였습니다.

 

페이지 공개/비공개 설정, 함께 쓰기 초대를 더욱 쉽게 할 수 있도록 개선하였습니다

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

권한상태.gif

△ 페이지 제목 오른쪽에 현재 몇 명이 페이지를 쓰고 있는지,

페이지가 모두에게 공개되어 있는지, 나만 볼 수 있는지, 혹은 몇명 만 볼 수 있는지를 문장으로 쉽게 풀어 나타내었습니다.

 

권한설정다이얼로그.gif

△ 권한 상태 문구를 누르면 함께 쓸 사람들, 같이 보여줄 사람들을 초대할 수 있는 대화상자가 표시됩니다.

    함께 쓸 사람, 함께 읽을 사람 칸에 오픈ID를 쓰면 초대장이 발송됩니다.

   '누구나 읽을 수 있게'에 체크하면 페이지가 모두에게 공개되고, 체크를 끄면 나에게만, 혹은 몇 명에게만 페이지가 보입니다.

 

툴바에 도움말이 바로바로 뜹니다

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

 

툴바기능안내.gif

△ 툴바에 마우스를 가져다 놓을 때마다 기능에 대한 간단한 설명이 뜨게끔 개선하였습니다.

 

페이지 이름 변경 더욱 쉽게 찾으세요

제목변경.gif

△ 페이지 이름 변경을 어떻게 하는지 찾지 못하는 분들이 많으셨습니다.

페이지 이름 옆에 RENAME이라는 버튼을 달아 페이지 이름 변경을 더욱 쉽게 할 수 있도록 개선하였습니다.

 

 

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

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

 

전체히스토리.gif

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

 

첨부히스토리.gif

△ 첨부파일 등록에 관한 히스토리만 따로 살펴볼 수 있습니다.

누가 언제 어떤 첨부파일을 올리고 삭제했는지를 살펴볼 수 있습니다.

공유히스토리.gif

△ 힘께쓰기/공개,비공개 전환 등 공유/권한 설정에 관한 히스토리도 한번에 살펴볼 수 있습니다.

 

사소한 기능 하나하나에도 쓰시는 데에 불편함이 없도록 각 기능마다 목적과 기대를 하나하나 검토해 동선을 설계하고 묶어내는 작업들을 진행하였습니다. 이번 개편을 통해, 여러분들께서 그동안 스프링노트를 쓰시면서 불편을 느끼셨던 많은 부분들이 해소되었으면 하고 바라고 있습니다. 새로 개편된 스프링노트 디자인 어떠신가요? 스프링노트 사용자커뮤니티에 이번 디자인 개편에 대한 여러분들의 의견을 남겨주세요^^

 

지난 2주동안 이렇게 바뀌었어요! (2007/07/12)
  • [새 기능] 적용했던 서식 다시 적용하기, 편집영역 활짝 펼치기, 텍스트 대화상자 열기 단축키 추가! (제안자 : humnaleague 님, 투표수 : 9표)

    • 노란색 형광색을 칠하는 기능에도 단축키를 달아달라는 제안이셨습니다. 구현하는데에 어렵지 않고 많은 분들이 필요로 하셨던 기능이었습니다. 이미 지난 새 기능 추가 때에도 비슷한 제안이 올라와, 다른 분들의 아이디어까지 함께 고려하여 포괄적으로 반영하였습니다.
    • Ctrl+Alt+W 키를 누르시면 이전에 사용한 서식을 다시 적용할 수 있게끔 반영하였습니다. 형광펜 기능 역시 우선 한번 형광펜 스타일을 적용한 뒤 Ctrl+Alt+W 키를 누르면 형광펜을 반복적으로 사용하실 수 있습니다.
    • Ctrl+Alt+F 키를 누르시면 텍스트 대화상자가 띄워지거나 감추어집니다.
    • Ctrl+Alt+M 키를 누르시면 왼쪽 네비게이션 상자들을 접거나 펼칠 수 있습니다.
    • Mac의 경우 Ctrl+Alt+__ 조합 대신 Ctrl+Command+__ 조합을 쓰시면 됩니다.

      즉, Ctrl+Command+W, Ctrl+Command+F, Ctrl+Command+M 키를 누르시면 됩니다^^

    • 제안해주신 humnaleague님, 답글 달아주신 forever님, 스퀴드님께 감사드립니다.
  • [새 기능] 계산기 기능 ( 제안자 : 다크마검성 님, 추천수 : 9 표  )
    • 계산기 프로그램을 따로 켜지 않아도, 계산을 따로 하지 않아도 스프링노트에서 사칙연산 수식을 쓰고 그 계산 결과를 문서에 넣을 수 있게 해달라는 제안이셨습니다.
    • 답글로 아이디어를 주셨던 hey님 말씀처럼 @c:10+20 이라 쓴 뒤 Ctrl+Space를 누르면 계산이 되는 형태로 구현하였습니다.
    • @c=:10+20 이라 쓴 뒤 Ctrl+Space를 쓰면, 10+20 = 30 형태로 이전의 사칙연산 수식과 함께 결과값이 표시됩니다.
    • @c:50*20+10/2 등 더하기, 빼기, 나누기, 곱하기 계산이 모두 자동으로 이루어집니다.
    • 제안해주신 다크마검성 님과 답글로 아이디어를 보태어주신 hey님, 그 외 답글 달아주신 codelub님, shinoops님과 투표에 참여해주신 모든 분들께 감사드립니다.

 

지난 스프링노트 통신에서 소개해드린 것 처럼 스프링노트 팀에서는 팀스프링노트의 출시와 스프링노트 홈 개편, 안정성 확보를 바탕으로 한 8월 말 정식 오픈을 준비하고 있습니다. 그동안 사용자 아이디어 투표 과정에서 장기적으로 준비하겠다거나, 잠시 유보하겠다고 말씀드렸던 기능들 중 중요하다고 판단되는 기능들을 이번 기회에 다시 모아 반영해드리고자 합니다. 예를 들어 neomano 님께서 제안해주셨던 포스트잇 기능이나, 無異 님께서 제안해주셨던 todo 체크박스 기능 등 장기 과제로 미루어져 채택이 되지 않았던 제안들도 팀 스프링노트 준비과정에서 반영하기로 하였습니다. 지난 3개월동안 보류되었던 여러분들의 제안 기능들을 반영하기 위해, 2주 단위로 사용자 아이디어를 채택하던 프로세스는 8월까지 잠시 미루려 합니다. 여러분들의 지난 제안들이 정식 기능으로 추가되는대로 스프링노트 통신을 통해 하나하나 자세히 소개해드리도록 하겠습니다. 그동안 보류되었던 기능들을 반영하여 정식 오픈이 이루어지면, 정기적으로 여러분들의 아이디어를 반영하는 프로세스를 다시 시작할 것을 약속드립니다.^^

 

그동안 스프링노트에 애정어린 격려 말씀을 주셨던 많은 분들께 감사드립니다. 기나긴 시간동안 저희가 고민과 고민을 거듭하면서 준비했었던 스프링노트의 새 디자인을 드디어 여러분들께 선보일 수 있게 되어서 무척 뿌듯하게 생각합니다.  스프링노트의 디자인 UI는 이번 개편을 기점으로 앞으로도 지속적으로 개선될 예정입니다. 이번 디자인 개편에서 불편한 사항 있으시거나, 개선되었으면 하는 부분이 있으시면 언제든지 스프링노트 사용자 커뮤니티에 제안해주세요^^

 

새로이 바뀐 스프링노트. 주윗 분들에게도 널리 소개해주시고, 격려는 물론 따끔한 충고 역시 부탁드리겠습니다. 언제나 여러분들께 약속드렸던 것 처럼 여러분들과 함께 무럭무럭 자라나는 스프링노트가 될 수 있도록 노력하겠습니다.

감사합니다.

 

스프링노트 팀 드림.

 

 

History

Last edited on 07/12/2007 18:13 by 스프링노트 팀

Comments (0)

You must log in to leave a comment. Please sign in.