노션으로 스타트업 채용 워크플로우를 혁신하는 방법

노션 웹사이트에 폼을 더하다.

안녕하세요👋👋

노션 웹사이트 제작부터 폼 빌딩, 데이터 관리까지 해주는 올인원 웹 서비스 <폼플렛>의 디자이너 최도은입니다🤩

채용은 회사를 소개하고, 회사에 어울리는 인재를 모집하는 과정입니다.

이에 채용 단계에서부터 회사를 잘 드러내는 것이 중요하고, 이를 위해 자체적으로 채용 페이지를 제작하여 회사를 소개하고 채용 공고를 게재하는 것이 일반적입니다.

최근에는 이것을 채용 브랜딩이라고 부르기도 하는 것 같습니다.

하지만 채용 사이트를 제작하기 위해서는 많은 시간과 비용이 들고, 이에 대한 대안으로 최근에는 노션을 활용해 채용 페이지를 제작하는 사례가 많이 보이는 것 같습니다.

아래 블로그는 해외 아티클을 번역한 후 저의 사설을 붙인 것(?)입니다.

2024년 1월 22일 폼플렛 업데이트 노트🛠️

📢

안녕하세요, 폼플렛입니다!
폼플렛의 2024년 1월 22일 업데이트 사항을 빠르게 공유해드립니다!!

폼플렛의 2024년 1월 22일 업데이트 사항이 아래 블로그에 업로드 되었습니다🙌

💜주요 업데이트💜

1. 편집페이지 UI 개선

2. 폼 - 모바일 보기 화면 개선

3. 폼 - 파일 업로드 기능 추가

폼플렛은 지금 바로 아래 링크를 통해 사용해보실 수 있습니다!

폼플렛에 많은 관심 부탁드립니다🙏💜

*폼플렛은 웹 전용 서비스이오니 PC로 접속해주시기 바랍니다!

간단한 아이디어/가설 검증을 위해, 노코드 툴을 활용한 효율적인 랜딩페이지 제작

노션 웹사이트에 폼을 더하다.

안녕하세요👋👋

노션 웹사이트 제작부터 폼 빌딩, 데이터 관리까지 해주는 올인원 웹 서비스 <폼플렛>의 디자이너 최도은입니다🤩

저희 <폼플렛>은 지난 11월 13일에 팀 빌딩이 되어, 1월 5일 MVP 배포를 목표로 빠르게 달려온 팀인데요,

초기 프로덕트의 가설이 정말 맞았는지에 대해 빠르게 검증하기에 효과적인 것이 바로 랜딩페이지입니다.

우리 프로덕트가 얼마나 많은 유저들의 관심을 받을 수 있는지, 정말 시장성이 있는지를 제품이 나오지 않은 상태에서 빠르게 확인하는 것이죠.

랜딩페이지는 일종의 MVT로서 기능할 수 있습니다.

MVT는 'Minimum Viable Test'의 약어로, 최소한의 기능으로 구성된 테스트 버전을 개발하여 이를 런칭하고, 사용자 반응을 모니터링하는 방식입니다. MVT는 제품이나 서비스를 출시하기 전에 가설을 검증하거나 사용자 반응을 파악하기 위해 사용되고, 최근 많은 스타트업의 제품이나 서비스 개발 초기에 적용되는 것을 자주 찾아볼 수 있습니다.

이때 제품이 개발되지 않은 상태에서 빠르게 서비스를 시장에서 검증하고 싶다면 랜딩페이지를 통해 MVT를 진행할 수 있는 것이죠. 비록 아직 개발된 부분이 없지만 내가 런칭하려는 서비스가 이미 시장에 존재하는 것처럼 시장에 뿌려보고, 유저들이 내 페이지에 와주는지, 사전신청을 하는지 등의 반응을 살펴보는 것입니다. 이를 통해 리스크와 리소스를 줄일 수 있겠죠.

따라서, 이를 위한 랜딩페이지는 서비스에 대해 간단하지만 명확한 설명을 보여주어야합니다.

토스의 경우, 처음부터 간편 송금 서비스를 완벽하게 개발해둔 것이 아니라, 서비스에 대한 니즈를 가지고 있는 유저가 있는지를 먼저 확인할 수 있도록, 랜딩페이지를 먼저 만든 후 페이스북 광고를 진행했습니다.

그 결과 며칠만에 수만명의 신청자가 모였고, 무료 간편 송금 서비스에 대한 시장 수요 검증을 완료할 수 있었습니다.

이처럼, 빠르고 단순하게 만든 랜딩페이지가 매우 중요하게 기능할 수 있습니다!

그렇다면 효율적인 랜딩페이지 어떻게 만들 수 있을까요?

랜딩페이지를 포함한 모든 웹페이지를 만드는 정석은, 기획자의 기획에 따라 디자이너가 디자인을 하고, 이 디자인을 개발자의 개발을 통해 웹페이지로서 구현하는 것이겠지만,

초기 스타트업이나 프로덕트의 경우에는 1. 사람이 적고 2. 시간이 부족한 문제 등으로 이러한 과정을 통해 랜딩페이지를 만드는 것이 어려울 것입니다🥲

