PGR21.com
- 자유 주제로 사용할 수 있는 게시판입니다.
- 토론 게시판의 용도를 겸합니다.
Date 2017/06/03 16:32:00
Name 시드마이어
Subject [일반] 첫 크롬 확장 프로그램 만들기
하루는 생활코딩 영상을 보다가 크롬 확장 프로그램을 만드는 영상을 보게 되었습니다.



이걸 보면서 정말 괜찮았던건 단어 수를 세주는게 아니라 크롬 새 탭이 참 멋지다는 느낌을 받았습니다. :) 그래서 나도 한 번 해보자 해서 만들어봤습니다. 단순히 랜덤 백그라운드 기능만 있는 프로그램을 만들 수도 있었겠지만, 조금더 제가 필요로 하는 기능을 넣어보고 싶었습니다. 인터넷으로 일을 할 때 To do 리스트가 있었으면 좋겠다는 점과 장기적인 목표도 자주 보고 싶었습니다.

먼저 괜찮은 프로그램을 찾아봤는데 멋지다고 생각한 프로그램은 두 개 입니다.
Wunderlist와 Momentum 입니다.

yanyPdMFdKnKSmgnBRjm6vr69LE.png

위의 사진은 Momentum인데 이미지도 직관적이고 하루에 집중해야할 것 하나만 적게 되어있습니다. Wunderlist는 리스트를 적을 수 있는 기능 하나만 있지만 굉장히 많이 사용되고 있었습니다. 그래서 여기서 여러 디자인 모티브를 삼고 레이아웃을 설계해봤습니다.

BYXX_7IlHmfakC5bIMP0puRsUQY.pngxzC-WsCTu3TOJ88KpLwQWmHEVU4.png

저는 같이 동업을 하기로한 디자이너 친구가 있어 이러한 모티브와 레이아웃을 가지고 어떤 식으로 만들면 될까 부탁하니, 이런저런 아이콘과 레이아웃을 보내주었습니다.

S2xu7PbTuOsLYQ2EzhgPUftU_FQ.png

덕분에 디자인 제작시간을 많이 줄이게 되었고(아이콘 만드는 일 같은), 처음이지만 50시간동안 열심히 만들어 출시하게 되었습니다.
사실 기능이라곤 할 일을 적는 기능 뿐입니다. 한가지 추가하자면 로그인하는 모든 크롬에서 동기화도 된다는 점도 있습니다.

그래서 어제 출시를 하고 오늘 약간의 수정을 해서 아래의 모습이 되었습니다.
18882122_1370124163079546_5063198430169963046_n.jpg?oh=060cbab11a4d8fbebb374f701b485806&oe=59E0424318921942_1370148099743819_2918107572561780458_n.jpg?oh=47dbcdea9233cde2753ee6f7c2fe9a80&oe=59A00A9C
새 탭을 누를 때마다 랜덤 하게 화면이 바뀝니다. 현재 시간도 알 수 있구요. :)

저처럼 처음 만드는 사람도 쉽게 만들 수 있는 걸 보면 크롬 확장 프로그램은 구조가 참 간단한거 같습니다.
프로그래머 분들도 아시겠지만, 크게 기능을 구현하는 js파일, 골격이 되는 html 그리고 스타일시트만 만들어주면 됩니다.
웹스토어에 등록을 해두었는데 관심있으신 분들이 있을거 같아 링크남깁니다.

https://chrome.google.com/webstore/search/aurora%20planner?utm_source=chrome-ntp-icon&_category=extensions

모바일로도 들어가보려고 했는데, 모바일은 크롬 웹스토어에 들어갈 수가 없어서 이상한 화면만 보일 겁니다.
만드는 자세한 과정은 브런치에 적어두었습니다. 읽어주셔서 감사합니다. :)

https://brunch.co.kr/@skykamja24/60



통합규정 1.3 이용안내 인용

