2024/Oct/28(Mon)
웹 구성요소의 기초적인 예시
웹 디자인은 어떤 구성 요소들로 웹 페이지를 이루고있을까? 자세히 살펴보면 반복 되는 구성요소들이 많이 보인다. 사람들이 많이 알고 사용하는 대표적인 예시로는 Youtube가 있다.
이 사진은 유튜브 제일 상단에 올라온 영상을 사용했을뿐 다른의도는 없다.
Youtube는 이런 사진으로 만들어진 썸네일이라는 "요소"가 있다.
썸네일이란 요소와 제목, 조회수와, 업로드 시간등이 합쳐지면 하나의 "모듈"이 된다.
만들어둔 모듈들이 합쳐지면 "템플릿"이란것이 만들어진다.
템플릿들과 다른 복합적인것들을 다 합쳐놓으면 사용자가 접하는 하나의 "페이지"가 되는것이다.
웹페이지에서 사용자들에게 필요로하는것들이 뭔지 정확히 알면 정만 간단한 요소들을 이용해서 많은 사람들이 사용하는 웹페이지를 만들수있다는것을 느낄수있는 부분이다. 가장 중요한것은 많은 사람들이 원하는 컨텐츠나 만족감을 채워줄수있는 아이디어가 가장 중요한거같다.
Figma에서 요소는 뭘까?
그럼 Figma에서 웹을 만들때 가장 기초적으로 만들어야하는 요소를 만들려면 어떻게 해야할까? 각 요소들을 하나하나 만들수도있다, 하지만 우리는 시간과 노동력을 아끼며 최상의 결과를 만들어야한다.
Figma에서 쉽게 요소 만들고 관리하기
Figma에는 Main component 즉 원본이라는것과 Instance component, 복제본 이란 계념이 존재한다.
Main, 원본 요소를만들면 원본과 똑같이 생긴 복제본을 수도 없이 만들수있다. 복제본을 그냥 많이 만들기만 하는것이아닌 원본요소를 이용해서 모든 복사본에 똑같이 수정을 해줄수있다.
원본, 복사본
Figma에서 똑같은 요소들을 구별할때는 왼쪽에있는 레이어 창을 항상 확인해야한다. 가장 정확하고 빠르게 확인을 할수있는 방법중에 하나이다.
원본
Figma에서 원본은 이렇게 생겼다.
Figma에서 복제본은 이렇게 생겼다.
한눈에 다른점을 파악할수있다. 원본은 원본인거처럼 색으로 칠해져있고 마름모로 꽉채워져있다. 반면에 복제본은 희미한 보라색에 안이 텅 비여있어서 복제본이라는 느낌을 강하게 준다.
원본에 줄수있는 속성
원본을 사용하는 이유는 작업속도 향상과 편리성이다. 많은 요소들을 관리하고 만들어야할때 비슷하게생긴 각 요소들을 처음 부터 만들어야한다면 시간도 많이들고 수정을 해야할때 똑같이 많은 시간과 에너지가 소비될것이다.
그래서 원본에 속성을 부여하면 이런것들을 더 쉽고 빠르게 관리할수있다.
속성들의 종류
원본에 부여할수있는 속성들은 4가지가있다.
- Variant : 만들어야할 모든 경우의 수의 요소들을 만든뒤 하나의 복사본만 만들어서 한번의 클릭으로 다른 요소디자인으로 변경이가능하다.
- Boolean : 원하는 텍스트나, 모형 등을 화면에서 안보이게 없엤다가 다시보이도록 할수있다.
- Instance Swap : 이미 지정해 놓은 다른색의 아이콘이나 다른 디자인의 아이콘으로 클릭 한번으로 바꿀수있다.
- Text : 지정해 놓은 텍스트 박스안의 텍스트 내용을 바꿀수있다.
속성들을 사용해서 만들어본 애플 페이지
애플 홈페이지에 나오는 아이폰Pro 구매 화면중 일부분이다.
이 요소들을 만들때 사용한 속성들은 Text와 Boolean이다.
많은 요소들이 사용됐을꺼같지만 정말 간단하게 페이지의 일부를 만들었다.
Text를 사용해서 제목,스펙,가격을 바꿀수있고, Boolean을 이용해서 스펙부분을 안보이게한뒤 저장공간을 고르는 창을 만들수있었다.
Main component를 이용해서 정말 빠르고 쉽게 모든 원본들을 관리, 수정 할수있다는게 엄청나게 편리한거 같다. 요소들을 구성하고 만들때도 정말 많은 도움이 된다. 그리고 생각보다 적은 툴들과 기능을써서 정갈하고 단정해보이는 디자인으로 웹 페이지를 만들수있다는 것이 신기했다.
