80시간 크롬 확장 프로그램 만들기
좀 더 보편적인 디자인으로
오로라 플래너 1.3.1버전꿈을 만들고, 이루는 삶을 살기 위한 프로그램을 만들고 싶다!
이번 글은 확장 프로그램 만들기 시리즈와 이어집니다. 이 글을 처음 보시는 분들은 50시간 크롬 확장프로그램 만들기 글을 먼저 읽어보시기 바랍니다.
#1. 자주 가는 페이지는 중요해
저와 함께 만들고 있는 디자이너 친구와 여자친구가 말했습니다. "자주가는 페이지가 없어서 불편해!" 크롬의 기본 탭을 사용하면 생기는 자주 가는 페이지 기능은 굉장히 편리한데 오로라 플래너 이전 버전에서는 자주가는 페이지는 없었습니다.
오로라 플래너 1.2.1버전아이콘이 귀여울지라도 페이스북, 인스타그램, 유튜브 아이콘은 궁여지책에 불과했었습니다. 그래서 자주 가는 페이지 한번 만들어봤습니다.
* Tip! 어떻게 기능들을 쉽게 만드는가?
잠깐 개발적인 이야기를 해보자면, 크롬 확장 프로그램을 쉽게 만드는 방법은 구글에서 기본으로 제공하는 샘플 코드를 참조합니다. 이 코드가 중요한 이유는 크롬 확장 프로그램은 내장된 기능들을 사용할 때 매니페스트 파일에서 퍼미션을 설정해주어야 합니다. 그 뿐 아니라 코드가 어떤 식으로 동작하는지를 확인해보면 API 문서를 읽는 것보다 훨씬 배우기 쉽습니다.
그래서 이런 레이아웃으로 만들면 어떨까 싶었습니다. 공간을 너무 좁게 만들 수 있으니 마우스오버 이벤트를 부여해서 자주가는 페이지를 보여주면 적절하겠다 싶었습니다. 혹은 키보드 이벤트도 고려해보구요. 때마침 기존의 레이아웃을 수정해보자는 제안을 받았습니다. 그래서 가장 보편적인 중앙 정렬방식으로 변경하고, 아래에 그리드 형태로 디자인을 했습니다.
잊혀진 OS인 윈8그리드 디자인은 윈도우 8이 했다가 망한 전례가 있긴 하지만(구글 폰에서도 사용되었고, 그것도 망했지만) 멋지게 한 번 도전해봤습니다.
제작에 들어간 고려사항은 크게 3가지 정도 됩니다.
1) 각각의 div에 window.location으로 링크 걸어주기
2) div에 mouseover시 커서 모양 바꿔주기
3) 적절하게 어울리는 컬러톤 만들어주기
자세히 보시면 각각의 링크 상자들에는 흐릿한 경계선이 존재하고, 그 뿐 아니라 컬러도 랜덤으로 변화하게 됩니다. 그래서 각 배경화면처럼 매번 모양이 달라지는 경우가 생깁니다. 또 커서 모양을 안바꿔주게 되면 마우스를 올려도 커서가 텍스트 위에 둘 때 나타나는 모양 혹은 그냥 포인터 모양으로 나타납니다.
그래서 완성! 하게 되었지만 사실 여기엔 나오지 않은 몇가지 버그와 효과들이 있습니다.
*실수들
아주 잠깐이었지만 1.3버전에는 치명적인 문제가 있었는데 div의 display 설정이 table-cell을 사용해서 한 줄에 모든 상자들이 낑겨들어갔습니다. 지금은 정상적으로 수정했지만 5개 이상부터 꾸겨지게 되면서 모양이 안이뻐집니다. 그래서 두개의 상위 div를 생성해서 각 div에 cell로써 넣는 형태로 바꿨습니다.
* 숨겨진 문제점
1. 글에서 써버려서 밝혀진 문제점이 되겠지만, 더 자주가는 페이지가 생겼을 때 이 문제가 생깁니다. 그건 바로 자주 가는 페이지가 창을 완전히 닫았다가 열 때 업데이트 됩니다. 처음에 window.onload에 가져오는 함수를 설정해서 문제가 되었나 싶어서 다른 곳으로 이동해봤는데도 여전히 안되고 있습니다. 이거는 위치를 잘 찾아내면 해결할 수 있지 않나 싶습니다.
2. 원래는 글자만 있는게 아니라 이미지도 함께 넣고 싶었습니다. 웹에서는 소위 favicon이라고 부르는데, 브런치에서는 필기체로 쓴 B 아이콘이 파비콘입니다. 이거는 favicon말고 할당된 이미지 파일을 불러오면 될 것 같습니다만 컬러톤도 고려해야되서 생각해볼 요소입니다.
3. 문제라기보단 아직 마우스오버 이벤트가 부족합니다. 링크 상자 위에 마우스를 올리면 '이게 지금 눌리고 있는거구나' 하게끔 보여줄 생각인데 곧 만들어보려고 합니다.
#2. 다음 버전은?
1) 드래그 이벤트
현재 고정되어 있는 까만 '할 일 목록'을 옮길 수 있게 수정할 생각입니다. 그 뿐 아니라 '할 일 목록'의 디자인도 조금 고쳐서 더 보기 좋게 만들어보려고 합니다.
2) 키보드 이벤트
장기적으로 오로라 플래너의 핵심 기능으로 발전시킬 예정인 키보드 이벤트입니다. 사용자가 '스페이스 바'를 누르면 '포스트잇'이나 '할 일 목록' 등이 모두 사라지거나 다시 나타나고, 특정 기능에 더 집중할 수 있는 레이아웃으로 전환되게 할 생각입니다. 오로라 플래너의 가장 중요한 것이 디자인과 생산성이 되기를 바라고 있습니다.
3) D-DAY
디데이 기능을 통해서 기본적인 스케쥴링 기능과 남은 시간을 직관적으로 표현할 생각입니다. 화면에 여러 요소들이 늘어나고 있어서 디자인을 잘 고려해야하고, 또 디데이 설정과 표시, 삭제, 변경 등의 여러 기능이 복합적으로 필요합니다.
#3. 다른 이야기
항상 그렇지만 저는 현재 군인이라 '사이버 지식 정보방'에서 작업을 하고 있습니다. 버그가 생겨도 바로 못고치는 점 죄송하게 생각합니다. 대신 이래저래 생각할 시간이 많아서인지 점점 더 좋은 방향으로 천천히 나아가는 것 같습니다.
읽어주시고 계속 사용해주셔서 감사합니다! :)
다운로드 링크: https://chrome.google.com/webstore/detail/aurora-planner/gheeojjcdeaefjjpploghdjpnbhanibe?hl=ko
