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
수정 아이콘
네. 좋은 프로그램 만들어주셔서 감사합니다. 잘 쓰겠습니다.
목록 삭게로! 맨위로
번호 제목 이름 날짜 조회 추천
72288 [일반] 강경화 후보자 청문회 소감 [26] 로빈9650 17/06/08 9650 9
72287 [일반] 도종환 후보자가 일단 모범답안을 들고 왔습니다.. [106] 황약사12470 17/06/08 12470 1
72286 [일반] 국방부, 내년 병장 월급 88% 인상 방침…40만5669원까지 [111] 삭제됨12216 17/06/08 12216 21
72285 [일반] 스타] 아재의 첫승 [47] 운동화126679 17/06/08 6679 17
72284 [일반] 검찰 안의 우병우 라인들이 정리되기 시작했습니다. [37] 어리버리14793 17/06/08 14793 9
72283 [일반] [번역]왜 한국의 젊은이들은 교회를 외면하는가? [220] 군디츠마라17947 17/06/08 17947 9
72282 [일반] 서해 NLL에서 불법조업하던 중국어선들이 사라졌습니다. [30] 삭제됨12179 17/06/08 12179 22
72281 [일반] 오랜만에 생각나서 풀어보는 대학원 3-4년차에 겪은 이상한 과제에 엮인 썰. [21] 아드오드8054 17/06/08 8054 2
72279 [일반] [테러] 이란 테헤란에서 폭탄 및 총격 테러 [45] aurelius10441 17/06/07 10441 3
72278 [일반] 맥 라이언 섹시 마일드 사건... [71] Neanderthal27002 17/06/07 27002 5
72277 [일반] 어떤 고쳐쓰기 [11] 마스터충달5962 17/06/07 5962 4
72275 [일반] [모난조각-고쳐쓰기] 그땐 그랬고. 지금은 이렇다. [10] Secundo5321 17/06/07 5321 7
72274 [일반] 역시 한국은 톰형의 나라... [119] Neanderthal17313 17/06/07 17313 2
72273 [일반] [한겨레] ‘불공정을 조장하는’ 공정거래위원회를 고발합니다 [34] Red_alert10099 17/06/07 10099 0
72272 [일반] 스포츠 발전은 역시 돈인거 같애요 [96] 운동화1212435 17/06/07 12435 4
72271 [일반] [모난 조각] 달을 그리다. [8] 페리틴크3585 17/06/07 3585 7
72270 [일반] 자유게시판 운영위원 인사 관련 공지 [18] 유스티스7100 17/06/07 7100 3
72269 [일반] [영화 추천] 조난자들 [10] 목화씨내놔5921 17/06/07 5921 2
72268 [일반] 조선일보 기자가 진보에 위선 프레임 씌우는 사례.jpg [51] HejHej11725 17/06/07 11725 31
72267 [일반] 한국에서 수출액이 가장 많은 콘텐츠 산업 Top10 [32] 김치찌개8574 17/06/07 8574 3
72266 [일반] 검찰개혁에 대해 이해하기 쉬운 동영상 [5] 스핔스핔6281 17/06/07 6281 6
72265 [일반] 어째서 역사학계는, 그토록 예민하게 경계하고 있는 걸까? [82] 신불해25178 17/06/07 25178 93
72263 [일반] 문재인 정부의 '알박기' 대처법 [27] The xian12275 17/06/07 12275 16
목록 이전 다음
댓글

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