웹 코딩 #1
웹 코딩 #1안녕하세요 디자인베이스입니다.
드디어 웹 디자이너를 위한 웹 코딩 강좌를 시작합니다. 여러분이 코딩을 못하는 이유는 딱 한 가지입니다. 안 해서입니다. 왜냐? 흥미가 없기 때문에 안 하게 되고 안 하면 실력이 늘 수가 없죠.
디자인과는 성향이 완전히 다르기 때문에 일반적으로 디자이너 분들이 코딩을 처음 접하면 어렵게 느끼는 것은 자연스러운 것입니다. 웹 개발을 공부한 디자이너로서 디자이너의 입장에서 최대한 이해와 흥미를 줄 수 있도록 고민해서 만든 강좌입니다
첫 시작은 당연히 웹 디자이너가 코딩을 공부해야 하는 이유부터 시작하겠습니다.
ps. 이번 영상은 처음으로 인공지능 자막 제공 서비스 ‘Vrew’를 사용해봤습니다. 자막의 디자인이 기존 제 영상 스타일과 달라서 이질감이 느껴지긴 하지만.. 한 번 시도해봤습니다!
*디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 제가 사용하는 툴은 비주얼 스튜디오 코드(Visual Studio Code)를 사용하며 여러분이 다른 툴을 사용한다면 환경이 다를 수 있습니다. 하지만 언어는 똑같기 때문에 작업하는 데 문제는 전혀 없습니다.
누구나 손쉽게 배우는 디자인 강좌, 디자인베이스입니다. 디자이너로서 웹 코딩 공부의 첫 단추는 디자인베이스에서 시작하세요. 열정만 준비하시면 다 따라 할 수 있습니다.
핵심 요약
여러분이 코딩을 못하는 이유를 한 가지로 말씀드릴게요.
안 해서입니다.
왜 일까요?
재미없거든요..
주변에 있는 강좌들은 다 개발자들을 위한 딱딱한 강좌니까요.
우리가 알고 있는 포토샵 일러스트레이터, 스케치와는 매우 다르게 그냥 까만 배경에 이상한 문자들로만 이뤄져 있어서 더욱 어렵게 느껴지는 겁니다. 흥미가 없으니가 당연히 공부를 안 하게 되는 거죠. 악순환입니다.
주변에 디자이너지만 코딩을 잘하는 사람들을 보면 되게 재밌어합니다. 여러분이 이 강좌를 끝까지 봤다고 해서 코딩을 잘할 수 있다고 말한다면 저는 사기꾼이겠죠. 왜냐? 저도 공부를 5년 정도 했거든요.. 압축하면 겨우 1~2시간짜리 강좌를 봤다고 잘하면 말이 안 되겠죠?
그렇지만 디자이너로서 개발을 공부할 때 어려운 점과 두 직군과의 차이점, 연결성 등에 대한 경험이 풍부한 저로서는 쉽게 알려드릴 수 있을 것 같아요.
웹 코딩에 대한 기초를 알려드리는 것도 목표지만, 여러분이 코딩에 흥미를 느끼게 하는 것이 저의 목표입니다. 스스로가 흥미를 느끼면 더 자세한 부분은 책을 사던, 스터디를 하던, 구글링을 하던… 다양한 방식으로 스스로 학습이 가능하니까요. (물론 반응이 좋으면 고급 강좌도 만들어 올리겠습니다!)
웹 디자이너가 웹 코딩을 공부하면 좋은 이유부터 알려드릴게요! 웹 디자이너는 기획자와 개발자와의 협업이 필수인 포지션을 가지고 있죠. 다르게 말하면, 앞뒤로 공격당하는 위치인 거죠. 그런데 우리는 기획자분들과의 소통에서는 나름 원활한데… 개발자분들과의 소통에서 항상 말립니다…
이유가 뭘까요?
잘 모르기 때문입니다.
이게 쉬운지 어려운지… 어려운 기술을 나열하면 무슨 말인지도 모르는 상황… 우리는 개발자분들과의 소통이 잘 되도록 개발 공부를 시작해야 됩니다. 뭔가 표현하고 싶은 효과나 수정해달라고 요청을 하고 싶은데… 설명이 어려운 경우가 더러 있죠?!
그렇다고 슝~ 탁! 해주세요. 하기엔 비전문적으로 보이죠. 마치 기획자나 클리이언트가 좀 더 이쁘게 해주세요. 세련되게 해주세요.라고 두루뭉술하게 말하는 것과 같은 맥락입니다.
디자이너로서 코딩에 대한 로직을 이해한다면 다른 디자이너와의 큰 차별성을 갖게됩니다.
상대방을 제대로 이해하려면 역지사지를 해야 하죠. 근데 그 역지사지를 하려면 그 처지를 느낄만한 경험과 지식이 뒷받침되어야 제대로 할 수 있겠죠?
개발에 대한 이해도가 높아질수록 개발 직군과의 커뮤니케이션에서 불필요한 손실을 줄이고, 더 효율적인 작업을 할 수 있습니다.
디자이너 적성에 안 맞는 강좌를 디자이너의 입장을 고려해서 쉽게 만든 코딩 강좌를 만든 거예요. 디자이너의 특성에 맞게! 웹 디자이너를 타깃으로 딱 필요한 개념만! 디자이너가 궁금해할 비주얼로 예제로 배워봅시다.
벌써 흥미가 생기죠?!
본격적으로 시작하기 전에, 책상도 한번 정리하고, 달달한 음료나 마실것을 옆에 두고 시작해봅시다. 준비물은 간단합니다. 인터넷이 연결된 컴퓨터 또는 노트북과 코드를 적을 에디터 툴만 준비되면 됩니다.
저는 visual studio code를 사용합니다.
다음 강좌에서 빠르게 개발 환경을 세팅해보도록 하죠!
