brunch

You can make anything
by writing

C.S.Lewis

by 이유미 Nov 29. 2020

UI 디자이너가 알면 좋은 코딩 상식

피가되고 살이 되는 디자이너의 개발 상식 모음집

UI 디자이너가 알면 좋은 코딩 상식을 선별하고 요약한 정리글입니다.

출처 링크를 참고하시면 더 자세한 내용을 확인하실 수 있습니다.




왜 디자이너는 코딩을 고려해야 할까?


최종 산출물을 디자이너가 원하는 퀄리티에 가깝게 만들 수 있다.

디자이너가 코딩에 대해 이해하고 디자인 하면 ‘개발을 할 수 있는 기능’인지, ‘구현하는 데에 드는 난이도와 공수’가 어떻게 되는지를 판단하여 설계하고 디자인하므로, 효율적으로 작업할 수 있고 디자이너의 생각과 싱크가 높은 프로덕트를 만들 가능성이 높다. 


디자이너의 리스크를 줄일 수 있다.

프로젝트 일정이 급한 상황에서 디자이너의 공수를 줄이는 것은 매우 중요하다. 

코딩이 고려되지 않고 시각적인 부분에만 치중한 디자인은 추후에 개발이 들어갔을 때 난이도, 공수, 단가 등등 

리스크가 발생하기 쉽다. 이는 프로젝트 일정에 큰 차질을 빚을 수도 있다.


커뮤니케이션 스트레스를 줄일 수 있다.

디자인을 구현하기 위한 무조건적인 요청보다 개발자의 입장에서 구현을 위한 방안을 현실적으로 고민해 볼 수 있다. 공수가 크거나, 난이도가 있는 디자인의 경우에는 개발 일정을 고려하여 제안하거나, 충분한 협의를 통해 합의점을 찾아낼 수 있을 것이다. 



개발자를 이해하는 디자이너 되기


개발자 업무 진행 회의에 참여하기

직접적으로 코딩을 배우지 않더라도 개발자는 어떻게 일을 하는지, 그들의 관점에서 개발 프로세스를 이해해보는 것은 디자이너에게도 도움이 된다. 애자일방법론은 무엇이고, 지라로 프로젝트를 관리한다는데 어떻게 사용하는지, 개발팀의 주요과제는 무엇인지, 디자인이 바뀔 경우에 개발 프로세스에 어떤 영향을 주는지 등등 개발자들의 시각을 참고하여 작업할 수 있다.

   

개발자를 디자인 업무 회의에 초대하기

서로가 그렇듯 대부분 개발자도 디자이너의 프로세스에 대해서 잘 알지 못한다. 

디자인 컨셉, UI테스트, 사용성테스트, 프로토타입 등 어떤 툴로 하는지, 무엇을 의미하는지 등의 정보를 통해 서로간의 프로세스를 이해하고, 배려하여 효율적으로 작업할 수 있다.


인터랙션은 어노테이션을, 와이어프레임보다는 프로토타입으로 소통하기

개발자들은 문서를 꼼꼼하게 읽기보다는 그것을 이해할 수 있는 주석이 달린 몇장의 문장과 그림을 더 좋아한다고 한다. 디자이너에게는 당연한 인터랙션도 개발자에게 당연하지 않은 부분일 수 있으니, 충분한 레퍼런스와 설명을 덧붙여 주어야한다. 보다 디테일한 인터랙션 표현이 필요한 경우, 가능하다면 틀만 그려진 와이어프레임보다는 프로토타입 작업물이 있으면 더 좋다. 



코딩 입문, 코딩을 배우고 싶다면 어떻게 접근하면 효과적일까? 


코딩하고 싶은 목적 바로 세우기

배움에 있어서 가장 중요한 것은 목적이다. 흐지부지되지 않고 능동적인 배움을 위해 구체적으로 목표를 설정할수록 좋다. 가장 많이 언급되는 ’개발자와의 커뮤니케이션’이 목표가 될 수 있겠으나, 막연하고 접히지않는 목표가 될수도 있기 때문에 공부계획을 잡기 어렵다.

작더라도 구체적으로 하고싶은 작품을 목표로 하면 동기부여가 되고, 구현을 위해 얼만큼 배워야하는지 체계적인 계획을 세울 수 있게 된다.


모작 해보기

모방은 창조의 어머니라는 익숙한 속담이 있다. 모든 배움에 있어서 잘 된 예시를 따라해보는 것만큼 도움되는 것이 없는 것 같다. 기본기능을 익힌 뒤 원하는 기능이 들어가 있는 예제를 찾고, 따라해보자. 내가 어떤 코드를 쓰느냐에 따라 변화하는 작업물을 확인하면서 성취감도 얻고, 자연스럽게 코드와도 친해질 것이다.


함께할 사람 찾기 (스터디 참여하기)

혼자 공부하다보면 어느 순간 독학만으로 해결이 안되서 포기하거나, 흥미를 잃는 한계점에 부딪히게 된다. 

그럴 때 함께 공부하는 스터디모임이 있다면 빠른 해결이 가능할 뿐만 아니라, 한계가 와도 흥미를 잃지 않고 이어나갈 수 있는 원동력이 되어준다.

또한 그 속에서 나보다 잘하는 사람에게는 모르는 기능을 배우고, 못하는 사람에게는 설명하면서 어렴풋이 알던 지식도 내 것으로 만들 수 있는 좋은 기회가 될 것이다.



수준별 추천 사이트 찾기


생활코딩(무료)

https://www.opentutorials.org/

이고잉이라는 익명의 개발자가 만든 무료 개발 튜토리얼 강의이다.

개발 기초강의가 많아 코딩 입문용으로 개발자들이 추천해주는 강좌이며, 

친절하고 자세한 설명으로 비전공자들의 바이블로 불린다.


코드카데미(부분유료)

https://www.codecademy.com/

직접 UI환경에서 설명을 보면서 실습 해볼 수 있는 사이트이다.

3등분으로 나뉜 화면에서 설명과 문제를 읽고 코드를 입력하면 세번째파트에서 구현이 되는 시스템이다. 

일반과 프로로 레벨이 나뉘어있어 수준별로 다양한 학습이 가능하다.

   

칸 아카데미(무료)

https://ko.khanacademy.org/

‘전세계의 학생에게 양질의 무상교육을 제공하자’ 는 캐치프라이즈를 가지고 있는 칸 아카데미는 

컴퓨터 프로그래밍 뿐만 아니라 수학/경제/미술 등 다양한 교육이 제공되고 있다.

Course-Computing 탭에 가면 개발과 관련된 코스를 볼 수 있는데, 이론-실습이 반복되는 형태이며, 

한국어 지원도 된다.


유데미(부분유료)

https://www.udemy.com/

가장 방대한 양의 강의 양을 자랑하는 교육동영상사이트이다. 

비즈니스, 재무회계, 디자인 등 세세하고 다양한 카테고리를 보유하고 있고 별점과 리뷰를 통해 강의의 질과 타깃을 확인할 수 있다. 유료강의일 경우 강사에게 질문도 가능하다.




참고 링크

https://brunch.co.kr/@ywkim36/24

https://brunch.co.kr/@ggsein/3

https://brunch.co.kr/@wepostit/4

브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari