피그마 썸네일형 리스트형 여기서만나 UI 개발기 프로젝트를 하면서 페어인 심바와 가장 많이 했던 말 중 하나는 "역시 UI는 너무 어려워"였다. UI 개발은 정답이 뭔지도 모르겠고, 시간도 많이 소요되었다. 코드 짤 시간이 상당량 줄어드는 게 pain point였지만 그래도 재미있는 작업이었다. 언제 또 이런 경험을 해볼 수 있을까 싶은 마음으로 재밌게 고통받았다. JS 로직 작성 시간 못지않게 UI 개발에 시간을 들였다보니 간단하게나마 글로 남기고 싶다는 생각이 들었다. 그래서 figma에서 작업한 흔적을 모아 글로 엮어보았다. 초기 프로토타입 (개발 전) 발표를 위해 간단하게 제작한 프로토타입이다. figma가 아닌 PPT에서 도형으로 만들었다. 반나절만에 만들어서 현재 결과물과 차이가 있다. @ 중간지점 검색 기능 참석자추가 폼 UI 직접 입력 .. 더보기 피그마(figma) 입문 - 생산성 끌어올리기 피그마를 제대로 활용하고 생산성을 끌어올릴 수 있는 3가지 방법을 알아보자. 1. 템플릿 활용 피그마 커뮤니티 탭에서 들어가보면 위와 같이 완성도 높은 템플릿들을 만나볼 수 있다. 이곳에 올라와있는 템플릿들은 프레임, 레이어 정리가 잘 되어있어 재활용성이 높고 레이어 관리를 어떻게 할지에 대한 감도 잡을 수 있다. 원하는 템플릿을 클릭하면 미리보기도 가능하고, 우측 상단의 Duplicate 버튼을 누르면 페이지 캔버스로 복제되어 바로 사용할 수 있다. 이 곳에서 원하는 템플릿을 찾지 못했다면 구글 검색 (검색어 예시: iOS figma template)을 통해서도 더욱 다양한 템플릿을 찾아볼 수 있다. 어마어마한 오픈소스 덕분에 무에서 유를 창조해내지 않아도 스타일의 UI디자인에 도전할 수 있다. 2. .. 더보기 피그마(figma) 입문 - 기본 환경 이해하기 피그마(figma)는 전세계 UX, UI 디자이너가 가장 많이 사용하는 UI 디자인 프로토타이핑 툴이다. 가파른 성장곡선을 그리며 2017년에는 5위, 2019년에는 2위, 그리고 2020년에는 1위를 차지하며 스스로 '대세' 툴임을 보여주고 있다. (통계 출처: uxtools.co/) 이렇게 사랑받는 비결로는 다음과 같은 특장점을 들 수 있다. 1. 실시간 협업에 최적화 2. 높은 재사용성 - 스타일, 컴포넌트 활용 - 벡터 이미지 기반으로 디바이스별로 쉽게 리사이즈 가능 3. 무료버전에서도 충분히 기능사용 가능 4. 오프라인 상태에서는 사용이 제한적임 5. 서드파티의 오픈소스 플러그인, 템플릿이 풍부함 인터페이스 피그마의 인터페이스는 입문자도 빠르게 적응할 수 있도록 직관적으로 구성되어 사용자의 효율.. 더보기 이전 1 다음