그럴 때, 노코드 툴을 사용할 수 있습니다✨🔥

노코드 툴은 코드 없이 비개발자도 누구나 쉽게 웹페이지를 디자인하고 만들 수 있는 프로덕트인데요, 단순한 한 페이지짜리 랜딩페이지 뿐 아니라, 복잡한 형태의 제품 MVP까지도 노코드 툴을 활용해 개발자 없이 구현할 수 있습니다🫢

노코드 웹 빌딩 툴에는 정말 다양한 제품이 있는데요, 오늘은 그 중에서 총 4개의 제품을 소개해드리려고 합니다. 각 툴마다 장단점이 있고, 활용하기에 적합한 경우가 다르니 잘 살펴보시고 선택하시면 좋을 것 같습니다🤩

4가지 노코드 툴에 대한 자세한 소개는 아래 폼플렛 블로그에서 확인하실 수 있습니다!

👇더 읽어보고 싶으시다면 아래 링크를 확인해주세요👀

폼플렛은 빠르게 간단한 랜딩페이지를 만들어야하는 분들을 위한 최적의 서비스이니 한번씩 관심 가져주시면 좋을 것 같습니다☺️

폼플렛은 지금 바로 아래 링크를 통해 사용해보실 수 있습니다!

폼플렛에 많은 관심 부탁드립니다🙏💜

*폼플렛은 웹 전용 서비스이오니 PC로 접속해주시기 바랍니다!

2024년 1월 16일 폼플렛 업데이트 노트🛠️

📢

안녕하세요, 폼플렛입니다!
폼플렛의 2024년 1월 16일 업데이트 사항을 빠르게 공유해드립니다!!

폼플렛의 2024년 1월 16일 업데이트 사항이 아래 블로그에 업로드 되었습니다🙌

💜주요 업데이트💜

1. OG tag 설정 기능

2. 컬러 팔레트

3. 툴팁

주니어 디자이너가 직접 부딪히며 배운 로그인/회원가입 UX/UI 디자인-놓치기 쉬운 5가지

노션 웹사이트에 폼을 더하다.

안녕하세요👋👋

노션 웹사이트 제작부터 폼 빌딩, 데이터 관리까지 해주는 올인원 웹 서비스 <폼플렛>의 디자이너 최도은입니다🤩

저희 <폼플렛>은 지난 11월 13일에 팀 빌딩이 되어, 1월 5일 MVP 배포를 목표로 빠르게 달려온 팀인데요,

아무래도 빠른 시간 내에 프로덕트 기획부터 디자인, 개발까지 바쁘게 진행하다보니 놓치고 지나가는 부분이 많았어요😢

현재는 배포 이후 베타 테스트와 유저 테스트를 진행하며 발견되는 문제들을 해결하는 것과 사용성 개선에 집중하여 프로덕트를 디벨롭해가고 있는데요,

이 과정에서 주니어 디자이너로서 제가 배우게된 것들이 많아 메이커로그로 작성해 공유해보려고 합니다😊

오늘은 그 중에서도 모든 서비스의 시작이라고 할 수 있는 로그인/회원가입 부분의 UX/UI 디자인을 할 때 주니어라면 놓치기 쉬운 몇가지에 대해 이야기 해보려고 해요!

로그인/회원가입 UX/UI 디자인-놓치기 쉬운 5가지

1️⃣ 플레이스홀더

플레이스홀더는 입력 필드 안에 쓰여 있는 글을 말합니다. 사용자가 입력을 시작하기 전까지 일반적으로 밝은 음영으로 표시되는 텍스트죠.

• 플레이스홀더

최근에는 스마트폰 사용의 증가로 공간을 절약할 필요가 생겼고, 필드 레이블을 플레이스홀더처럼 입력 필드 안에 쓰는 사례가 증가했습니다.

• 필드 레이블을 플레이스홀더처럼 입력 필드 안에 쓰는 경우

하지만 위와 같이 필드 레이블을 플레이스홀더처럼 쓰는 경우, 입력을 위해 필드를 선택하는 순간 사용자가 해당 영역이 어떤 것을 작성해야하는 영역인지 인지할 수 없다는 문제가 있습니다.

또한, 입력해야하는 텍스트의 형식을 안내하기 위해 별도의 안내 메시지를 주변에 함께 배치해야합니다.

따라서, 폼플렛은 필드 레이블과 플레이스홀더를 모두 사용하는 것으로 결정하였고, 플레이스홀더에는 입력하는 텍스트의 규칙이나 예시를 넣기로 하였습니다.

예를 들어, 폼플렛 계정의 비밀번호는 영문&숫자&특수문자를 포함해 8~15자로 쓰여야한다는 정책이 있는데요,

사용자가 이 정책에 따라 비밀번호를 만들 수 있도록 플레이스홀더에 해당 안내를 삽입했습니다.

이와 같이 플레이스홀더를 사용하니, 지금까지 진행된 십여 회의 베타테스트에서 폼플렛의 비밀번호 생성 규칙을 인지하지 못한 사용자는 없었습니다!

하지만, 이와 같이 플레이스홀더를 사용했음에도 사용자에게 혼란을 야기한 사례가 있었는데요😅

