스파르타 코딩 클럽 : 나홀로 코딩 후기 및 추천 ( 정규 수업 8만원 추가 할인 방법 공유)

인스타그램 광고를 통해서 무료 코딩 수업이 있길래 오랜만에 들어봤어요!

네이브 블로그에는 저번 주에 후기를 적었는데,

연말이라 자체 휴식을 갖는다고 블로그를 안 하는 바람에 

티스토리에는 조금 늦어졌네요 ㅎㅎ

 

원래 티스토리에도 후기를 적을 생각은 없었지만,

네이버 블로그 글이 생각보다 조회수가 높아서 티스토리에도 적어보기로 결정했습니다.

 

일단 수업을 통해서 만든 결과물, 

즉 2020 연말 카드를 먼저 바로 올려봅니다.

from.듈리

이건 나홀로 코딩 수업을 그대로 따라 해서 만든 

크리스마스 겸 연말 카드로

이 버전의 경우에는 스파르타 코딩 클럽 서버에 간편하게 업로드돼서 생성되었기 때문에

아주 간단했더랬죠~

 

수업을 그대로 따라하면 만들어지는 결과라서 어렵지는 않을 거고,

만약 따라했는데 작동이 안 되거나 화면에 구현이 되지 않는다? 할 때는

오타를 제일 먼저 확인해보세요 ㅋㅋ

간단하게 class값, id값을 적을 때 생각보다 실수하는 경우가 많아서

간단한 오타 체크 꼭 기억하셔용!

 

스파르타 코딩 클럽에서 만든 카드는

딱 크리스마스에 어울리는 색감과 이미지들을 이용해서 만들어지긴 했지만

너무 단순하달까요?

그냥 이걸 친구들한테 보내기에는 너무 심심할 것 같았어요!

 

그래서 여러 가지 수정을 해보았습니다!!

 

그리고 새롭게 만든 카드는

제가 가지고 있던 닷홈 호스트에 직접 업로드했습니다.

(아마 키보드의 F12 누르시면, 저만의 연말 카드 코드 보실 수 있을 거예요~)

 

다시 카드를 만들 때는 특히 이미지가 중요했어요~

저는 크리스마스 생각하면 항상 생각나는 영화들이 있어요.

바로 해리포터, 찰리 브라운 그리고 나 홀로 집에 뉴욕 이 세 영화인데요,

이 세 작품들의 이미지를 삽입해서 새로 만들어보았습니다. 

 

이미지 외에도 추가로 변경하고 싶던 부분이 있어서,

바꾸고 싶던 부분을 차례차례 적어볼게요.

 

1. 전제적인 이미지들

2. 봉투 벡터 이미지

3. 눈 효과

4. 폰트

5. 전체적인 컬러

이렇게 총 5가지 정도를 바꿔야겠다고 생각했어요.

 

1번은 위에 적은 대로, 세 영화의 이미지를 생각해서 변경하였습니다.

 

2번 같은 경우는 일러스트레이터를 통해서 직접 만들어도 되지만

사용 안 한 지 좀 돼서 시간이 많이 걸릴 것 같더라고요~

그래서 Freepik(프리픽)에서 무료 소스 이용해서 변경했습니다.

 

3번의 경우, 수업에서 사용했던 눈 효과가 Jquery였던 것 같은데

저는 좀 더 펑펑 오는 눈 모양을 표현하고 싶었어요!

그렇다고 제가 만들 줄은 모르기 때문에 또 구글링했습니다.

코딩할 때는 구글링이 답이래요 ㅋㅋ

(보통 제이쿼리 검색해서 보시면 Demo같은게 있어서

구현되는 화면을 미리보기도 하실 수 있을 거예요~)

저는 snow storm, snow fall 이런 검색들을 했었고

그 결과  찾게 된 자바스크립트 효과입니다!

Midnight Snow

딱 제가 원하는 이미지(?) 였어요!

펑펑 오는 눈의 느낌을 잘 살린 것 같았어요 ㅎㅎ

 

아마 CSS나 자바스크립트는 검색해보면

코드펜(Codepen)으로 코드 업로드해놓은 걸 많이 보실 수 있을 텐데요,

다른 분들이 많이 사용하는지 모르지만 저는 이 사이트 정말 편해요!

상단 HTML/CSS/JS 섹션을 통해서 코드 수정을 하면

바로 아래쪽으로 데모 화면 보실 수가 있거든요~

틀리게 작성되면 결과가 잘 안 나오겠죠? ㅎㅎ

그래서 이 사이트에서는 각 섹션별로 필요 없는 거 조금씩 지워가면서

남은 부분만 본인의 코드에 붙이고

필요한 부분 수정하면 됩니다!

저는 이게 상업적 용도가 아니라 생각해보니 출처 같은 걸 안 밝혔는데요,

아무래도 특정 목적이 있는 사이트라면 확인은 한번 더 하시는 게 좋을 것 같네요!

 

이게 아마 HTML의 canvas와 자바스크립트를 이용해서 만든 것 같은데

제가 모르는 기능이라 그냥 CSS에 position과 z-index만 조금 더해서 바로 적용시켰어요!

