히어로 영역이란
포트폴리오 사이트는 나라는 사람과 내 작업물를 보여주는 사이트다.
웹사이트에는 히어로 영역이라는 부분이 있는데 사용자가 처음으로 보게 되는 영역이다.
히어로 영역은 웹사이트 방문자가 스크롤 없이도 처음으로 보게 되는 콘텐츠다.
그래서 히어로 영역은 내가 전달하고 싶은 이미지, 느낌, 감정 등을 표현할 수 있는 것들을 넣는다.
사용자가 히어로 영역을 보고 웹사이트에 대한 인상을 만들기 때문이다.
히어로 영역에 대해 알아보려고 구글링을 했다.
그리고 이해는 되나 "그래서 어떻게 해야하지?"라는 질문은 해결되지 않았다.
클로드를 켜고 물어봤다.
질문이 모호해서 그런지 답이 안되었다.
좀 더 구체적으로 물어봤다.
몇번의 질문 끝에 내가 원하는 답이 나오기 시작했다.
히어로 영역 평가해보기
(창피하지만...) 내 히어로 영역을 한번 검토해보자.
우선 글이 너무 많다. 포트폴리오라서 내 가치관을 표현하는 문구를 썼다. 그렇지만, 너무 길다. 읽다가 숨 넘어갈 것 같다. 영단어 기준으로 25단어, 3줄이면 하나님께서도 충만하다고 축복하실지어다. 줄이자.
저걸 ui ux에서 chip이라고 부른다. chip은 사용자에게 클릭할 요소임을 알려줄 때 사용한다(라고 한다...)
하지만 저 chip은 저기에 있을 필요가 없다. 헤더 위쪽에 태그처럼 backend, ai, solutions, sales가 있기 때문이다. 즉, 있어보이게 표현한다면 정보가 중복이 된다. 저건 빼야한다. 사용자한테 한번 더 보여줄 필요가 없기 때문이다.
요건 CTA 버튼이다. Call to Action 의 줄임말이기도 하는데 쉽게 말하자면 사용자가 꼬오오오오오옥 눌렀으면 하는 버튼이다.
모든 웹사이트는 사실 사용자가 특정 행동을 하는 것을 원한다. 제품 홍보 웹사이트라면 제품을 클릭해보는 것, 채용 사이트면 공고에 지원클릭을 하는 것, 게임 서비스면 게임 플레이 버튼을 클릭하는 것이다.
물론 항상 현실이 이론을 따라가지는 않는다. 예를 들어, 사용자의 입장과 웹사이트의 입장이 다를 때 그렇다. 사용자는 사실 플레이만 하면 장땡이다. 하지만 웹사이트 운영자는 사용자한테 그 너머를 하기를 바란다. 공지도 봤으면 좋겠고, 패치가 뭐가 됐는지 보면 좋겠고 뭔가 마구마구 주고 싶다.
아니면 높으신 분들이 뭔가를 다 넣으라고 요구하거나 다른 부서 간에 넣어달라는 요청도 있다. 하여튼 계속 딴길로 새는데 요약을 하자면 CTA 버튼은 최대한 적게 있어야한다. 선택지가 적어야 사용자가 고민을 덜하고 행동을 하기 때문이다.
그런 면에서 내 CTA 버튼은 수량은 나쁘지는 않는데 내용 구성이 아쉽긴하다. 이건 포트폴리오기 때문에 주된 사용자는 채용 담당자 혹은 다른 개발자일 것이다. 그리고 굳이 우선순위를 따진다면 채용담당자 혹은 프로젝트 의뢰인이 순위가 높지, 다른 개발자는 우선순위가 떨어진다. 포트폴리오의 목적 자체를 그렇게 설정했기 때문이다. (물론, 이건 기획 상의 우선순위이지, 본인이 다르게 설정하면 그게 맞다...)
즉, 정리하자면 난 내 웹사이트를 채용담당자, 또는 프로젝트 의뢰인이 메인 타겟이고 다른 개발자, 혹은 일반인은 후순위이다. 그리고 개발자와 후순위 사이를 둔다면 일반인이 더 높다. 이 웹사이트는 기술 자체가 아니라 기술로 어떤 문제를 해결했는가를 큐레이팅하는 것이기 때문이다.
그런면에서 view project는 있어도 되지만, read my blog는 빠져야한다. 들어오는 사람들의 문제의 우선순위에서 낮기 때문이기도 하고 난 채용담당자, 프로젝트 의뢰인이라면 view projects를 많이 보게 하고 싶기 때문이다.
대신에 CTA 버튼 하단이나 gnb 영역에 contact me를 추가를 할 수는 있을 것 같다. 마음에 들면 내 연락처를 가져가라는 행동은 할 수 있기 때문이다.
그리고 마지막으로, 배경 영상도 한번 넣어보자. 텍스트만 있으니까 심심하다. 파랑, 검정, 노랑을 통해 바다와 우주를 표현해서 내눈에는 이뻐 보이지만 다른 사람들의 느낌은 어떤지 모르겠다. 우주와 바다 배경에 어울리게 영상을 추가해서 나란 사람은 세계 평화를 위해 일조하고픈 사람(진심이다..)이라는 느낌을 전달해보자.
히어로 영역을 개선해보자
개선포인트는 정리하자면 다음과 같다.
- description 텍스트 양 줄이기(25단어 이내, 3줄 이내)
- chip ui 제거
- read my blog cta 버튼 제거
- 배경 이미지에 웹 사이트 이미지와 어울리는 영상 효과 추가
일단 description은 그대로 살렸다. 줄여보니 내용이 이상해져서 좀 길어도 내용을 살리는 방향으로 갔다. 내가 책임지는 일이니까 ~.
두번째로, 칩 영역은 없앴다. 없애니까 확실히 눈이 시원해졌다.
CTA 버튼도 view projects로 하나로 남겨뒀다.
배경에는 별 효과를 넣었다. 스크롤 업다운을 하거나 브라우저를 줄였다 늘리면 별의 효과가 나타난다.
(티스토리가 동영상 지원기능이 여전히 있으면 좋았을 것이 아쉽다...)
오늘 작업 회고
코드는 하나도 작성하지 않았다
코드를 하나도 작성하지는 않았다. 그런데 코드를 이해를 할 필요가 없는건지는 모르겠다. AI가 뭘하는지 프롬프트에 뱉어내고 있는데 그게 뭔지 직감으로 알려면 코드를 쓸 줄은 알아야한다. 그런데 굳이 문법 하나하나를 이해한다기보다는 특정 역할을 하는 기능을 만들기 위해 어떻게 코드를 작성하는지 정도만 알면 된다.
기획, 기획, 기획
기획이라고 강조는 했는데, 정확히는 내가 무엇을 만들고 싶은가가 중요하다. 그리고 그건 결과적인 형태라기보다는 방향이다. 무슨 뜻이냐면, 내가 유럽을 여행하고 싶다고 할 때, 한없이 구체적으로 만들 수 있다. 프랑스, 독일 등도 들릴 수 있고 영국에서 밥을 먹을 수도 있다. 하지만 이것까지는 처음부터 구체적으로 정하려면 이전에 경험이 필요하다. 따라서 방향성은 대략적으로 정하고 만들면서 마음에 안드는 부분들을 찾아나가야한다.
차라리 내가 특정 도메인이 있다면 그 문제를 해결하기 위해 AI를 쓰는 건 더 효과적일 것 같다.
그래도 끝맺음은 정해야한다
끝맺음이란 이정도면 됐다 하는 것, 즉 확인 가능한 구체적인 목표다. 오늘은 랜딩 페이지를 개선하기로 했는데 목표를 정하지 않고 하다보니 고칠 것이 계속 보였고 시간을 계속 썼다. 디테일을 계속 고쳤다. 나아지기는 했지만 시간을 고려했을 때 크게 효과적이지는 않았다. 하지만 계속 하다보면 눈에 거슬린다. 그리고 다음 진도를 넘어가지 못했다.
그래서 파레토법칙을 활용하는 게 좋을 것 같다. 파레토법칙이란 결과물의 80%는 노력의 20%가 들어가고, 나머지 결과물의 20%는 노력의 80%가 들어간다는 법칙이다.
그래도 배운 것이 있다면
기획에 너무 시간을 쓰지말고 일단 해보자. 그리고 더 좋은 방법을 찾기 위해 시간을 쓰지 말고 만들어놓고 고치는 데에 시간을 쓰자. 어차피 결과를 만들지 못한다면 생각만 많아지고 조사만 하게 된다. 일단 하자.
