Community

개발자 99% 커뮤니티에서 수다 떨어요!

← Go back
맥북과 노마드코더를 동경한 사람의 투두 리스트
#to_do_list
3년 전
6,367
13

undefined

undefined

undefined

undefined

1. 결과물 URL

https://since-1994.github.io/todo/

투두리스트가 자연스럽게 어우러지는 구성으로 하나의 작품으로 봐주시면 감사하겠습니다.

2. 자기소개

안녕하세요. 저는 백수구요 ㅎ 약 1년전에는 소프트웨어와는 전혀 관계없는 회사를 다니고 있었습니다. 회사를 다니며 정말 많은 고민을 했었습니다. 내가 지금 가고 있는 길이 맞는걸까.. 뒷편에 앉아계신 부장님을 보며 나도 ' 부장님 나이가 되어도 저렇게 재미없게 열심히 회사를 다니고 있을까' 등등 정말 많은 고민 들이요. 그러다 우연히 본 유튜브 노마드 코더.. 가 제 인생의 방향을 바꾸어주었습니다. 무작정 앱을 만들어 창업을 해보겠다는 생각으로 회사에서 퇴직을 일사천리로 진행하고 공부를 했습니다. 처음에 html, css, js 막막하지만 닥치는대로 꾸역꾸역 들었습니다. 앱을 만들어야겠다는 생각으로 react-native 수업까지 듣고 알람앱을 만들다가 막히는 부분이 있어서 react-native로 앱을 만드는 것을 포기했습니다. 그러다 다시 java를 배워보고.. flutter를 배워보고.. 급한 마음에 어느 하나 깊이 제대로 보지 않고 이게 좋다더라 저게 좋다더라 약 6개월 정도가 지나고 뒤돌아보니 제대로 알고 있는게 하나도 없더군요.. 그래서 다시 처음으로 돌아가 생각했습니다. 앱개발도 너무 좋지만 웹개발의 기본부터 차근차근 배워보자. 웹개발을 잘한다면 앱개발도 문제없는 세상이라는 생각이 들었습니다. 그래서 지금은 코코아 클론부터 css layout master, 유튜브 클론 차근차근 걸음마부터 다시 익히고 있습니다. 몰랐던 것이 정말 많더군요. 사실 처음부터 다시 이렇게 공부하려니 허송세월 보낸것은 아닌지 위기감도 들지만 늦었다고 생각될때가 가장 빠른거다라는 생각으로 하루하루 성장하려고 합니다. 서두 없는 자기소개 읽어주셔서 감사합니다.

3. 서비스 소개

항상 맥북에 대한 막연한 동경이 있었습니다. 꿈에서도 아른거리는 맥북.. 그리고 니코의 유튜브에서 왜 니콜라스가 맥북을 사용하는지에 대한 영상도 본적이 있습니다. 그 영상을 보면서 맥북에 대한 꿈을 키웠었죠.. 제 맥북에 대한 동경과 니꼬와 함께했던 강의들을 이번 작품에 녹여보았습니다.

  • 3-1. 플레이어

사이드바에 있는 플레이어는 음악 재생이 가능합니다. 총 2곡이 있구요. 규현-광화문에서와 아이유-celebrity입니다. 네이버 뮤직에서 음원을 구매해서 사용했구요. 혹시 문제가 된다면 음원은 지우도록 하겠습니다. 기능은 재생, 멈춤, 다음곡 이동, 현재 재생 위치 표시 및 재생 위치 변경, 볼륨 조절 가능합니다.

  • 3-2. todo

바로 이번 콘테스트의 주제 todo입니다. CRUD 모두 가능하구요. 귀엽고 감성적일 것 같은 애니메이션을 많이 추가해두었습니다. 또한 detail창을 열면 todo를 작성한 날짜를 확인하실 수 있습니다.!!!

🔥todo 기능에서 drag & drop 기능을 업데이트 하였습니다. 마음이 급해서 해당 기능을 제외하고 제출했었는데요. 다행히 15일 이전이라 업데이트 하였습니다ㅜ.ㅜ😭

undefined

  • 3-3. 시계

아날로그 시계인데요. 콜롬비아 시계와 한국 시계를 나란히 놓아보았습니다. 시계에 특별한 기능은 없지만,, 만들면서 정말 많은 검색을 했고.. 그만큼 볼때마다 뿌듯한 친구입니다.

  • 3-4. 계산기 앱

계산기 앱입니다. 아이폰 계산기 앱 디자인을 토대로 만들어보았습니다. 기본적인 +, - , /, *를 지원하구요. 소수점 및 %기능도 가능합니다.

  • 3-5. 날씨 앱

openWeatherAPI를 사용해 만든 날씨 앱입니다. 이것도 아이폰의 날씨앱과 똑같이 만들고 싶어 현재 날씨, 시간별 날씨, 날짜별 날씨를 받아와 표시해주도록 하였습니다. openWeatherAPI의 oneCallAPI가 적합하여 해당 API를 사용하였습니다.

  • 3-6. 굿노트 앱

