웹 기획시 공통된 엘리먼트들을 파악하고 사전에 라이브러리로 준비를 하면 화면 설계 시 시간을 절약할 수 있을 것이다. 알고는 있어도 실행에 옮기기까지 부지런함이 필요한 일이기도 하다. 오랫동안 웹기획일을 하면서 좀 더 시간을 절약하며 빠른 업데이트를 할 수 있는 방법이 없을지 여러 툴들을 옮겨다니며 사용해보았다. 파워포인트를 시작으로 파워포인트에서 사용할 수 있는 목업, Adobe xd, Axure를 거쳐 최근에 figma까지 사용해보게 되었다. 모든 툴들이 라이브러리를 생성할 수 있었지만 가장 빠른 시간에 가장 쉽게 활용한 것은 figma가 아닌가 싶다. 무엇보다도 무언가 설치하지 않아도 되고, 웹으로 해결될 뿐만 아니라 원본파일을 다운로드 받아 다른계정에 전달하여 사용할 수 있어 내게는 꽤 잘 맞는 도구였다.
사용하다보니 기존에 계속 미뤄왔던 모든 프로젝트에서 사용할 수 있는 기본 라이브러리를 하나 만들어 두면 좋겠다는 생각이 들었다. 프로젝트별로 라이브러리를 만들다 보면 늘 나오는 엘리먼트들이 있다. 이것을 기본값으로 만들어 두고 프로젝트별로 카피하여 각 프로젝트 특성에 맞게 확장해서 사용하면 될것으로 보인다. 그렇다면 공통적으로 사용하는 엘리먼트들은 무엇이 있을까? 머리 속에 떠다니고 있지만 확실히 정리하기 위헤서 chatGPT에게 확인해봤더니 아래와 같이 답변을 준다.
웹 기획에 사용되는 공통된 엘리먼트 - chatGPT
웹 기획 시에는 다양한 엘리먼트들이 있지만, 그 중에서도 대표적인 엘리먼트들은 다음과 같습니다.
- 네비게이션 메뉴: 웹 사이트의 주요 메뉴를 포함하는 네비게이션 바는 사용자가 웹 사이트 내에서 쉽게 이동할 수 있도록 도와줍니다.
- 헤더: 웹 사이트 상단에 위치하는 헤더는 로고, 타이틀, 서브타이틀 등으로 구성되며, 사용자가 웹 사이트를 인식하고 이해하는 데 도움을 줍니다.
- 콘텐츠: 웹 사이트의 핵심적인 내용이 담긴 콘텐츠는 사용자에게 제공되는 가치를 나타냅니다.
- 이미지와 비디오: 이미지와 비디오는 웹 사이트에서 시각적으로 눈에 띄는 역할을 하며, 콘텐츠를 더욱 생생하고 매력적으로 만들어줍니다.
- 콜 투 액션(CTA): 웹 사이트 내에서 사용자가 특정한 동작을 취할 수 있도록 유도하는 버튼이나 링크 등을 포함한 엘리먼트입니다.
- 푸터: 웹 사이트 하단에 위치하는 푸터는 저작권 정보, 개인정보 처리 방침 등의 정보를 포함하며, 사용자가 웹 사이트 내에서 필요한 정보를 찾을 수 있도록 도와줍니다.
이러한 엘리먼트들은 웹 기획 시에 핵심적으로 고려해야 할 대상입니다. 물론 이 외에도 웹 사이트의 목적과 사용자 경험(UX)에 따라 추가적인 엘리먼트를 고려해야 합니다.
정리하면, 네이게이션바, 헤더, 푸터, 콘텐츠 영역, 버튼 등이 있다. 이건 정말 아주 기본적인 레이아웃에 해당하고 웹기획 시 UI에는 더 많은 요소가 사용된다. 이에 좀 더 구체적인 엘리먼트 요소를 확인해봤다.
추가적인 엘리먼트 - chatGPT
웹 기획 시에는 다양한 추가적인 엘리먼트들을 고려해야 합니다. 목적과 사용자 경험(UX)에 따라 필요한 엘리먼트들은 다르겠지만, 대표적인 추가 엘리먼트들은 다음과 같습니다.
- 검색 기능: 사용자가 원하는 정보를 더욱 쉽게 찾을 수 있도록 검색 기능을 제공합니다.
- 태그: 콘텐츠를 라벨링하고 그룹화하는 데 사용되는 태그는 사용자가 관심 있는 콘텐츠를 더 쉽게 찾을 수 있도록 도와줍니다.
- 서브메뉴: 네비게이션 바에 서브메뉴를 추가하여 더 많은 항목을 보여줄 수 있습니다.
- 슬라이드쇼: 이미지나 비디오를 슬라이드쇼 형태로 보여주면, 사용자의 시선을 끌어 더 많은 콘텐츠를 보게 할 수 있습니다.
- 폼: 사용자가 웹 사이트와 상호 작용하기 위해 정보를 입력해야 하는 경우 폼을 사용합니다.
- 댓글: 커뮤니티 기능을 제공하기 위해 댓글 기능을 추가할 수 있습니다.
- 공유 버튼: 사용자가 콘텐츠를 손쉽게 공유할 수 있는 공유 버튼을 제공합니다.
- 구독 기능: 사용자가 새로운 콘텐츠를 구독하고 알림을 받을 수 있는 구독 기능을 제공합니다.
이러한 추가 엘리먼트들은 사용자 경험을 향상시키고 웹 사이트의 기능성을 확장시키는 데 도움을 줍니다. 웹 기획 시에는 웹 사이트의 목적과 사용자 요구에 맞게 적절한 엘리먼트를 선택하여 추가하는 것이 중요합니다.
기본적인 엘리먼트인 네이게이션바, 헤더, 푸터, 콘텐츠 영역, 버튼에 검색기능, 태그, 서브메뉴, 슬라이드포멧, 댓글이 있다고 나오는데 역시나 이것만으로 모든 화면을 표현하기는 힘들다. chatGPT가 얘기해 준것과 현재 머리 속에 떠오르는 것으로 아래와 같은 엘리먼트들을 정리해본다.
네비게이션바, 헤더, 푸더, 콘텐츠영역(카드/목록), 버튼, 검색, 아이콘(검색,삭제,수정,저장,인쇄,추천,좋아요,sns,메일,오피스), 서브메뉴, 입력아이템(텍스트박스, 드랍박스, 옵션, 체크, 날짜, 검색, 숫자, 에디트박스), 보기아이템, 텍스트, 탭, 프로필 정도가 될 것 같다. 우선 이것으로 기본 라이브러리를 만들고 프로젝트의 특성(색상, 사이즈, 디바이스)에 맞게 수정하여 사용하면 될 것이다.
figma에서 Assets 설정을 통해 공통된 컴포넌트를 생성해두고, 라이브러리를 활용해서 다른 프로젝트에서 Assets 설정한 값을 그대로 적용이 가능하다. 아래는 설정 절차에 대해 chatGPT가 정리한 내용이다.
피그마에서 Assets 설정과 라이브러리 사용법
피그마에서 Assets(자산)를 설정하는 방법은 다음과 같습니다.
- 피그마 파일을 열고, 왼쪽 패널에서 "Assets" 아이콘을 클릭합니다.
- "Assets" 패널에서 "Create new library" 버튼을 클릭합니다.
- "Create new library" 팝업에서 "Create empty library" 옵션을 선택하고, 원하는 이름을 입력한 후 "Create" 버튼을 클릭합니다.
- Assets 라이브러리가 생성되면, "Add new component" 버튼을 클릭하여 새로운 컴포넌트를 추가할 수 있습니다.
- 새로운 컴포넌트를 추가한 후, 원하는 속성(색상, 글꼴, 스타일 등)을 설정합니다.
- 설정이 완료되면, 컴포넌트를 "Assets" 패널에서 끌어다 놓습니다. 이렇게 하면 "Assets" 패널에 컴포넌트가 추가됩니다.
- 추가된 컴포넌트를 다른 프로젝트에서 사용하려면, 해당 프로젝트에서 "Assets" 패널을 열고, 왼쪽 상단의 "Libraries" 드롭다운 메뉴를 클릭합니다.
- "Libraries" 메뉴에서, 앞서 생성한 Assets 라이브러리를 선택하고, "Link" 또는 "Publish" 버튼을 클릭합니다.
- Assets 라이브러리가 프로젝트에 연결되면, 해당 라이브러리에 추가된 컴포넌트를 사용할 수 있습니다.
위와 같이 Assets 라이브러리를 설정하면, 디자인 요소(색상, 글꼴, 스타일 등)를 일괄적으로 관리하고, 재사용할 수 있어서 디자인 작업을 더욱 효율적으로 할 수 있습니다.
라이브러리는 무료 버전인 경우 공유할 수 있는 개수에 한계가 있다. 표준 Assets을 만들고 프로젝트별로 카피해서 해당 프로젝트에서 수정하는 방법을 이용할 수도 있고, 표준 Assets 에서 프로젝트별로 스타일을 만들어 두고 라이브러리를 사용할 수도 있고, 다른 프로젝트에서 생성한 Assets를 유사한 다른 프로젝트에서 라이브러리로 활용하는 방법도 있다. 이건 각자의 관리 취향에 따른 것이니 기본적으로 Assets를 이용하여 컴포넌트를 생성하고 이를 다른 프로젝트에서 재활용할 때 라이브러리를 사용할 수 있다.
자 이제 figma를 이용해서 만들어 볼까나?
'웹기획' 카테고리의 다른 글
| 신입기획자를 위한 미니 가이드북 - [웹기획 쓰윽] 양식 다운로드 (0) | 2023.07.27 |
|---|---|
| UX(User Experience)에 사용되는 용어와 관련 산출물 (0) | 2023.04.13 |
| 노코드 개발 툴을 이용하여 일기장 앱 출시가 가능할까? (0) | 2023.04.09 |
| PM과 프로젝트 관리에 연관된 역할 (0) | 2023.02.27 |
| 순서도 기호 의미와 작성법 (0) | 2022.10.19 |