줍줍하는 블로그 줍줍하는 블로그

아임웹으로 웹사이트를 팔아본 경험으로... 제 클라이언트의 요구사항 중 하나가 '일정을 홈페이지에 게시하고 싶다' 였습니다. 아임웹에 캘린더 기능을 확인한 저는 '당연히 해드릴수있습니다!' 하고 캘린더 위젯을 사용해 클라이언트가 일정을 등록하실 수 있도록 페이지에 넣어드렸죠. 일정을 대량 등록하셔야하는 클라이언트, 그러나 아임웹 위젯은 그런 기능 없어요! 하지만 사이트 개설 후 몇일이 흐르고... 클라이언트께서 '맥 캘린더나 구글 캘린더 처럼 일정을 반복하는 기능은 없나요? 하나하나 등록하려니까 죽겠어요 ㅠㅠ' 라고 말씀하셨고 혹시나 있지않을까 하는 마음에 위젯을 구석구석 찾아보고, 문의도 해보았지만 그런 기능은 존재하지 않았습니다. 이 일정 기능이 꽤나 홈페이지에서 꽤나 큰 부분을 차지했던 터라, 클라..

한국형 노코드 빌더 웹사이트 아임웹 인내심 가득하던 미숙한 기간을 지나고 아임웹 사용에 어느 정도 익숙해졌고 외주를 받아 첫 웹사이트를 판매하게 되었습니다. 두구두구두구두구. 아임웹으로 첫 한달간 삽질을 하고 온갖 짜증과 인내심을 경험하고 난 후 다시 한달을 외주 작업을 하는데 썼습니다. 기획+디자인+구축/수정을 모두 포함해 한달 정도의 제작 기간을 거친거고 아임웹을 통해서 실제로 구축한건 정확히 재진 않았지만 10페이지 미만 1주 이내로 걸린것 같다는 생각이 듭니다. (중간에 계속 디자인을 바꾸거나 추가해서..) 돈 받고 팔아보니 느낀점. 장점 휙휙 이미 만들어진 기능을 가져다가 빠르게 배치 할 수 있다는 건 정말 좋은 것 같습니다. 실제 개발로 만들어야했다면 정말 귀찮았을 작업인데, 아임웹으로 만들면..

처음 웹디자인을 접하신 분이라면 캔버스의 크기를 어떻게 정해서 작업해야하는지에 대한 감이 없으실겁니다. 다양한 사용자가 드나드는 웹사이트는 어떤 크기로 제작되어야하는걸까요? 사람들이 많이 사용하는 기기의 해상도, 브라우저 등의 사용량을 통계적으로 보여주는 사이트가 있습니다. 바로 아래의 사이트인데요, https://gs.statcounter.com/ Statcounter Global Stats - Browser, OS, Search Engine including Mobile Usage Share Tracks the Usage Share of Search Engines, Browsers and Operating Systems including Mobile from over 5 billion monthly ..

한국형 노코드 웹빌더 사이트 아임웹 노코드로 웹사이트를 만드는 플랫폼이 유행하고, 나도 단순한 웹사이트를 빠르게 만들어내고 싶다는 욕구가 있어서 아임웹을 이용했었다. 그러나 내가 겪은 아임웹은 자연스럽지 못한 사용자 경험에 의해 뭔가 만들기도 전에 지쳐버린 경험이 있었고, 한참을 지나서 그래, 어떤 플랫폼이든 '이용자가 어느 정도는 학습해야지' 라는 생각이 들어 마침 아임웹 웨비나 관련 메일을 보고 신청 후 듣게 되었다. 해당 웨비나는 탈잉에서 웹사이트 제작 노하우를 가르치면서 크게 인기를 얻으셨던 분의 연사를 들을 수 있었다. 아임웹 이용 방법에 대한 가이드는 아니였지만 노코드 홈페이지로 어떻게 수익창출을 이뤄냈고 그의 어떤 계기가 그를 독립하게 했으며, 지금의 자리에 설 수 있게 되었는지에대한 경험담..