아이패드 유저들이 많이 사용하는 굿노트 앱에서 영감을 받았구요. 모든 스크래치 지우기, 펜 기능, 지우개 기능, 펜 두께 설정, 펜 칼라 설정이 가능합니다. 그리고 제가 뿌듯한 포인트 하나는 지우개 기능을 켜면 지우개가 따라다닌다는 겁니다.ㅎㅎ 아주 귀엽습니다.

undefined

4. 개발 과정(해결과정 & 아쉬운 점)

  • 4-1. 아날로그 시계

아날로그 시계를 만든 가장 큰 이유는 바로 다른 사람의 코드를 나의 코드로 만드는 능력을 기르고 싶어서 입니다. 누구나 복사 붙여넣기는 할 수 있지만 자신의 코드로 만들기 위해선 결국 다른 사람만큼 코드를 이해하고 있어야한다고 생각했습니다. 아날로그 시계를 만들기 위해 많은 검색을 했었는데요. 그 중 before와 after 선택자를 활용해 만든 것이 맘에 들었습니다. 왜냐하면 before와 after선택자를 사용해본적이 없었거든요. 공부할 좋은 기회라고 생각하고 before와 after를 활용해 시계를 구성해보았습니다.

콜롬비아와 한국 시간을 모두 알기 위한 방법을 고민했었습니다. 한국 시간은 쉽게 알 수 있지만 콜롬비아 시간을 어떻게 불러올까 고민을 하다가 UTC변환에 대해 공부했습니다. 한국은 UTC보다 9시간 빠르구요 콜롬비아는 UTC보다 5시간 느립니다. 즉 한국에 시간 기준으로 14시간이 느리죠. 14시간을 밀리초로 계산해서 빼줘야 하므로 한국시간-14*60*60*1000이라는 계산식을 이용해 콜롬비아 시간을 구해줬습니다. 말하고보니 별거아니지만 당시에는 조금 어려웠습니다...ㅎㅎ

  • 4-2. 굿노트 앱

굿노트앱을 사실 가볍게 만드려고 했었는데 생각보다 배운점이 많았습니다.

1. canvas 태그같은 경우 실제 그려지는 width와 height가 css 설정과 다르다는 것은 알고 있었지만 완벽히 이해는 못하고 있었습니다. 그래서 내가 원하는 포인트와 다른곳에서 그림이 그려지거나 상당히 이상한 비율에 고생했었는데요. 여러 방법을 시도하다가 제가 찾은 가장 편한 방법은 먼저 canvas태그를 canvas-container라는 클래스명을 갖는 div태그의 자식으로 넣습니다. canvas-container의 width와 height를 css로 원하는 크기로 만들어 둡니다. javascript파일에서 canvas의 width 및 height를 부모의 width 및 height와 동일하게 해주면 비율이 깨지지 않고 원하는 크기의 canvas를 쉽게 얻을 수 있었습니다.

2. 굿노트 앱에서는 현재 선택된 색깔을 체크표시로 확인할 수가 있는데요. 이게 제가 놓쳤던 부분이 체크표시가 하얀색으로 되다보니까 하얀색을 선택했을때는 선택표시가 보이지 않더군요. 현재 선택한 색깔에 따라 체크 표시 색을 바꾸고 싶어서 chroma라고 하는 라이브러리를 공부해봤는데요. 정말 굉장하더군요. 여러분도 뭔가 색과 관련된 고민을 하신다면 chromajs검색해보시길 추천드립니다. 다만 고민 끝에 사실 하얀색이 한개뿐이라 저렇게 하는게 난잡하다고 생각되어 하얀색을 선택했을때만 검은색으로 체크표시가 되도록 하드코딩해주었습니다. 더 큰 프로젝트를 하게된다면 chroma를 사용해보려고 합니다.

3. 지우개 활성화 부분 지우개 모드로 갔을 때 mousedown 부터 지우개 표시가 마우스를 따라다니도록 했습니다. 그런데 분명히 마우스는 canvas내부에 있는데 mouseleave 이벤트가 발생하더군요. 이유가 뭘까 한참을 고민하다가 바로 지우개 표시위로 마우스가 올라가면 mouseleave 이벤트가 발생하는 것을 알게되었고 지우개 표시에 css로 pointer-events:none을 주어 해결하였습니다. pointer-events에 관한 설정을 보통 자식 element에 event가 발생하는 것을 막기 위해서 사용하는데 이런 이유로 사용해본게 처음이라 새로웠습니다.

  • 4-3. 뮤직 플레이어

