동영상 용량 줄이기, 무료 압축 프로그램 이지집 사용 방법 > NEW 영어기초확립

웹 네이버 디자인 프로그램 픽소 Pixso HTML 자동 변환 브라우저 툴안녕하세요, 제이디입니다 :) 디지털 환경이 빠르게 진화하면서 이제 브랜드와 서비스를 알리기 위해 가장 중요한 건 웹사이트와 앱이 되었습니다. 쇼핑몰이나 브랜드의 랜딩 페이지, 포트폴리오 등은 단순하게 보여주기 위한 외형에서 그치지 않고 소비자, 유저들에게 정보를 더 쉽게 전달하고 아이덴티티를 보여줄 수 있는 공간이 되었는데요.​​이렇게 중요한 사이트나 앱을 만든다는 건 저처럼 전문가가 아닌 유저들에게는 상당히 진입장벽이 높고, 실제로 해보려 해도 여러가지 소프트웨어와 툴을 오가면서 디자인 한 파일을 HTML이나 CSS 코드로 바꾸는 게 현실적으로 어렵습니다.​​그런데 Pixso(픽소)라는 웹 디자인 프로그램으로는 별도의 소프트웨어 설치 없이 브라우저에서 HTML/CSS 자동 변환까지 할 수 있어서 전문적인 기술이 없거나 포트폴리오를 쌓아나가는 단계에 있는 유저들이 사용해보기 좋아 사용법과 써보고 느낀 점을 전해드려보려고 합니다.​​무설치 무료 디자인 작업​픽소(Pixso)의 가장 큰 장점이라면 역시 앞에서 이야기 한 것처럼 따로 설치를 하지 않아도 되고 인터넷 브라우저에서 바로 쓸 수 있는 웹 디자인 프로그램이라는 것인데요.​구글은 물론 네이버 계정 연동으로도 쉽게 가입과 로그인을 할 수 있어서 저같은 국내 유저들의 접근성도 좋아 마음에 들었습니다.​​이런 브라우저 형태의 웹 서비스가 좋은 이유는 단순하게 별도의 소프트웨어 인스톨이 필요 없다는 점에서 그치는 게 아니라 인터넷만 연결된다면 카페나 집, 사무실 어디에서든 동일한 상황에서 작업을 할 수 있다는 점도 있습니다.​집에 있는 노트북에서 만들다가 사무실에 있는 데스크톱에서 작업을 이어갈 수 있다는 뜻이죠.​​무료 플랜에서도 벡터, 이미지, 텍스트 편집 같은 기본적인 기능들부터 최대 3가지의 디자인, 화이트보드 프로젝트를 만들어 볼 수 있어서 소규모 팀 업무부터 프리랜서 유저들이 부담 없이 사용하고 테스트 하는 게 가능하다는 점도 유용하게 느껴지네요.​​처음 들어가면 영어로만 되어 있어서 당황할 수 있는데, 오른쪽 상단의 프로필 아이콘을 클릭해서 유저 센터로 들어간 다음 Language를 한국어로 바꿔주시면 됩니다.​​웹 디자인 프로그램 사용 방법​일단 픽소에 접속해서 홈 화면을 둘러 보면 이렇게 초보 유저들도 배워가면서 활용할 수 있도록 자세한 가이드 매뉴얼과 튜토리얼이 준비되어 있는 게 보이고요. 새로운 프로젝트나 화이트보드 파일을 만들 수 있는 버튼, 필요한 이미지 등의 소스를 얻을 수 있는 리소스 커뮤니티도 확인됩니다.​​새 프로젝트를 시작하면 이렇게 스마트폰, 웹페이지, 태블릿 PC와 프레임 해상도가 프리셋으로 준비되어 있기 때문에 편하게 틀을 맞추고 본격적인 작업을 할 수 있는데요.​​저는 스마트폰을 선택해서 외부 이미지를 불러와 넣기도 하고 Pixso에서 지원하는 아이콘을 추가하면서 디자인을 만들어 봤는데요.​​이후에 이렇게 새로운 페이지들을 추가하면서 어느 버튼을 클릭하거나 터치했을 때 어떤 페이지로 이동하게 되는지 등의 인터랙티브를 직접 지정해주는 것도 직관적이라 편했습니다.​​이런 작업들을 할 때마다 레이어 정리도 알아서 옆에 기록해주며, 잘 모르는 부분이나 정리가 필요한 점들이 있다면 이렇게 AI 도우미를 통해서 단계적으로 만들어 나가는 것도 가능합니다. 생각했던 것보다 훨씬 더 디테일하게 알려주기 때문에 흐름을 잡는데에 굉장히 큰 도움이 되더라고요.​​만들고 있는 과정을 직접 스마트폰 모델에 띄워서 시연을 해볼 수 있어서 신기하고 너무 편했습니다.​​팀 단위의 프로젝트가 가능하도록 파일을 링크 형태로 공유해서 다른 유저들이 접근 및 수정할 수 있게 만들어 줄 수 있죠. 1인 개발 뿐 아니라 2~3인의 소규모 인원들이 함께 만들어가는 것을 지원한다는 점도 Pixso가 웹 디자인 프로그램으로 유용한 이유 중 하나입니다.​​개발자 모드에 들어가면 위와 같이 코드로 변환한 내용들도 확인할 수 있어서 만든 시안을 개발 단계로 넘기는 것도 굉장히 수월해집니다.​​저는 웹/앱 개발에 대해 전문가와 같은 지식을 가지고 있는 것도 아니지만 픽소를 사용해서 그 과정을 훨씬 간단하고 직관적으로 해볼 수 있어 개념을 잡는 데에 도움이 되더라고요. 학생 유저들이 접하면서 배워가기에도 좋고, 프리랜서 유저들이라면 이미 알고 있지만 복잡한 단계들을 효율적으로 처리해나갈 수 있어서 유용할 것 같습니다.​​PIXSO 공식 홈페이지설치 없는 브라우저 사용에, 무료로도 쓸 수 있으며, 디자인과 개발을 잇는 HTML/CSS 자동 변환 기능까지 픽소(Pixso)를 한 번 직접 써보고, 마음에 들면 유료 플랜으로 더 많은 프로젝트와 확장 기능들을 가지고 본격적인 웹/앱 개발을 해보시면 좋겠네요 :)​​Written by 제이디