"Pgr은 '명문화된 삭제규정'이 반드시 필요하지 않은 분을 환영합니다.
법 없이도 사는 사람, 남에게 상처를 주지 않으면서 같이 이야기 나눌 수 있는 분이면 좋겠습니다."
쪼아저씨
17/06/03 17:19
수정 아이콘
오. 깔끔하네요.
개발자 혼자 만들면 디자인이 조악하기 마련인데 심플하고 깔끔하네요.
멋집니다 ^^
시드마이어
17/06/03 18:05
수정 아이콘
칭찬 감사합니다. :) 스타일 시트는제가 만들었지만 디자인은 제 친구가 큰 틀을 잡아주었습니다. 개발자로써 여러가지 디테일이 부족한데 뛰어난 디자이너 친구 덕분에 괜찮은 결과가 된거 같습니다.
17/06/03 17:46
수정 아이콘
잘쓰겠습니다. 디자인이 깔끔해서 좋네요
시드마이어
17/06/03 18:05
수정 아이콘
감사합니다. ^^
똥꼬쪼으기
17/06/03 17:59
수정 아이콘
바탕화면으로 이런기능 부가할 수 있었으면... 하고 수년 전부터 원했는데,
바탕화면은 아니라도 크롬으로 해결할 수 있겠네요.

추가 요구사항이 있어서 건의드립니다.
1. daily goal 같은 리스트 박스를 추가하고, 제목을 변경할 수 있는 기능
2. 리스트 박스의 크기를 조절하거나 또는 글자크기를 조절하는 기능

좋은 프로그램 만들어주셔서 감사합니다.
시드마이어
17/06/03 18:07
수정 아이콘
말씀하신 점은 그다지 어렵지 않으니 곧 할 수 있겠지만, 제가 군복무 중이라 간단한 기능도 추가하는데 시간이 꽤 걸리게 되네요;; 개인적인 목표는 다음달 중순까지 말씀하신 점하고, 몇가지 추가기능을 넣어보려고 합니다. 조금만 기다려 주세요~
시드마이어
17/06/03 19:18
수정 아이콘
방금 0.23버전으로 업데이트 하면서 제목 변경기능은 넣었습니다.
최대 60분정도 걸린다고 하는데 0.23버전이면 작동될겁니다.
다른 기능들은 다음에 해보도록 하겠습니다.^^
17/06/03 18:08
수정 아이콘
오잘쓰겟습니다
시드마이어
17/06/03 18:11
수정 아이콘
감사합니다~
17/06/03 20:58
수정 아이콘
회사에서 쓰기 딱 좋겠네요~ 잘쓰겠습니다
시드마이어
17/06/04 14:51
수정 아이콘
감사합니다 :)
보영님
17/06/04 00:51
수정 아이콘
멋있어요. 잘 쓰겠습니다.
시드마이어
17/06/04 14:51
수정 아이콘
멋져보이는게 목적이었는데 성공했네요. 감사합니다!
비가행
17/06/04 17:08
수정 아이콘
글자에 색을 넣을 수는 없을까요? Goal 마다 색을 정할 수 있다면 좀 더 화려하고 한 눈에 파악하기가 쉬울 것 같습니다.
시드마이어
17/06/04 17:48
수정 아이콘
의견 감사드립니다. :)
궁금한점이 입력하신 리스트 각각에 색을 넣는건가요? 아니면 리스트 타이틀(Daily Goals)에 색을 넣는건가요?
기능은 구현할 수 있긴합니다. 걱정되는 점은 각각마다 하게 되면 아무래도 컬러픽커를 여러개 넣다보니 리스트 공간에 완료 체크박스, 삭제 버튼, 컬러픽커까지 들어가서 복잡해지지 않을까 싶습니다.
비가행
17/06/04 17:55
수정 아이콘
리스트에 색을 넣을 수 있다면 좋겠다 입니다. 지금도 깔끔하고 멋진데 많은 색은 아니더라도 조금 차별이 있으면 좋겠다 정도네요.
시드마이어
17/06/04 17:58
수정 아이콘
리스트 배경색을 뜻하시는 거라면 금방 해볼 수 있을거 같습니다. :)
비가행
17/06/04 17:59
수정 아이콘
리스트 배경색이 아니라 리스트 글자색입니다. 꼭 색이 아니라면 각 리스트에 조금 차별을 둘 수 있었으면 좋겠다 정도네요.
지금도 충분히 깔끔해서 오히려 번잡할까 걱정도 되네요.
시드마이어
17/06/04 18:05
수정 아이콘
그렇군요. 설정창을 추가로 만들고 있는데, 위에서 다른분이 조언해주신 폰트 사이즈나 컬러 조절을 넣어보도록 하겠습니다.
비가행
17/06/04 18:11
수정 아이콘
네. 좋은 프로그램 만들어주셔서 감사합니다. 잘 쓰겠습니다.
목록 삭게로! 맨위로
번호 제목 이름 날짜 조회 추천
공지 [일반] [공지]자게 운영위 현황 및 정치카테고리 관련 안내 드립니다. + 선거게시판 오픈 안내 [28] jjohny=쿠마 25/03/16 22690 18
공지 [정치] [공지] 정치카테고리 운영 규칙을 변경합니다. [허들 적용 완료] [126] 오호 20/12/30 304577 0
공지 [일반] 자유게시판 글 작성시의 표현 사용에 대해 다시 공지드립니다. [16] empty 19/02/25 358415 10
공지 [일반] 통합 규정(2019.11.8. 개정) [2] jjohny=쿠마 19/11/08 361525 4
104263 [일반] 내가 죽어도 살아있을 기업: 버핏은 죽어도 코카콜라는 남는다 [5] Eternity808 25/06/06 808 2
104262 [일반] 일상잡담 [6] 로즈마리1033 25/06/06 1033 11
104261 [일반] 조금 다른 아이를 키우는 일상 12 [5] Poe1090 25/06/06 1090 13
104260 [일반] 해변에서 우연히 마작을 하게되다. [7] 가위바위보2137 25/06/06 2137 2
104259 [일반] 광무제를 낳은 용릉후 가문 (10) - 뒤늦은 깨달음, 경시제 유현 (2) [4] 계층방정1986 25/06/05 1986 1
104258 [일반] 개발자, AI보다 싸다. [23] 타츠야11101 25/06/04 11101 4
104257 [일반] 도망친 곳에 낙원은 없다 – 해외 생활 넋두리 [31] 쿠쿠다스10215 25/06/04 10215 77
104256 [일반] 웹소설 추천 : 섀도우 슬레이브 [16] 중년의 럴커5905 25/06/04 5905 3
104255 [일반] 영화 [신명] 관람 후기 [21] 아케르나르7394 25/06/04 7394 2
104254 [일반] 프로세카 극장판 감상문 (스포 포함) [3] 일사공사일육4270 25/06/03 4270 0
104253 [일반] 당신이 아무리 일하고 저축해도 확정적으로 "가난" 해지는 이유 [44] 삭제됨9579 25/06/03 9579 5
104252 [일반] <계산할 수 없는> 책 후기 - 계산기의 계산할 수 없는 지평 너머. [2] aDayInTheLife4336 25/06/03 4336 3
104251 [일반] ChatGPT는 'her'를 꿈꾸는가: AI와 연애하는 시대 [33] Eternity6300 25/06/02 6300 6
104250 [일반] 조금 다른 아이를 키우는 일상 11 [26] Poe6776 25/06/02 6776 50
104249 [일반] 나스닥, 모두가 튈 준비가 되어있다 [77] Eternity14763 25/06/01 14763 17
104248 [일반]  늙어서 곱씹는 연애의 추억 - 후일담 [18] 밥과글6579 25/06/01 6579 14
104247 수정잠금 댓글잠금 [일반] 어느 나라에서 이민을 받아야 할까요? [160] 제타스11274 25/06/01 11274 0
104246 [일반] <씨너스: 죄인들> - 이야기와 모티브를 패치워크로 엮어 달린다.(약스포?) [14] aDayInTheLife5885 25/05/31 5885 1
104245 [일반] KB5058499 업데이트 Win 11 24H2 시스템 그래픽 결함 해결 [12] SAS Tony Parker 8690 25/05/31 8690 2
목록 이전 다음
댓글

+ : 최근 1시간내에 달린 댓글
+ : 최근 2시간내에 달린 댓글
맨 위로