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
수정 아이콘
네. 좋은 프로그램 만들어주셔서 감사합니다. 잘 쓰겠습니다.
목록 삭게로! 맨위로
번호 제목 이름 날짜 조회 추천
72239 [일반] 靑 "사드보고 위승호가 삭제지시..황교안은 알았다 [49] 마음을잃다14790 17/06/05 14790 5
72238 [일반] [속보] 사우디, UAE, 바레인, 이집트 등 4개국, 카타르와 단교 선언 [32] aurelius13685 17/06/05 13685 2
72237 [일반] DC 코믹스...일단 한숨 돌리다... [54] Neanderthal10511 17/06/05 10511 5
72236 [일반] 난 아마 세번째라고 생각해 [48] 루트에리노11410 17/06/05 11410 11
72235 [일반] "해피 벌룬"으로 인한 첫 사망자가 나왔습니다. [79] 어리버리17667 17/06/05 17667 1
72234 [일반] 웹툰 추천 - '여중생a' [36] 름바름9013 17/06/05 9013 7
72232 [일반] "그럼 다큐를 보지 왜 예능 프로그램 가지고 말이 많아" - [알쓸신잡] 후기 [99] 김현서15847 17/06/05 15847 8
72231 [일반] [스포주의] WWE PPV 익스트림 룰즈 2017 최종확정 대진표 [8] SHIELD4972 17/06/05 4972 0
72230 [일반] 모난 조각 - 미완성 [8] aDayInTheLife3894 17/06/05 3894 1
72229 [일반] 이런저런 유투브 이야기들 [37] 도뿔이10327 17/06/05 10327 1
72228 [일반] 문재인 정부의 정부조직 개편안이 나왔네요.gisa [54] 군디츠마라13636 17/06/04 13636 2
72227 [일반] 김상조 청문회의 이상한 투트랙 [34] The xian11630 17/06/04 11630 9
72226 [일반] 판을 바꾼 애플과, 가장 빨리 따라간 삼성 [91] Leeka14034 17/06/04 14034 7
72225 [일반] 또 런던에서 테러가 일어났네요. [52] 미키맨틀11924 17/06/04 11924 0
72224 [일반] 스마트폰 업계의 이익 독재자! 애플! [141] Neanderthal14794 17/06/04 14794 1
72223 [일반]  시진핑 측근 "친중 통일정부를 세우고 미국은 한반도에서 철수하는게 어떻겠냐" [69] 테이스터16184 17/06/04 16184 5
72222 [일반] 아 드디어 자유입니다. [2] 낭만없는 마법사7497 17/06/04 7497 10
72221 [일반] F-x사업 감사 진행중 [203] 무적다크아칸15809 17/06/03 15809 3
72220 [일반] 청산도 절로절로, 노래로 되살아나다 [2] VKRKO4883 17/06/03 4883 1
72219 [일반] 월간조선이 친박이 장악한 현 자유당의 미래는 암울하다는 기사를 냈네요 [87] 군디츠마라17701 17/06/03 17701 11
72218 [일반] '한겨레 임시주총 후기'라는 타 커뮤니티 글을 보고 [15] The xian12492 17/06/03 12492 8
72217 [일반] 첫 크롬 확장 프로그램 만들기 [20] 시드마이어8103 17/06/03 8103 4
72216 [일반] JTBC의 `기획 부동산`보도를 비판한 공인중개사 [17] Crucial10700 17/06/03 10700 18
목록 이전 다음
댓글

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