IT업계에는 디자인과 관련된 분야가 꽤 많습니다. 그 중 가장 흔한 것은 UX와 UI라는 약어 뒤에 숨겨진 디자이너입니다. 글쎄, 어떤 사람들은 심지어 프런트엔드 개발자를 디자이너로 포함시키기도 합니다. IT계에서는 디자이너가 누구인지, UI와 UX의 차이는 무엇인지, 프론트엔드 엔지니어는 디자인과 어떤 관계를 맺고 있는지 알아보도록 하겠습니다.
디자이너
애플리케이션, 웹사이트 또는 게임의 인터페이스를 개발하는 것은 다소 복잡한 과정이며 엔지니어링, 심리학, 디자인 등 다양한 분야의 지식을 적용해야 합니다. 사용자 인터페이스 디자이너(영어 - 사용자 인터페이스 또는 UI)는 사이트의 기능(검색, 탭, 메뉴)이 표시되는 방식과 클라이언트와 인터페이스 간의 상호 작용 세부 사항에 중점을 둡니다. UI 디자이너의 목표는 미학적으로 수용 가능한 현대적인 제품 디자인입니다 . UX는 User Experience의 약자로 '사용자 경험'을 의미합니다. UX 디자이너는 잠재 사용자의 인터페이스 사용성과 이해에 더 중점을 둡니다. 이러한 전문가는 디자인 컨셉을 수립하기 위한 기초가 되는 연구와 조사를 수행하고 개발 도중과 개발 후에 컨셉을 테스트하는 경우가 많습니다. 일반적으로 구조, 콘텐츠, 탐색 및 사용자가 이러한 요소와 상호 작용하는 방식에 중점을 둡니다.
소프트웨어를 만들 때 기본 구조인 사이트맵, 프로토타입을 제작합니다. UX 디자이너 작업의 목표는 사용자가 사이트에서 자신이 온 목적을 빠르고 고통 없이 얻을 수 있도록 하는 것입니다 . 그러나 오늘날에는 이 두 가지 전문 분야에 슬래시를 사용하여 표기하는 것을 흔히 볼 수 있습니다. 즉, 양방향 작업을 한 명의 전문가가 수행합니다. UX/UI 디자이너는 사용자와 인터페이스의 상호 작용을 디자인하고, 정확히 무엇을 해야 하는지 결정하며, 결과적으로 이 인터페이스가 어떻게 보일지에 대한 책임을 집니다.
UX/UI 디자이너가 알아야 할 것
그래픽 편집기 . 시장에서 가장 인기 있는 도구는 Adobe Photoshop, Adobe Illustrator, Sketch, Figma입니다. 자신에게 편리한 편집기를 선택하고 먼저 웹사이트나 애플리케이션의 스크린샷을 그려서 약간 현대화해 보세요.
작업의 세부 사항에 따라 HTML 및 CSS 또는 (일부) 프로그래밍 언어에 대한 이해가 필요할 수 있습니다(리소스 링크는 아래 "프런트 엔드 개발자가 알아야 할 사항" 섹션에서 찾을 수 있음).
프론트엔드 개발자
프론트엔드 개발자의 주요 임무는 인터페이스의 클라이언트 부분을 개발하는 것입니다. 즉, 그러한 전문가는 디자이너가 디자인한 것을 "활성화"합니다. 그는 인터페이스의 운영 및 운영을 담당하며 시각적 콘텐츠는 담당하지 않습니다. 프론트엔드 개발자는 개발 단계에서 사용자 인터페이스에 대한 좋은 솔루션을 찾아야 하는 경우가 많기 때문에 UX/UI 디자이너와 협업하는 경우가 많습니다. 프런트 엔드 개발자가 작성한 코드는 사용자의 브라우저("클라이언트 측"이라고 함)에서 실행됩니다. 또한 가장 중요한 작업 중 하나는 사이트나 웹 애플리케이션이 모든 플랫폼과 브라우저에서 동일하게 보이는지 확인하는 것입니다.
프론트엔드 개발자가 알아야 할 것
일반적으로 프런트 엔드는 HTML 페이지 마크업 언어, CSS 스타일 시트 및 JavaScript 프로그래밍 언어라는 세 가지 요소를 기반으로 합니다. 또한 프런트엔드 개발자는 HTTP 프로토콜, 서버 및 브라우저의 작동 원리와 현재 시중에 판매되는 다양한 장치에서 인터페이스를 표시하는 기능을 이해해야 합니다. 웹 인터페이스를 생성하는 도구와 방법은 끊임없이 발전하고 변화하므로 개발자는 이를 지속적으로 모니터링해야 합니다.
HTML 및 CSS(레이아웃)
이것은 사이트가 건설되는 바로 그 벽돌의 레이아웃입니다. HTML 마크업 언어는 사이트의 구성, 콘텐츠 및 이들 간의 모든 상호 작용을 지정합니다. 페이지 상단, 하단, 콘텐츠가 포함된 측면 블록, 제목, 텍스트 표시 및 멀티미디어 요소를 지정할 수 있습니다. CSS 스타일 시트는 HTML 요소를 장식하는 데 사용됩니다. 페이지에 있는 각 그래픽 요소가 표시되는 방식을 정확하게 결정합니다. 최신 버전의 HTML5 및 CSS3를 사용하면 페이지에 비디오 및 오디오 구성 요소를 배치하고 2D 이미지 및 애니메이션을 만들 수 있으며 간단한 게임을 작성할 수도 있습니다. 모든 태그와 스타일을 한 번에 기억하려고 할 필요가 없습니다. 기본 사항을 배우고 즉시 실행해 보는 것이 도움이 될 것입니다. HTML과 CSS의 기본을 배울 수 있는 아주 좋은 사이트는 W3School입니다. 그러나 최소한 영어에 대한 기본 지식이 있는 경우에만 가능합니다.
또한 프런트 엔드 개발자는 크로스 브라우저 및 크로스 플랫폼 개발, 적응형 및 반응형 레이아웃을 이해해야 합니다.
부트스트랩
HTML, CSS, JavaScript를 위한 프레임워크입니다. 즉, 생성자처럼 사이트를 없을 때보다 훨씬 빠르게 사이트를 구성할 수 있는 특정 템플릿입니다. 하지만 물론 필요에 맞게 사용자 정의해야 합니다. 영어를 알고 있다면 getbootstrap 웹사이트 와 동일한 w3schools를 추천합니다 .
자바스크립트
자바스크립트는 프론트엔드 개발의 핵심입니다. 이것은 최초이자 가장 널리 퍼진 인터페이스 프로그래밍 언어입니다. 사이트에 많은 기능을 추가할 수 있습니다. 기본적으로 이 언어를 사용하면 페이지에 대화형 요소를 추가할 수 있습니다. 실시간으로 업데이트되는 지도, 대화형 온라인 게임 및 영화를 만드는 데 사용됩니다. 고급 JavaRush 과정에서는 JavaScript를 약간 배웁니다. 동일한 W3School 에서 공부하거나 javascript.ru 웹사이트에서 러시아어로 읽을 수도 있습니다 .
jQuery
jQuery는 개발을 더욱 쉽고 빠르게 만들 수 있는 플러그인과 확장 기능이 포함된 Javascript 라이브러리입니다. 코드를 처음부터 작성하는 대신 라이브러리를 사용하면 미리 만들어진 구성 요소를 추가한 다음 특정 프로젝트에 맞게 사용자 정의할 수 있습니다. 검색 양식 자동 채우기, 그리드 재정렬 및 크기 조정, 카운트다운 타이머 설정 기능을 사용할 수 있습니다. w3school의 jQuery 실습 과정
자바스크립트 프레임워크
다양한 유형의 프레임워크가 있지만 사용하기 편리한 것을 선택할 수 있습니다. 가장 유명한 것은 Angular, Backbone, Ember 및 React입니다. 이는 코드에 대해 미리 만들어진 구조를 나타냅니다. 개발 속도를 높이는 데 도움이 됩니다. 그리고 라이브러리와 함께 사용하면 처음부터 웹사이트나 애플리케이션 개발을 최소화할 수 있습니다. 2017년 가장 인기 있는 5가지 JavaScript 프레임워크 및 라이브러리 검토
Git 버전 관리 시스템
버전 관리 시스템은 시간 경과에 따른 코드 변경 사항을 추적할 수 있습니다. 또한 프로젝트의 이전 버전으로 돌아갈 수도 있습니다. Git은 가장 널리 사용되는 버전 관리 시스템입니다. Git으로 작업하는 방법을 아는 것은 모든 개발자에게 중요한 기술입니다. 러시아어로 된 Git 튜토리얼
간략한 결론
UI는 User Interface의 약자로 '사용자 인터페이스'를 의미합니다. 즉, UI 디자이너는 제품이 사용자에게 표시되는 방식을 주로 담당합니다. 그는 버튼, 아이콘을 개발하고 글꼴을 선택하고 레이아웃을 준비합니다. UX는 사용자 경험을 의미합니다. 따라서 UX 디자이너는 사용자가 편안하고 내용을 이해할 수 있으며 최소한의 노력으로 사이트에서 필요한 것을 얻을 수 있도록 웹사이트, 애플리케이션 등의 디자인을 디자인합니다. 두 가지 유형의 작업 모두 UI/UX 디자이너라는 한 사람의 오케스트라가 수행하는 경우가 많습니다. 프런트엔드 개발자는 디자이너의 작업에 역학을 도입하여 디자이너의 작업에 활기를 불어넣습니다. 버튼을 누르기 시작하면 그림이 바뀌기 시작합니다. 그는 프레임워크, 전처리기 및 라이브러리에 능숙한 프로그래밍 언어를 알아야 합니다.
GO TO FULL VERSION