Low Fi란?

Low Fi는 Low Fidelity의 약자로, 일반적으로 디자인 작업 단계 중 하나입니다. 보통 디자인 프로세스는 Low Fi -> Mid Fi -> Hi Fi의 단계로 진행됩니다. Low Fi 단계에서는 주로 스케치나 초안을 작성하며, 여기에는 웹사이트 또는 앱의 기본적인 레이아웃과 UI 요소들이 포함됩니다.

일부 복잡한 프로젝트에서는 Low Fi 단계에서 워크플로우(사용자의 동작 및 화면 전환을 설명하는 것)를 추가하기도 합니다. 하지만, 모든 프로젝트에서 워크플로우를 삽입하는 것은 필수적이지 않습니다.

Low Fi 단계에서 디자인 요소와 레이아웃을 잘 정립하면, 이후의 High Fidelity 디자인 및 코딩 작업이 원활하게 진행됩니다. 따라서 Low Fi에서 초기 기준을 잘 설정하는 것은 디자인 및 퍼블리싱 작업을 수월하게 이어가는 데 큰 도움이 됩니다.

Concepts 어플을 활용한 Low Fi 스케치

저는 주로 Low Fi 스케치 작업을 할 때 Concepts라는 아이패드 어플리케이션을 선호합니다. 이 프로그램을 사용하는 이유는 그림을 그릴 때 제한 없는 캔버스 공간을 활용할 수 있으며, 필기감이 좋아 디자인 작업을 빠르게 진행할 수 있는 편리한 환경을 제공하기 때문입니다. 이를 통해 빠른 프로토타이핑과 아이디어 표현이 가능합니다.

Page목록

1. Home
   홈 페이지는 목적과 도구를 쉽게 파악할 수 있도록 구성되어 있습니다. "Save Your Time" 부분에는 고유한 로고가 제작될 예정이며, "Contents" 부분은 케러셀로 디자인되어 다수의 콘텐츠를 나열할 수 있습니다. 더 많은 콘텐츠가 추가될 경우, 화면에서 벗어나지 않도록 오른쪽에서 왼쪽으로 무한 슬라이딩 기능을 구현할 계획입니다.

2. Menu
   메뉴에 대한 디자인 옵션은 아직 확정되지 않았으며, 간단한 드롭다운 메뉴, 사이드 슬라이드 형태, 또는 기업 페이지처럼 세부 메뉴를 보여주는 방식 중 어떤 것을 선택할지에 대한 여러 아이디어가 고민 중에 있습니다. 하지만 Low Fi 단계에서는 드롭다운 메뉴로 간단하게 스케치해보았습니다.

3. em to px page
   기본적으로 Base PX는 HTML에 아무 설정도 하지 않았을 때 처럼 16px로 설정되어 있습니다. 초기 구상은 실시간 값 변화로 설정하려 했으나, 이로 인해 악의적인 조작이나 예상치 못한 이벤트로 인한 문제가 발생할 수 있을 것 같아서 더 안전한 방법으로, 계산 버튼을 누를 때 변경할 수 있도록 디자인되었습니다. 또한, 폰트 크기 입력값을 강조하여 사용자가 명확하게 입력할 수 있도록 하였습니다.

4. contect page
   문제 발생 시 관련 페이지로 즉시 이동할 수 있도록 Footer에 버튼을 추가하였습니다. 이 버튼의 동작 방식에 대한 고민 중에 있으며, 두 가지 옵션을 고려 중입니다