• 휴대폰 입력 전과 입력 후

폼플렛은 현재 휴대폰을 입력할 때 하이픈(-) 없이 숫자만 입력하면, 최종 형태가 자동으로 하이픈(-)이 삽입되어 보여지는 형태로 개발되어있는데요,

이에 사용자가 하이픈(-)을 제외하고 숫자만 입력할 수 있도록 위와 같이 플레이스홀더를 설정하였더니, 왜 플레이스홀더와 최종적으로 보여지는게 다른지 의문을 갖는 사용자 분도 있었답니다😂

이런 부분은 디자이너와 개발자가 반드시 선 논의 후 적용해야하는 부분인 것 같습니다!

2️⃣ 에러메시지

에러메시지는 오류가 발생했음을 알리고 사용자가 완료하고자 하는 프로세스를 일시적으로 중단시키는 역할을 하는데요,

로그인/회원가입에서는 주로 정책에 맞지 않아 사용할 수 없는 비밀번호라는 것을 알리거나, 이미 가입된 메일이므로 가입할 수 없다는 안내를 할 때 사용하게 됩니다.

• 에러메시지-아이디와 비밀번호를 확인해주세요.

에러메시지는 상술한 것과 같이 사용자의 프로세스를 중단시키고 경험을 지연시키기 때문에 친절하게 작성할 필요가 있습니다.

사용자의 열의는 이미 약해져 있기 때문에, 에러메시지는 프로세스를 포기하게 만드는 결정타가 될 수 있습니다😭

에러메시지는 다음과 같은 세 가지 목표를 달성해야 한다.

1) 문제가 있다는 것과 그 문제가 무엇인지 간단하고 명확하게 설명해야 한다.

2) 사용자가 중단됐던 곳으로 되돌아가 프로세스를 바로 끝낼 수 있도록 해결책을 제시해야 한다.

3) 지연되는 현재 상황을 가능한 한 즐거운 경험으로 바꿔야 한다.

출처: 마이크로카피(UX 디자이너의 글쓰기) - 킨너렛 이프라 https://product.kyobobook.co.kr/detail/S000001804970

위와 같이 에러메시지는 사용자가 무엇을 잘못했는지와, 해결을 위해 어떻게 행동해야하는지를 명확히 제시해야하는데요,

로그인/회원가입의 경우 대다수의 사용자가 이미 수없이 많이 겪어온 경험이기에, 폼플렛은 위 조건을 모두 충족시키지만 과하게 길어지는 에러메시지보다 짧고 함축적인 에러메시지를 택했습니다.

• 폼플렛의 회원가입 에러메시지

비밀번호 에러메시지의 경우, '사용 불가능한 비밀번호입니다.'라고 표시하여 사용자가 무엇을 잘못했는지 명확하게 알리고, 그렇다면 어떻게 수정해야하는지는 플레이스홀더를 통해 확인할 수 있도록 하였습니다.

비밀번호 확인 에러메시지의 경우에도, '비밀번호가 일치하지 않습니다.'라고 표시하여 잘못된 지점을 명확히 알렸지만, '위에 입력한 비밀번호와 동일하게 다시 입력해주세요.' 등의 긴 에러메시지를 입력하는 것은 지양하였습니다.

실제로 베타 테스트에서 만난 사용자들의 경우 이러한 에러메시지에 노출되었을 때 의문을 갖지 않았고,

이것은 사용자들이 이미 충분히 많은 로그인과 회원가입을 겪어 왔기 때문에 경험의 일관성에서 야기된 결과라고 생각했습니다.

3️⃣ 본인인증 방식 확인

(중략...)

👇더 읽어보고 싶으시다면 아래 링크를 확인해주세요👀

마무리

정리하고 나니 왜 요즘 많은 서비스들이 소셜 로그인을 선택하는 지를 더 절실히 알게되는거 같습니다...

살면서 경험해온 수많은 서비스들에서 대부분 거치게 되었던 로그인/회원가입이라 쉽게만 생각했었는데, 생각보다 고려하고 신경써야할 부분이 더 많았네요😂

어쩌다보니 첫 메이커로그는 로그인/회원가입의 UX/UI 디자인에 대해 적게 됐지만...

저희는 현재 로그인/회원가입이 필요 없는 간단한 웹사이트가 필요한 분들을 위해 딱!인 노션 웹사이트 제작 웹 서비스를 만들고 있는데요🤩

✅노션 페이지를 나만의 주소를 가진 웹사이트로 만들고,

✅폰트를 바꾸거나 CTA를 추가해 꾸미고,

✅폼을 추가해 설문하고,

✅데이터 관리까지 할 수 있는 올인원 웹 서비스입니다!!

빠르게 간단한 랜딩페이지를 만들어야하는 분들을 위한 최적의 서비스이니 한번씩 관심 가져주시면 좋을 것 같습니다☺️

폼플렛은 지금 바로 아래 링크를 통해 사용해보실 수 있습니다!

폼플렛에 많은 관심 부탁드립니다🙏💜

formflet.site

*폼플렛은 웹 전용 서비스이오니 PC로 접속해주시기 바랍니다!