Web Programming/Design
-
Web Programming/DesignSVG를 이용하여 Animation 만들기_후속
안녕하세요 씨앤텍시스템즈입니다. 오늘은 SVG를 이용한 Animation을 생성하기 후속편으로, svg의 속성 대해서 알아보겠습니다. svg태그를 html에서 사용하다보면, 아래와 같이 svg에 preserveAspectRatio 속성이 사용되는 것을 확인할 수 있습니다. --생략-- 이 속성(preserveAspectRatio)을 본격적으로 다루기 전에 viewBox와 viewport에 대해서 먼저 정리하고 넘어가겠습니다. viewBox는 svg가 가지고 있는 도형의 원형 즉, Figma에서 추출한 frame의 크기로써, frame 크기와 동일한 값으로써 초기 형성된다고 정리하면 쉽습니다. viewport는 viewBox를 감싸는 박스로 예를 들어, 사용자가 창문을 통해 viewBox를 보게 될 때 그..
-
Web Programming/DesignSVG를 이용하여 Animation 만들기
안녕하세요 씨앤텍시스템즈입니다. 오늘은 SVG를 이용한 Animation을 생성하는 방법에 대해서 정리하겠습니다. 이 글은 https://youtu.be/UTHgr6NLeEw?si=L0r4UHGpoLLN96Ld 자료를 참고하여 작성하였습니다. 이 글의 각 파트별 마지막에는 아래의 두 가지 animation을 완성할 수 있습니다. 목표 1 : animation1 먼저, animation1을 만드는 과정을 살펴보겠습니다. 사용할 색상을 정해줍니다. 그리고 나면, Figma(선택)를 통해 animation을 적용할 도형을 만들어 줍니다. 그래픽의 픽셀이 깨지지 않게 하기 위해서 frame은 최대한 작은 사이즈로 만들어 줍니다. 코드로 뽑을 때 파악하기 쉽도록 layer 별로 이름을 지정해줍니다. 추출할 도형의..
-
Web Programming/DesignUI Component
안녕하세요, 씨앤텍시스템즈 이나연 연구원입니다. 이번 글에서는 웹/앱의 UI 개발에서 Component에 대한 내용을 정리해 보겠습니다. UI에서의 컴포넌트 UI 컴포넌트를 개발하는 다양한 방법들 1. UI에서의 컴포넌트 먼저 '컴포넌트(Component)'는 부품이라는 사전적 의미를 가지고 있습니다. UI 개발에서의 컴포넌트는 특히 사용자와 상호작용하는 기본적인 형태로, 어느 공간에서도 기능을 수행할 수 있는 최소한의 단위를 의미합니다. 재사용이 가능하도록 특정 영역에서만 사용 가능하지 않도록 하고, 기능적으로나 시각적으로나 명확한 용도에 따라 구성합니다. UI 컴포넌트는 사용자가 사용하는 최소 단위로 다른 요소와 구분하고, 행동에 반응하고, 현재 상태에 대한 정보를 전달하기 위해 크게 아래와 같은 5..
-
Web Programming/DesignUI/UX & HCI 디자인이란
안녕하세요. 씨앤텍시스템즈 홍정화 연구원입니다. 이번 포스트에서는 UI/UX 그리고 HCI에 대하여 정리해 보았습니다. UI (User Interface) – 사용자와 마주하다 - UI는 요약하자면 사용자가 앱을 사용할 때 마주하는 디자인, 레이아웃, 기술적인 부분 - 디자인의 구성요소(폰트, 컬러, 줄간격 등) 상세한 요소가 포함 - 기술적인 부분(반응성, 입출력단계, 애니메이션효과 등) 여러 부분을 포함 - UI = 디자인 & 기술 예시) UI는 다양한 사용자가 사용할 수 있도록 보편성을 지녀야 하며 전체적으로 사용에 잇어 큰 불편함이 없어야 한다. 좋은 UI는 대부분의 사용자가 높은 만족도를 가져야 하며 어쩔 수 없이 발생하는 주관적인 불만족을 최소화 시켜야 한다. UX (User Experienc..
-
Web Programming/DesignAdobe illustrator 활용하기-그래픽 아이콘
안녕하세요. 씨앤텍시스템즈 이나연 연구원입니다. 이번 글에서는 Adobe illustrator를 활용하여 그래픽 아이콘을 만드는 과정을 간단하게 정리해보았습니다. Adobe illustrator에서 원이나 사각형의 오브젝트를 가지고 원하는 모양을 만들기 위해, 패스파인더와 도형 구성 도구를 사용해볼 수 있습니다. 패스파인더와 도형 구성 도구는 두 개이상의 오브젝트끼리 모양을 빼거나 합쳐서 새로운 형태의 오브젝트를 만들어낼 수 있다는 공통점이 있습니다. 그래픽 아이콘을 만드는 과정과 함께 두 도구를 사용하는 방법을 간단하게 설명해보겠습니다. 이 글의 설명은 Adobe illustrator CC 2019 (한글판)을 기준으로 작성되어있으며, 버전이 달라도 화면 요소들과 작업방식은 크게 다르지 않습니다. Ad..
-
Web Programming/Design웹 퍼블리싱과 프런트엔드 개발의 환경구축
안녕하세요. 씨앤텍시스템즈 홍정화 연구원입니다. 이번 포스트에서는 웹 퍼블리싱과 프런트엔드 개발의 개발환경에서 각종 디자인에 대하여 정리해 보았습니다. 최근 인터넷의 중요성이 갈수록 높아지고 발전한 결과로, 웹 관련 직업에서는 분야에 따라 많은 세분화가 일어났습니다. 때문에 웹 관련 분야에서는 직업의 분화가 생겨났습니다. 일반적으로 프론트엔드 개발자를 웹퍼블리셔라고 일컫습니다. 이러한 웹 퍼블리셔와 웹디자이너의 의미를 혼동하시는 분들이 많기에 먼저 이 둘의 의미를 살펴보겠습니다. 웹디자이너는 '색감을 조합하여 컨셉에 맞추고 브랜딩, 디자인 하는 직업' 웹퍼블리셔는 '컴퓨터언어를 이용하여 웹사이트를 구축하고 구성하는 직업' 웹 프로그래밍의 한 분야. 프론트엔드 개발자는 프론트엔드, 백엔드의 완전한 분리 구..