UXUI 디자이너가 프론트엔드 공부를 해야 하는 이유
일단 설치부터 시작해 보자
들어가며...
UXUI 디자이너라면, 한 번쯤 프론트엔드 개발자의 "안 돼요"라는 말에 의문을 가져본 적이 있을 것이다.
- 왜 안된다는 거지?
- 뭐가 안된다는 거지?
- 되는데 어렵다는 걸까? 진짜 아예 안되는 걸까?
뭘 알아야 개발도 용이하고 유저 경험도 챙길 수 있는 디자인을 할 텐데, 뭐가 안 되는 건지 왜 안 되는 건지도 모르겠고, 하나하나 설명해 달라고 할 수도 없어 답답한 적이 많았을 것이다. 나 또한 일하면서 "그럼 그 스펙 빼고 갈게요"보다 나은 방안이 있을 텐데, 경험은 크게 바뀌지 않지만 개발 난이도는 확 줄어드는 방법이 있을 텐데, 그걸 알 수가 없으니 아쉬움이 많았다.
그래서 직접 배워보기로 했다 프론트 웹개발...
웹개발이 뭔지부터 어떻게 시작해야 하는지, 완전 깨끗한 노베이스 디자이너의 관점에서 알기 쉽게, 활용하기 쉽게 정리해보려고 한다. (그래서 틀린 정보가 있을 수도 있습니다. 우연히 들렀다가 헛소리를 발견해 설명 욕구가 솟구친 개발자라면 댓글로 알려주시길 바랍니다!)
프론트 개발자의 "안 돼요"라는 말에 지친 디자이너라면, 함께 공부해 보기를 추천한다!
덧붙이자면, 요새 뜨는 실리콘밸리의 uxui디자이너 대부분은 웹개발을 할 줄 안다고 한다. 이제 디자인만 잘해서는 안 되는 시대가 왔다. 범접할 수 없는 수준의 디자인 실력을 가진 게 아니라면 (일단 난 아님) 기갈나는 인터렉션 능력이나 높은 개발 이해도 뭐 그런 것 중 하나는 함께 가지고 있는 것이 좋을 것 같다는 생각이다.
프론트 웹개발은 뭘까?
소프트웨어 제품을 만들 때 개발은 크게 프론트엔드와 백엔드로 나뉜다. 프론트엔드는 우리가 보는 화면에서 이루어지는 일을 개발하는 것이고, 백엔드는 말 그대로 back, 화면 뒤에서 이루어지는 일을 개발하는 것이다.
예를 들면, 브런치에서 아티클을 보여주고 어떤 버튼을 클릭했을 때 다른 화면으로 이동하게 해주는 것은 프론트가, 아이디와 비밀번호를 입력했을 때 어떤 회원인지 확인하고 로그인하게 해주는 것은 백엔드가 하는 일이다.
그렇다면, 뭘 이용해 개발할까?
프론트엔드는 html, css, javascript 를 이용하여 개발한다.
html
구조를 만들기 위해 사용한다. 제목 내용 표 입력창 등 디자인 없이 큰 구조를 만들 수 있다.
css
html 구조에 디자인을 입히기 위해 사용한다. 글씨 크기, 두께, 색상, 정렬 등 모든 요소를 조정할 수 있다.
javascript
구조와 디자인만 있는 사이트가 실제로 동작할 수 있도록 로직을 만들기 위해 사용한다. javascript는 백엔드 개발에서도 사용한다.
웹개발을 하기 전에...
아무것도 설치하지 않고도 웹개발은 할 수 있다. 컴퓨터에서 txt 메모장을 켜서 코드를 쳐도 된다. 하지만, 더 쉽게 개발할 수 있도록 많은 프로그램들이 나와있고, 프론트 웹개발을 할 때는 visual studio code라는 프로그램을 설치하면 된다. (왜인지는 모른다 윈도우에서 만들었고, 회사에서 개발하는 것이 아니라 혼자 연습해 보는 거라면 이 프로그램을 추천한다고 한다.)
메모장에 켜서 코드 치는 것과 다른 점은... 코드 구분이 쉽게 색상도 표시되고, 자동완성도 되고, 문법 오류도 잡아준다. 그리고 개발자처럼 보이는 간지 나는 화면을 가질 수 있다.
웹개발을 공부해 보자 하는 결심만으로도 오늘은 할 일을 충분히 해냈다! 다음 글에서는 html의 기본 구성에 대해서 알아보도록 하자.
