튜토리얼 지옥에서 벗어나기
미국 웹 프로그래밍 커뮤니티에서 많이 쓰는 표현중에 튜토리얼 지옥이란 표현이 있습니다.
사실 어느순간부터 한국에도 코딩 붐이 불어서 컴퓨터 프로그래밍 관련해서는 아예 관심이 없던 분들도 html css 로 시작해서 웹개발에 뛰어드는데요,
미국에서도 예전부터 코딩붐이 불어 지금 한국처럼 코딩 부트캠프들과 학원, 강의들이 엄청 많아요. 그런만큼 무료로 제공하는 양질의 영상강의들도 많구요.
그런데 다 똑같이 하는 말이, 클론코딩과 유튜브 튜토리얼을 보면서 따라친 코드를 3개월이고 1년이고 해봤자, 취업할 수 있는 레벨까지 올리기 어렵다고 합니다.그 이유는 웹 페이지 레이아웃이나 디자인, 프로그래밍, 데이터 쿼리 등등 모두 다 직접 머리속에서 구상을 해보고, 어떤식으로 구현을 할지 계획해본 다음 머릿속에 있던 로직을 코드로 작성을 해 봐야지만 배운 내용들이 내꺼가 되거든요.
말로만 들으면 간단한데, 비용이 부담되거나 시간적 여유가 없는 분들은 생활코딩 이고잉님 강의나 무료로 올라온 제로초님이나 다른분들 강의 보면서 독학을 많이 하시죠.
이게 다 양질의 강의이긴 한데, 문제가 되는 점은 이런식으로 남이 구현해서 만든 코드는 아무리 많이 따라쳐봐도 내 지식으로 100% 습득할 수 없습니다.
마치 우리가 흥민이형 축구경기를 몇년째 봐도 고딩 축구선수를 이길수 없는것처럼요.근데 실제 필드에 나서서 뛰기가 겁이나니까.. 어떻게 해야할지도 모르겠고, 어디서부터 시작해야할지도 모르겠고 해서 그냥 튜토리얼 클론코딩만 하다보면 위에 설명드렸던 튜토리얼 지옥에 빠지게 되는데요.
백날 드리블 연습, 패스연습, 슈팅 연습만 해봤자 내가 실제로 필드에서 한번 뛰어보는것만 못하듯이 (물론 연습도 중요하지요.. 다만 실전 경험을 해 보고 내가 부족한점을 느낀 상태에서 하는 연습이야말로 내 지식으로 남습니다)코드도 직접 작은거라도 구현을 해봐야 해요.
css에서 막히다가 또 javascript에서 막히고 ㅋㅋㅋㅋ html 구조를 더 간편하게도 만들고 싶은데ㅋㅋㅋㅋ 욕심은 넘치는데 머리와 손이 따라주지 않네요 ㅠㅠㅠ 혹시 아이디어 얻을만한 사이트가 있을까요??라고 물어보셨는데, 사실 아이디어 얻을만한 사이트는 넘치고도 넘치죠.
지금 질문자분께서 글 남기신 okky 웹사이트도 간단한 crud 기능을 활용해 게시판처럼 만들어보기에 좋은 예시이구요
구글도 검색엔진 기능 페이지 만들어보기에 좋구요
유튜브도 있고 인스타도 있고 클론코딩해볼만한것들은 정말 많아요.
다만 어디서부터 시작을 해야할지 엄두도 나질 않겠죠. 왜냐하면 이 페이지 안에 어떤 기능들이 있고, 레이아웃은 어떤식으로 잡아야 하는지 처음부터 구상해본적이 없으니깐요.그래서 개인 프로젝트를 만들어보라고 하는거에요.
거창한 기능도 필요없고, 애플같은 페이지 디자인을 할 필요도 없어요.
그냥 내가 보고 나랑 엄마랑 아빠랑 같이보면서 아이고 이런것도 할줄알아 하는 페이지라도 만들어보세요.
grid나 flexbox 이용해서 가족사진 올려두는 웹페이지도 만들어보고
좀 더 나아가서 todo list 만들어서 오늘 할일 목록같은거 만들어보고
서버 연동시켜서 기록 남겨도 보고, 필터기능, 삭제기능도 구현해보고
더 나아가서, 외부 api 연동해서 원하는 데이터 뽑아올 수 있는 서버도 만들어보고
그 서버에서 받아오는 데이터갖고 페이지에 내가 원하는 레이아웃으로 렌더링도 시켜보고그냥 차근차근 지금 할수 있는거, 정말 너무 기초적이고 쉬워서 이런것까지 해야해? 하는것부터 만들어보세요.
그럼 진짜 매주매주 실력이 느는게 느껴질거에요.
위 사이트에 있는 댓글이 너무 인상깊어 가져왔다.
개발에서 모르는 것들은 무한하며, 더욱이 프론트는 매번 새로운 기술들이 끊임없이 등장한다.
배울것은 넘치지만 결국엔 스스로 구상하고, 처음부터 끝까지 한 웹페이지를 만들어 보면 성장할 수 있다고 믿는다.
그래서 개인포트폴리오 뭐하지?
내가 좋아하는 건 게임, 그중에서도 로스트아크를 제일 좋아한다.
그 때 불편한 점이 있었는데, 영지에서 제작을 할 때 어떻게 해야 극한의 이득을 볼 수 있는지에 대한 구글 스프레드 시트를 만든 적이 있으며 내 정보를 보거나 다른사람들을 보기위한 사이트, 경매 검색을 편하게 하기 위한 사이트, 공략을 보기위한 사이트, 굿즈 구매 사이트 등 사이트가 나뉘어져 있어서 여러 웹사이트들을 켜놓고 로아를 했던 기억이 있다.
이 사이트들을 한데 모아보면 어떨까 라는 생각이 들었으며 로스트아크 유저를 위한 사이트를 만들어보고 싶었다.
경매장 관련 API
경매장 관련해서는 오픈 API가 필요할 거 같아 찾아봤는데, 로스트아크에서는 별도 API를 제공해주지 않으며 대신 크롤링이 가능하다고한다. 한 번도 해보지는 않았지만.. 가져와보자
Interactive Design
디자인 과정에 사용자를 포함시킴으로써 실제 사용자의 진정한 니즈를 만족시키는 사용자 중심 디자인과 UX 디자인 방법
우와 신기하다,예쁘다 라는 말이 절로 나오는 랜딩페이지들을 몇개 봤는데, 이런 기능들은 인터랙티브 디자인이라고 불리우는 것들이었다.
내 개인포토폴리오에도 이런 기능을 넣어보고 싶고, 라이브러리를 사용하지 않고 바닐라js로만 한번 만들어보고 싶다는 생각이 들었다.
트렌드에 맞게 만들어보자
몇 개만 뽑아보자면,
- 다크모드
- 미니멀리즘과 단순화
- 볼드 타이포그래피
- 고급 마이크로 인터랙션
- 에러메세지와 빈 페이지 디자인
- 3D 그래픽
- 모바일 퍼스트
[스터디] 점점 더 발전하는 게터다운 방
참고사이트
https://m.blog.naver.com/yoowooryung/221765348389
https://lovelyux.tistory.com/23
디자인 참고 사이트
https://www.playlostark.com/en-us#ags-MediaPopup
https://lostark.game.onstove.com/Main
https://smilegateshop.com/product/예약판매-로스트아크-모코코-마그넷-세트/235/category/67/display/1/
https://www.smilegate.com/ko/game/lostark.do
