함께 성장하는 개발공부 일기 25

30. 디커플링

디커플링 : '제품 탐색–평가–구매–사용’으로 이어지는 고객 가치 사슬에서 약한 고리를 끊고, 그 곳을 파고드는 비즈니스 전략을 의미한다. 현재 진행 중인 꿀잠 도구(Honey-sleep) 프로젝트는 디커플링 전략을 기반으로 만들어지는 중이다. 시장에 나온 수면 과학을 기반으로 한 성능 좋은 수면 어플들과 질적인 측면에서 정면 대결하는 것은 어불성설이다. 코골이와 호흡, 그리고 수면 리듬을 전문성으로 알려줄 뿐만 아니라 Relaxation 프로그램, 파워냅 기능을 통해 다양한 기능까지 갖추고 있다. 이들은 고객들 앞에 떡하고 버티고 있으며, 고객들에게 달려오는, 그러나 자신들보다 덩치가 작은 어플들을 튕겨내는 문지기 역할을 한다. 그들을 지나 고객에게 닿기 위해서는 몸통박치기를 하는 것은 ‘계란으로 바위..

29. 방심했다, 오늘은 10시간이 걸리다!

아침 8시부터 금방 전까지 노마드코더 과제를 붙잡고 있었다. 중간중간 밥 먹고, 낮잠 자는 시간들을 제외하면 정말 과제 하나만 한 하루였다. 어제 2시간 정도밖에 안 걸려서 좋았는데, 오늘을 위해 쉬엄쉬엄 내주신게 아닌가하는 생각이 든다. 제일 취약했던 애니메이션, 트랜지션을 3개가 과제라니. 그래도 슬랙 커뮤니티에서 고수님과 구글링의 도움을 받아 다행히 과제를 마무리 할 수 있었다. 오늘 과제를 하면서 느낀 건데, 트랜지션, 애니메이션이 정말 취약하다. 다시 한번 복습할 필요성을 느낀다. 오늘 배운 것에 대해서 다시 한번 정리해보자. 1. z-index을 사용하려면 position을 설정해야 한다. 2. transition과 animation : transition은 마우스를 때었을 때(hover일 경..

28. 처음으로 과제를 2시간만에 하다!

오늘은 새벽 5시에 일어나 부지런히 움직였다. 최근 3일 동안 과제를 소화하는데 평균 4~5시간씩 걸려서, 오래 걸릴 마음을 먹고 이른 새벽에 일어난 것이다. 노마드 코더 챌린지 홈페이지를 들어가 그 전날 과제를 다시 살펴봤다. 여전히, 배경이미지에 gradient를 오버레이하는 것에서 막혔다. '오늘 과제에서도 나오려나?' 어떻게 할지 초조한 마음으로 당일 과제를 확인하러 들어갔다. 역시는 역시였다. tap-bar도 이전에 구현하지 못했던 것이 포함되어 있었다. '아, 오늘도 많이 걸리겠네'하는 심정으로 하나씩 만들었다. gradient는 역시나 제대로 작동되지 않았다. 그래서 값들을 빼고 넣고 다하가 새로고침을 그냥 했다. 그런데, 왠걸? 오버레이가 된 것이다. 그래서 속으로 '오잉?'했다. 문제가 ..

27. 쉽지 않아도, 부지런히 걷자!

오늘 챌린지 과제하기 전, ‘2시간 정도 빠르게 끝내고 수면 도구 만들어야지’라고 생각하며 짐을 챙기고 이디야 카페로 갔다. 어제 챌린지 과제로 5시간을 태웠으니, 오늘은 능숙하게 할 수 있겠지하는 안일한 마음이었다. 카페에 2시 반에 도착했다. 아이스 아메리카노를 먹으며, 이것저것 적용하며 과제를 했다. 간단히 말하면, 웹사이트 한 페이지를 만드는 건데, 이게...시간이 왜 많이 갔는지는 모르겠지만, 하다가 시계를 보면 시간이 훅훅 가있다. 오늘도 2시 반부터 8시까지 잡고 있다가 왔다. 아직 과제 중 제대로 구현하지 못하는 부분이 있다. ‘배경화면 이미지에 그라디언드 오버레이하기’. 공식은 알겠는데, 뭐가 문젠지 적용이 안 된다. 그 외에, 블릿 형태 없애기, viewport hegiht / widt..

26. 홈페이지 만들때 유용한 사이트 모음

노마드 코더 코코아 클론 강의를 들으며 안 사이트와 혼자 구글링 하며 찾은 유용한 글 또는 영상을 한 곳에 정리하고 싶었다. 원하는 기능을 나중에 찾을때 이름을 제대로 기억이 나지 않을 수도 있고, 아예 까먹을 수도 있으니 아래에 지금까지 참고했던 사이트를 모아봤다. 계속해서 업데이트 해나가자. 이제 챌린지 프로그램이 금요일, 토요일 이렇게 2일 남았다. 매일 코드 챌린지가 쉽지는 않지만, 확실히 HTML, CSS를 다양하게 요리조리 만들어보며 빠르게 익힐 수 있었다. 남은 이틀도 성실히 수행을 하며, 여기서 추가로 떠오르는 아이디어들도 잘 정리해서 챌린지가 끝나고 능동적으로 계속 매일 무언가를 만드는 내가 되었으면 좋겠다. 남은 2일도 화이팅! google fonts https://fonts.googl..

25. 고객과 나, 쌍방의 이득을 취하는 방법(Feat. 무료)

많은 사람들이 주5일제 근무를 한다. 금요일 밤이 되면 왠지 모르게 기분이 좋아지고, 일요일이 끝나갈 무렵이면 슬슬 짜증이 나기도 한다. 주위에서 쉽게 접할 수 있는 흔한 이야기다. 월화수목금은 일의 노예가 되고, 토일에 휴식을 취하곤 한다. 즉, 일과 자유의 비율이 ‘5:2’인 인생을 살아간다. 월급을 받고, 미래를 위해 저축을 하고, 그리고 퇴직 연금을 든다. 자신의 시간을 대가로 현재의, 나아가 미래의 삶을 영위한다. 주말에 집에서 유튜브ㆍ넷플릭스로 재밌는 영상을 보며 푹 쉬거나, 부족했던 잠을 보충하거나, 연인ㆍ친구를 만나 신나게 수다 떨기도 한다. 그리고 다시 찾아오는 월요일이라는 녀석에게 야속한 듯 째려보며 흔히 말하는 ‘월요병’으로 곤혹을 치르곤 한다. 이렇게 달달했던 주말은 가고 다시 5일..

24. 스토리 보드를 만들다

나는 수면에 있어 전문가가 아니다. 단지 꿀잠을 자고 싶은 사람이다. 아침에 일어났을 때, 개운하고 활기찬 상태로 하루를 기분 좋게 시작하고 싶은 사람이다. 그리고 3교대라는 근무 특성상 불규칙적인 수면 패턴은 어쩔 수 없지만, 이 안에서도 수면의 질을 최대한 높이고 싶은 사람이다. 그런데, 최근 몇 달 간은 숙면을 취한 적이 손에 꼽았다. 이를 직접 개선하고자, 나 자신을 위해 '꿀잠 도구(Honey-sleep) 프로젝트'를 시작했다. 하이엔드 수면 어플과 비교하면, 퀄리티 측면에서 유리한 고지에 있다고 볼 수는 없을 것이다. 그러나 Honey-sleep의 핵심은 딱 하나다. 바로 최초의 수면을 잘 이룰 수 있도록 돕는 것이다. 과연 Honey-sleep은 단순하지만 강력한 도구로써의 기능을 할 수 있..

23. 30분씩 여러번 공부하기 vs 3시간 팍 공부하기(feat. 미션으로 재미를 더해라)

노마드 코더 챌린지 과제(인스타그램의 2개 화면을 클론 코딩하는 것)를 하면서, ‘원본 비율을 유지하며, 박스 안에 원하는 크기의 이미지를 삽입하기’를 검색해봤다. 꿀잠 도구 웹사이트도 이를 해결해야 했었는데, 오늘 드디어 터득했다.(아싸! +1배움ㅎㅎㅎ) 코드는 다음과 같다. width를 설정하면 원본 비율에 맞춰서 자동으로 크기가 조절된다. 이전에, 꿀잠 도구 웹사이트를 만들며 ‘접속할 때마다 랜덤으로 이미지 바뀌도록 하기’를 익혔다. 그런데, 애 먹었던 부분이 사진마다 크기가 달라서 길쭉한 이미지가 나오기도 하고, 뚱뚱한 녀석이 등장하기도 하고, 때로는 조그만 친구가 튀어나오기도 했다. 그래서 혼자 긁적거리며 검색을 해봤는데, 그 때는 해결책을 못 찾았었다. 그래서 보류하고 있었는데, 오늘 우연히,..

22. 꿀잠 도구 만들기 - 웹사이트 6편

최근 3-4일 동안 노트북을 붙들고 살고 있다. 노마드 코더 챌린지 과제(퀴즈와 코드챌린지)도 있고, 꿀잠 도구 웹사이트 만드는 것도 병행하니 근무 시간을 제외하고는 대부분의 시간을 프로그래밍 공부에 쏟아부었다. 내가 현재 구현할 수 없는 것을 알고, 상세히 글로 정리한 일은 정말 잘했다. 1개 해결하고, 다음에 무엇을 해야할지가 명확하니 '이제 뭘 해야하지?'하며 방황하는 일은 없다. 1일 1해결을 내심 기대하며 '꿀잠도구(aka. 허니슬립', 내 맘대로 이름 붙이기~!)' 웹을 만들고, 생각보다 빨리 앱 만드는 것으로 넘어갈 수 있지 않을까 생각했었다. 그런데, 오만이었다. 기능을 구현하기 위해서는, 다른 사람이 쓴 코드를 띡하고 복사-붙여넣기만 한다고 되는 것이 아니다. 문법을 이해하고, '이럴 때..

19. 꿀잠 도구 웹사이트 3편

어제에 이어 꿀잠 도구 웹사이트를 위한 페이지가 어떤 것이 있는지 알아보도록 하자. 다음 세가지 화면이 필요할 것으로 생각된다. 1. index(초기 화면) : 유저에게 리스트가 보이도록 하는 초기 화면이다. 해당 음악을 클릭하면 로 넘어간다. 2. play : 해당 음악 플레이 버튼을 탑재하고 상단에 힐링 그림 또는 이미지(자동으로 2주에 1번씩 바꾸도록 랜덤으로 설정한다. 총 필요 이미지 : 26개)를 함께 위치시킨다. 그리고 타이머(30분) 설정 기능을 함께 배치시킨다. 타이머가 끝나면, 자동으로 로 넘어가도록 만든다. 3. close : Wi-fi 또는 LTE가 꺼지고 ‘비행기모드’로 전환시키는 중에 뜨는 화면(로딩 중 화면), 수면과 관련된 명언과 함께 괜찮은 그림을 배치한다.(자동으로 2주에 ..