플레이어에서 다음곡으로 넘길 수 있는 방법에 대한 고민을 했었습니다. 먼저 javascript파일에는 각 음악에 대한 정보가 담긴 object를 원소로 갖는 배열이 존재합니다. 다음 버튼을 누르면 배열에서 다음칸으로 이동해 해당 음악 정보를 불러와 재생을 하게 됩니다. 그런데 제가 마음에 들지 않았던 부분이 바로 배열 끝으로 갔을 때입니다. 배열 끝으로 가면 다시 배열의 맨 앞으로 돌려보내줘야했습니다. 그런데 음악이 2개밖에 없는데 배열 끝부분으로 갔다고 뭔가 새로운 코드를 만들어주는게 불필요하다고 느껴졌고 고민하다가 이런 생각을 했습니다. 2개밖에 없으니까 이진법을 사용해보자..! 바로 0과 1 을 이용했습니다. 1-0 = 1 이고 1-1=0이 되므로 현재 음악이 0번 index라면 다음 음악은 1번 index가 되고 현재 음악이 1번 index라면 다음 음악은 0번 index가 되도록 해주었습니다.

  • 4-4. 계산기 앱

계산기앱에서 소수점도 계산가능하도록 해주었습니다. 그런데 발생한 문제가 바로 소수점이 너무 길어지면 표시화면을 넘어간다는 것입니다. 길이에 따라 폰트 크기를 조절하여 바꿔줄까 하였지만 아무래도 간단한 계산을 위한 계산기 이다보니 유효 숫자를 제한하는 방향으로 바꾸었습니다. 바로 유효숫자 소수점 6자리라고 한다면 6.666666까지 보여주는거지요. 이걸 구현하기 위해서 Math.floor를 사용했습니다. Math.floor는 소수점 이하를 반올림합니다. 그렇다면 소수점 6자리가 되도록 반올림하려면 어떻게 할까 고민하다가 이런 방법을 생각했습니다. 1.2345678이 있다면 먼저 10^6을 곱합니다. 그럼 1234567.8이 되겠죠. 여기에 Math.floor를 사용하면 1234568이 됩니다. 이걸 다시 10^6으로 나눕니다. 그럼 소수점 6자리의 숫자 1.234568을 얻을 수 있었습니다.

  • 4-5. 요술 램프 지니 효과

앱을 열고 닫을 때 맥북은 요술 램프 지니 효과가 있는데요. 이걸 애니메이션으로 간단하게 구현해보는 방법을 생각했습니다. 점점 작아지며 들어가는거에 착안해 width가 작아지도록 표현했구요. 아래로 내려가는건 transform translateY를 이용해 표현했습니다. 생각보다는 그럴싸해서 뿌듯했습니다.

  • 4-6. todo drag & drop 구현

HTML drag & drop API를 사용하였구요. 어려웠던 점은 배열 처리입니다. 옮겨진 item을 어디에 넣을지 판단하는게 생각보다 까다로웠습니다. 그래서 두 가지 경우로 나누어 해결했습니다. 첫번째로 아이템이 원래 위치했던 인덱스와 옮겨질 인덱스를 비교하여 옮겨질 인덱스가 원래 인덱스보다 더 작다면 단순히 원래 아이템은 삭제하고 옮겨질 인덱스에 아이템을 삽입해주었습니다. 두번째로 옮겨질 인덱스가 원래 인덱스보다 더 크다면 옮겨질 인덱스가 원래 아이템도 포함한 순서이기 때문에 옮겨질 인덱스-1 위치에 옮겼습니다. 이것도 역시 적고보니 별거 아니지만.. 많은 고민을 했습니다.

5. 앞으로 계획

자기소에서 설명드린 것처럼 앱을 창업해보겠다라는 생각으로 퇴사를 했었는데요. 현재 드는 생각은 창업이란건 기술도 중요하지만 제일 중요한건 아이디어라는 생각을 많이 하게 되었습니다. 물론 기술이 뛰어날수록 아이디어를 실현할 수 있겠지만 아이디어가 없다면 실현할 것도 없더라구요. 그래서 창업에 대한 생각은 많이 줄어들었구요. 기술 자체에 대한 재미를 찾고 있습니다. 손 끝에서 무엇을 만든다는건 정말 재밌는 것 같아요. 어쨌든 방황하던 나날들은 뒤로하고 개발자로 취업을 도전하려합니다. 사실 막막하지만 두드리면 문은 열리겠죠??

6. 잡담

그런데 만들고보니 결과물에도 제 성격이 담긴 것 같아요. 투두 기능을 깊게 파지 못하고 여러 기능을 주르륵 만들었네요. todo가 어디에 있으면 어울릴까 고민하다보니 이런 작품이 나왔네요. 현재 진행한 프로젝트는 여기서 끝내지 않고 이어서 기능 하나하나 더욱 퀄리티 높게 보완해 나가겠습니다. 읽어주셔서 감사하구요. 좋은 하루 되세요ㅎㅎ

13 comments