💡React React는 사용자 인터페이스(UI) 개발에 초점을 맞춘 JavaScript 프론트엔드 라이브러리로, 복잡하고 동적인 웹 페이지를 개발하는 데에 용이하다. 간단하게 말하면 React는 사용자 정의 태그를 만드는 기술이라고 할 수 있다. 실시간 대시보드, 소셜 미디어 애플리케이션, 전자상거래 플랫폼 등 다양한 분야에서 널리 사용된다. React의 특징 및 장점 React는 Facebook(현 Meta)에서 개발한 JavaScript UI 라이브러리이다. Facebook은 매우 다양한 컴포넌트와 복잡한 사용자 인터페이스를 가지고 있는데, 이러한 복잡성에 대응하기 위해 개발된 것이 React이다. 가상 DOM(Virtual DOM): React는 가상 DOM을 사용하여 UI 업데이트를 처리한다. ..
Spring MVC Framework는 웹 개발에서 널리 사용되는 아키텍처 중 하나로, MVC(Model-View-Controller) 패턴을 기반으로 한다. 💡MVC 패턴의 구조 Model 정의: 애플리케이션의 데이터를 책임지며, 비즈니스 로직을 처리한다. 역할: 사용자에게 표시되는 데이터를 가공하고 저장하며, 데이터의 변경이 일어날 경우 적절한 처리 방법을 구현한다. 구현: Java 객체로 표현되며, 특정 도메인의 데이터를 담는 역할을 한다. View 정의: 시각적인 UI를 담당하며, 사용자에게 정보를 표현한다. 역할: Model에서 받은 데이터를 화면에 표시하고, 사용자의 입력을 Controller에 전달한다. 구현: 주로 HTML, JSP, Thymeleaf 등의 템플릿 엔진을 사용하여 구현한다...
한국디지털미디어 고등학교 게임즈의 연구/창업동아리장으로 활동하며 게임즈 동아리의 게임 CD를 판매하는 교내 활동을 진행하였습니다. 게임은 CD에 담아 학교에 사전에 양해를 구하여 학생들을 대상으로 판매하였습니다. 직접 판매 광고 포스터, CD 앞 자켓, 뒷 자켓, 표면 디자인을 하였고, 업체와 소통하며 CD를 주문 제작하였습니다. 이후 캘라그라피 디자인을 추가하여 판매를 진행하였고, 2일간 46장의 CD를 판매하여 23만원의 수익이 발생하였습니다. 수익을 창출하는 게 아닌 기부를 목적으로 한 활동이었기 때문에 발생한 수익금은 전액 사회에 환원하였습니다. CD 디자인은 인쇄를 목적으로 CMYK로 디자인했기 때문에 웹/모바일 화면에서는 색상에 차이가 발생할 수 있습니다.
💡REST REST(REpresentational State Transfer)는 소프트웨어 아키텍처 스타일 중 하나로, 자원을 이름으로 구분하고 해당 자원의 상태(정보)를 주고받는 통신 방식을 나타낸다. State는 웹 애플리케이션의 상태를, Transfer는 해당 상태의 전송 방식을 의미한다. 네트워크 상에서 Client와 Server 사이의 통신 방식 중 하나이며, HTTP 프로토콜을 기반으로 하여 웹의 장점을 최대한 활용할 수 있다는 장점이 있다. REST는 반드시 Spring에서만 사용되는 건 아니며, 다양한 플랫폼 및 언어에서 활용될 수 있다. 📌REST의 구성 요소 자원 (Resource) 자원은 소프트웨어가 관리하는 모든 것을 나타내며, 각 자원은 고유한 식별자(ID)를 가진다. 이 식별자는..
💡Auto layout Figma에서는 Auto layout 기능을 통해 반응형 UI 디자인을 할 수 있다. Auto layout은 화면 크기가 바뀔 때 바뀌는 화면마다 UI 레이아웃을 조정할 필요가 없도록 자동 조정 옵션을 설정하도록 고안된 기능이다. 따라서 Auto layout 기능을 이용하면 UI/UX 디자인의 영역에서 다양한 화면 크기 및 콘텐츠 변경에 레이아웃이 대응하면서 디자인을 할 수 있다. 콘텍스트 메뉴에서 Auto layout을 선택하거나 Shift + A 단축키를 입력하여 사용할 수 있다. 오토 레이아웃으로 설정하는 옵션 1. 개체 크기 적용할 개체를 선택하고 크기를 조정하면 Auto layout은 동적으로 개체의 크기를 조절하여 내부 콘텐츠에 자동으로 대응한다. 2. 정렬 및 방향 가..
💡Prototype Figma의 프로토타이핑 메뉴는 디자인을 화면상에서 실제 동작하는 프로토타입으로 변환하는 기능을 제공한다. 이를 통해 사용자 상호작용을 미리 시뮬레이션하고, 피드백을 할 수 있다. Device 항목 설정 시 주의사항 프로토타입을 진행할 때 Device 항목을 선택하지 않으면 기본적으로 PC 기준으로 설정된다. 따라서 모바일 환경에서의 사용을 고려한다면, 프로토타입 시작 전에 디바이스를 선택하는 것이 좋다. 💡Prototype 기능 설명 Interaction details Option 터치 후 발생하는 이동 및 애니메이션 효과를 설정할 때 사용되는 기능이다. 사용자와의 상호작용에 따라 화면 전환 및 효과를 정의하여 프로토타입을 더욱 동적으로 만들 수 있다. None: 어떤 액션도 선택하..
🔎Figma 커뮤니티 플러그인과 위젯을 사용하면 Figma에서의 작업을 효율적으로 할 수 있으며, 다양한 도움을 받을 수 있다. Figma Explore, install, use, and remix thousands of templates, plugins, and widgets published to the Figma Community by designers and developers. www.figma.com 💡Annotation Sticky Note https://www.figma.com/community/widget/1125842729650935566 Annotation Sticky Notes | Figma Community This widget is one of the sticky note wid..
Figma의 디자인 파일은 툴바, 사이드바, 스크롤이 가능한 캔버스로 구성되어 있다. 이 중에서 좌측 사이드바는 레이어와 페이지에 접근할 수 있게 해 준다. Pages, Layers, Assets 세 가지 헤딩은 좌측 사이드바에서 확인할 수 있다. 각 패널 간에 전환하면서 사용하면 된다. Ctrl + Shift + \ 단축키를 누르면 좌측 사이드 바 토글을 할 수 있으며, Alt + 1 단축키와 Alt + 2 단축키를 누르면 Layer와 Asset 패널을 이동하는 게 가능하다. Figma의 모든 UI를 끄려면 Ctrl + \ 단축키를 입력하면 된다. 💡페이지 (Pages) 각 페이지는 자체 캔버스를 가지며 디자인을 탐색하고 수정할 수 있으며, 각 페이지에서 개별 프로토타입을 만들 수도 있다. 페이지는 좌..