대충 찾아보면 canvas는 별 기능이 없고,

말 그대로 자바스크립트 효과가 적용되는 그 공간을 표시하는 것 같았어요!

 

4번째 폰트 같은 경우는 구글폰트나 눈누 사이트 이용하면 

웹폰트 링크가 있을 거예요~

한글 관련 폰트는 확실히 눈누 사이트가 많은 것 같았어요!

구글의 경우는 폰트 삽입 방법으로 <link> 혹은 @import 방법을 제공하고,

눈누의 경우는 @font-face 방법을 제공하더라고요!

 

우선 저는 옛날 타이핑 느낌? 혹은 게임 글씨체 같은 걸로 만들고 싶어서 찾다가

Neo 둥근모라는 글씨체를 발견했어요!

딱 취향저격이더라고요 ㅎㅎ

그래서 이 폰트를 다운로드하고 저는 호스트가 있기 때문에

파일질라(Filezila)로 html 파일 업로드할 때 함께 첨부해서 했어요!

사실 이게 맞는 방법인지는 모르겠지만..

@font-face만 그냥 이용했더니 폰트가 안 먹더라고요ㅠㅠ

그래서 그냥 폰트 파일 즉 ttf형식으로 된 것도 함께 올렸더니

그제야 되더라고요!

 

마지막으로 다섯 번째인 색감은 원래 붉은 느낌도 좋았지만,

눈이 더 잘 보이려면 검정 그대로 가는 게 좋을 것 같아서 검정으로 바꿨습니다!

사실 다른 색으로 바꿀까 했는데 CSS 변경이 귀찮아서 그냥 내버려 둔 것도 있어요ㅠㅠ

 

그 결과, 새롭게 만든 저의 연말 카드는 아래와 같습니다!

from.쥴리

어떠세요?

괜찮은가요? (답정너죠.. ㅎㅎ)

한눈에 보기 좋게 비교해볼게요!

(위) 기존 카드/ (아래) 나만의 카드

저는 정말 오랜만에 코딩해보면서 재밌더라고요 ㅋㅋㅋ

안 그래도 프론드 엔드 쪽으로 좀 궁금증이 생기는 요즘인데

물론 실제 그 분야 업무는 훠얼씬 어려울 것 같지만,

제 호기심을 자극하기에 좋은 것 같았어요!

 

코딩 왕초보이신 분이나, 

개발자분들, 혹은 디자이너분들과 함께 일하시는 분들,

아니면 자신만의 사이트를 만들고 싶으신 분들에게

정말 추천하는 강의였어요!

무엇보다 무료잖아요!?

대머리 되기는 싫지만 공짜를 마다할 사람은 없지 않습니까 ㅎㅎ

밑져야 본전이라고 생각해보시고 한번 코딩 도전해보셔요!

 

1/3일까지 무료 수업이 진행되더라고요~

맘 잡으면 하루 안에도 충분히 끝마칠 수 있는 정도의 강의라고 생각돼요 ㅎ

실제로 웹사이트가 구현되는 걸 보시면 와 신기한걸?이라는 생각과 함께

생각보다 어렵지 않네?를 느끼실 수 있을 것 같아요!

이게 시작이 돼서 여러분들도 새로운 꿈이나 하고 싶은 것들이 생길 수도 있으니까요!

저는 실제로 며칠 전부터

유튜브에서 제로초님의 자바스크립트 강의 듣는 것도 시작했답니다 ㅎㅎ

 

---

 

크리스마스 무료 수업을 듣고 난 후에 찾아보니

스파르탄 코딩 클럽에서 1월 4일부터 온라인 웹 개발 종합 강의가 있다고 해서

저는 지금 고민 중입니다!ㅎㅎㅎ

5주 과정에 가격이 많이 비싸지는 않아서 들어본 법한 것 같아요~

지금 일단 다른 무료 유튜브 강의를 듣고 있긴 한데,

이 수업을 들으면 세세한 공부는 안돼도

전반적으로 웹 개발이 이런 식으로 되는 거구나 라는 걸

아주 조금이나마 알 수 있지 않을까 싶어서요 ㅎㅎ

 

저처럼 정규 수업 등록을 고민하시는 분들을 위하여 마지막으로,

할인 팁!!!

스파르타코딩클럽

위 링크를 통해서 수업을 등록하시면

수업 등록하시는 분과 추천인인 저에게 모두

"5만 원 할인"

을 받을 수 있는 추천인 할인 혜택이 적용됩니다 :)

 

+ 추가로

제가 검색해서 찾아본 할인 쿠폰 코드도 함께 첨부합니다!

유튜버 가영2kkakka님의 동영상을 보다가 발견했답니다 :-)

3만 원 할인 코드: 2kkakka (2/28까지 유효하다고 합니다)

 

즉 위 링크와 할인 코드 동시에 사용하시면,

가지고 계신 포인트 외에 추가로

"8만 원 할인"

이 가능하다는 말씀!

 

이왕 듣는 거 최대한 혜택 많이 받고 듣는 게 좋잖아요~

정규 수업 듣게 되면 티스토리 블로그에 또 후기 남겨보겠습니다!