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
수정 아이콘
네. 좋은 프로그램 만들어주셔서 감사합니다. 잘 쓰겠습니다.
목록 삭게로! 맨위로
번호 제목 이름 날짜 조회 추천
72272 [일반] 스포츠 발전은 역시 돈인거 같애요 [96] 운동화1212439 17/06/07 12439 4
72271 [일반] [모난 조각] 달을 그리다. [8] 페리틴크3590 17/06/07 3590 7
72270 [일반] 자유게시판 운영위원 인사 관련 공지 [18] 유스티스7103 17/06/07 7103 3
72269 [일반] [영화 추천] 조난자들 [10] 목화씨내놔5926 17/06/07 5926 2
72268 [일반] 조선일보 기자가 진보에 위선 프레임 씌우는 사례.jpg [51] HejHej11733 17/06/07 11733 31
72267 [일반] 한국에서 수출액이 가장 많은 콘텐츠 산업 Top10 [32] 김치찌개8577 17/06/07 8577 3
72266 [일반] 검찰개혁에 대해 이해하기 쉬운 동영상 [5] 스핔스핔6286 17/06/07 6286 6
72265 [일반] 어째서 역사학계는, 그토록 예민하게 경계하고 있는 걸까? [82] 신불해25191 17/06/07 25191 93
72263 [일반] 문재인 정부의 '알박기' 대처법 [27] The xian12282 17/06/07 12282 16
72262 [일반] 불륜 [123] 욕망의진화15483 17/06/06 15483 2
72261 [일반] 정부에서 내세운 '가야사 복원' 이야기에 비판적 시각이 많은 역사학계 상황 [183] 신불해18061 17/06/06 18061 42
72260 [일반] 지구온난화라는 말을 쓰기가 미안해지네요... [41] Neanderthal11494 17/06/06 11494 9
72258 [일반] [모난 조각] 16주차 주제 "고쳐쓰기" [2] 마스터충달3324 17/06/06 3324 2
72257 [일반] 암호화 화폐는 버블일까? [150] 고통은없나12291 17/06/06 12291 2
72256 [일반] WWDC 2017 총 정리문 [6] 인간흑인대머리남캐6593 17/06/06 6593 0
72255 [일반] [정치] 민병두 의원의 트인낭 [59] 세인9664 17/06/06 9664 1
72254 [일반] 지금 다시 20대 초반으로 돌아가 인생 테크트리를 다시 짜라고 한다면.... [123] 황약사14653 17/06/06 14653 2
72253 [일반] (스포)히로인보다 더 예쁜 미이라 감상기 [33] 꿈꾸는드래곤9147 17/06/06 9147 1
72252 [일반] 미이라 후기 입니다. [39] 써니는순규순규해10672 17/06/06 10672 2
72251 [일반] 김경렬, 문재인 정부서 국가유공자 증서 받는다 txt [61] 아라가키12400 17/06/06 12400 63
72249 [일반] CGV 종일권 이벤트 [10] Zelazny9364 17/06/06 9364 1
72248 [일반] ‘동거녀 암매장’ 징역 3년, 20년 연 끊은 아버지가 합의 [84] 세렌드14025 17/06/06 14025 8
72247 [일반] 자아방어기제 [35] 落花9087 17/06/06 9087 9
목록 이전 다음
댓글

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