※피그마 영문 버전 기준입니다. 피그마 컴포넌트 사용법 컴포넌트란 중복되는 부분을 프로토타입화해서 필요시마다 재사용 가능하게 만든 것인데요, 디자인에서 반복적으로 사용되는 UI 디자인 요소를 컴포넌트화 해서 사용할 경우 작업 시간을 현저하게 줄일 수 있습니다. Component 컴포넌트 단축키 4개의 마름모 => 부모(마스터) 컴포넌트 / 빈 아이콘 => 파생된(인스턴스) 컴포넌트 Mac Command + option + K Window Ctrl + option + K Variants 컴포넌트 모음 각 컴포넌트를 만들어 Design panel 에서 variants를 만들 수 있습니다. 1. N개 컴포넌트 생성 후 전체 드래그해서 선택 2. 디자인 패널의 컴포넌트 항목의 Combine as variants..

※피그마 영문 버전 기준입니다. 피그마 사용법 정리 피그마에서는 Frame이라는 개념을 사용합니다. 피그마를 사용해보신 분이라면 A 또는 F 단축키를 이용해 프레임을 만들 수 있다는 걸 아실텐데요. 이 프레임 만드는 모습이 R키를 눌러 Rectangle을 만드는 모습과 똑같아, 이 둘의 차이점에 대해 설명이 필요할 것 같습니다. 피그마 Rectangle VS Frame Frame으로 도형을 만들 경우 피그마에서 제공하는 프레임에 대한 다른 옵션들을 설정할 수 있어 반응형 디자인에 유리합니다. 또, 프레임으로 만든 도형은 프레임의 사이즈가 변경되어도 틀 안 도형 요소에 대한 변형이 일어나지 않습니다. 그러나 Rectangle로 도형을 만들어 Group화 하여 이용하게 될 경우, Group 사이즈의 변경이 ..

Figma 오른쪽 패널 Design, Prototype, Inspect 피그마 디자인 패널 피그마 사용해보셨나요? UIUX의 떠오르는 툴셋 피그마의 기능에 대해 정리해보겠습니다. 오늘은 오른쪽 패널 중 Design 패널의 단축키를 정리해보겠습니다. ※피그마 영문 버전 기준입니다. 왼쪽 사진에 보이는 것이 피그마 UI 상 오른쪽에 위치한 Design 패널인데요, Design 패널에는 정렬과 오브젝트의 위치, 각도, 굴곡, 레이어, 면과 선, 컴포넌트 정보와 움직임 제한 그리고 내보내기 등에 대해 설정할 수 있습니다. 피그마 정렬 오브젝트 선택 후 정렬 또는 프레임안에서 정렬 버튼을 누를 경우 프레임 기준으로 정렬됩니다. 단축키 option (Alt) + A, W, S, D를 누르면 도형이 방향키처럼 따라 ..

창의적인 도구가 인터넷을 만나면? UIUX 디자인의 수요가 많아지면서 UIUX를 표현하기 위한 툴 또한 다양해졌습니다. Adobe에서 나온 XD, Photoshop, 맥의 Sketch 그리고 Zeplin 이 있는데요, 2021년 UI 디자인 통계에서 피그마(Figma)의 점유율 가장 높게 차지했습니다. 피그마는 웹과 앱 모두 자연스러운 동작으로 이용이 편리하고 가볍습니다! 팀원들과의 공유에 있어서도 링크 하나로 빠르게 공유되고 링크로 프로젝트에 접근하는 사람도 별도의 설치 없이 이용할 수 있어 간단하죠. 피그마의 주요 특징에는 실시간 업데이트 되기때문에 팀원들 모두가 결과물의 최신 상태를 늘 확인 할 수 있고, 한 파일 내에서 여러명이 동시에 작업물을 만들며 빠른 피드백이 가능합니다. 게다가 브라우저에서..