HTML/CSS/JS- 웹페이지 제작 과제

과제 목표

지금까지 배운 HTML · CSS · JavaScript로 하나의 완성된 웹사이트를 직접 만들고,

이를 GitHub에 배포하여 누구나 접속할 수 있는 URL로 공개합니다. 마지막으로 블로그에 제작 과정을 정리해 공유합니다.

• 배운 개념(DOM 조작, 이벤트, 정규표현식, 웹 스토리지 등)을 실제 기능으로 구현해본다.
• Git과 GitHub Pages를 이용한 정적 사이트 배포 흐름을 경험한다.
• 개발 과정을 글로 정리하며 회고하는 습관을 기른다.

 

---

(발표스크립트 - 존댓말)

 

 

무엇을 만들까

이번 프로젝트에서 가장 어려웠던 점은 코드를 작성하는 것보다 방향을 정하는 일이었습니다.

처음 목표는 단순했습니다.

'상담을 받고 싶어지는 홈페이지를 만들자.'

하지만 며칠 동안 직접 만들고, 수정하고, 다시 만드는 과정을 반복하면서 목표가 조금씩 달라지기 시작했습니다.

결국 제가 만들고 싶었던 것은 상담이나 교육을 홍보하는 홈페이지가 아니었습니다.

만약 타로에 흥미가 생겨 스스로 리딩을 해보고 싶은 사람이 있다면,

그 사람이 '나에게 어떤 상담 스타일이 잘 맞는지'를 자연스럽게 발견할 수 있는 사이트를 만들고 싶었습니다.

물론 이렇게 생각할 수도 있습니다.

"저는 상담에 관심이 없는데요?"

하지만 우리는 생각보다 많은 상담 속에서 살아갑니다.

친구와의 고민 상담, 진로 상담, 병원 상담, 취업 상담처럼, 자의든 타의든 상담은 우리의 일상에 늘 존재합니다.

저는 상담을 '대화의 심화 버전'이라고 생각합니다.

대화를 잘하는 사람은 상대의 이야기를 잘 듣는 사람이고,

상담을 잘하는 사람은 그 이야기를 바탕으로 문제를 이해하고, 해결의 방향을 제시하며, 공감과 위로를 전합니다.

또한 대화의 시작부터 끝까지 상대의 상태를 세심하게 살피며 만족도를 높이는 과정이라고 생각합니다.

저는 이런 상담의 철학을 조금 더 많은 사람들이 자연스럽게 접했으면 좋겠다는 마음이 있었습니다.

그래서 이번 프로젝트에서는 소르지낙을 홍보하거나 교육 커리큘럼을 소개하는 것을 가장 앞세우지 않았습니다.

오히려 우연히 방문한 사용자가

"어? 나는 이런 상담 스타일이 잘 맞는 사람이구나."

혹은

"이런 방식이라면 나도 누군가를 잘 이해하고 도울 수 있겠는데?"

라는 작은 발견 하나를 얻어 갈 수 있는 웹사이트를 만들고 싶었습니다.

---

그래서 가장 먼저 한 일은 레이아웃을 손으로 직접 그려보는 것이었습니다.

웹툰을 읽듯 천천히 아래로 스크롤하면서 이야기를 따라가는 구조를 떠올렸고,

사용자가 콘텐츠를 소비하는 것이 아니라 하나의 경험을 하는 웹사이트를 만들고 싶었습니다.

자신의 상담 스타일

처음에는 9가지 풍경을 모티프로 한 리딩 스타일을 기획했습니다.

숲, 호수, 새벽, 별처럼 각각의 풍경에 상담의 특징을 담아 사용자의 성향을 표현하는 방식이었습니다.

하지만 실제로 구현해 보니 한 가지 문제가 있었습니다.

각 스타일이 어떤 차이가 있는지, 서로 얼마나 비슷하거나 다른지 한눈에 이해하기 어려웠습니다.

즉, 정보는 있었지만 구조가 보이지 않았습니다.

그래서 사용자에게 더 직관적인 방법을 고민했고, 떠올린 것이 색조 화장품 상세페이지에서 자주 사용하는 컬러 스펙트럼 차트였습니다.

화장품이 색의 위치만으로도 서로의 차이를 직관적으로 보여주듯,

저도 상담 스타일을 하나의 좌표 위에 배치하면 사용자들이 자신의 위치와 다른 스타일과의 관계를 훨씬 쉽게 이해할 수 있을 것이라고 생각했습니다.

그래서 기존의 풍경 컨셉은 유지하면서도, 각 스타일을 2차원 좌표계에 배치했습니다.

예를 들어 이성에서 감성, 분석에서 공감과 같은 두 개의 축을 기준으로 표현하니,

단순히 "당신은 숲 타입입니다."에서 끝나는 것이 아니라,

"나는 이쪽에 위치하고, 저 스타일과는 이런 차이가 있구나."를 한눈에 이해할 수 있는 구조가 되었습니다.

이 과정을 통해 사용자에게 결과를 전달하는 방식도 훨씬 직관적으로 개선할 수 있었습니다.

 

 

사실 이런 형태의 차트는 상담사에게는 꼭 필요한 도구라고 생각합니다.

6각형의 성향 도표든, XY축 좌표든 자신의 상담 스타일을 객관적으로 이해하는 데 큰 도움이 됩니다.

그래서 저도 처음에는 이런 차트를 이미지 형태로 제작해 보았습니다.

인쇄물이나 교재로 본다면 충분히 읽기 쉽고 활용하기 좋은 자료였습니다.

하지만 모바일 화면에 올려보니 생각이 달라졌습니다.

정보가 너무 많아 보였고, 작은 화면에서는 오히려 복잡하고 피곤하게 느껴졌습니다.

무엇보다 저는 사용자 입장에서 한 가지 질문을 던졌습니다.

'과연 누가 타로 상담 사이트에 들어와서 공부를 하고 싶어 할까?'

대부분의 사용자는 배우러 오는 것이 아니라, 재미와 호기심으로 자신의 결과를 빠르게 확인하고 싶어 합니다.

그래서 복잡한 설명을 줄이고, 필요한 정보만 직관적으로 보여주는 방향으로 다시 설계했습니다.

결과적으로 상담사에게 필요한 전문성은 내부 로직에 담고, 사용자가 마주하는 화면은 최대한 단순하고 가볍게 만드는 것이 이번 프로젝트의 중요한 디자인 원칙이 되었습니다.

 

---

최종 완성본 

 

 

 가장 마음에 드는 부분

데이터를 객체로 관리한 것

① 먼저 좌표를 저장한다.

② showLandscape()가 호출

 

사용자가

③ moveUserMarker()

그리고 마지막에

를 호출한다.

이 함수가 바로 사람 이모지가 따라다니는 핵심이다.

 

marker.style.left = "42%"; marker.style.top = "78%"; 가 실행되면서  사람이모지가 따라다니기 시작한다. 

 

 

이때 css는   .user-marker{ position:absolute; } 으로 해놔야한다.

 

④ transition 효과적으로 사용하기 

 

이런 식으로 데이터를 한 번만 정의해 두면, 0.45초 걸려서 따라다니며 이동하는 것같은 효과를 준다. 

transition하나로 디테일이 달라지는 것이다. 만약 생략하면 이모지는 갑자기 순간이동한 것처럼 모션된다.

 

⑤ 버튼 색도 상호작용하기  

이렇게 하면 클릭하면 이모지가 빛나서 선택이 되었다는 것을 사용자가 명확하게 알게된다. 

이렇게 코드를 짜놓으면 데이터만 수정하면 화면 전체가 자동으로 따라오기 때문에 나중에 내용이 추가되더라도 js를 따로 수정할 필요가 없다. 유지보수가 쉬워지기 때문에 작은 프로젝트부터 이런식으로 코드를 짜는 습관을 드려놓으면 좋을 듯 하다. 

 

---

 

 

 

 

어려웠던 점과 해결 과정

처음에는 인스타그램, 유튜브, 카카오채널, 상담 후기, 강남 랭킹 1위 인증처럼 제가 가진 신뢰 요소를 최대한 많이 보여주려고 했습니다.

하지만 화면을 계속 채워 넣을수록 오히려 '열심히 증명하려는 홈페이지'처럼 느껴졌습니다.

방문자가 자연스럽게 콘텐츠를 경험하기보다, 정보를 억지로 나열한 인상을 주고 있다는 생각이 들었습니다.

반대로 다른 친구들의 과제를 보니, 한 화면 안에서 다양한 기능을 구현하며 과제의 목적에 충실한 웹사이트를 만들고 있었습니다.

저는 게임이나 화려한 인터랙션보다는 시각적인 분위기와 감성에 집중하고 있었기 때문에,

'혹시 겉만 그럴싸하고 내용은 없는 웹이 되는 건 아닐까?'라는 고민도 했습니다.

고민끝에 

<웹으로 표현한 소르지낙의 퍼소나 에세이> 를 만들자라는 결론이 나왔습니다.

사용자가 스크롤을 내리며 상담자의 생각과 철학을 하나씩 경험하는 인터랙티브 에세이(Interactive Essay)를 만들고 싶었습니다.

그래서 기능도 단순히 많이 넣는 것이 아니라, 하나의 경험을 완성하기 위한 도구로 사용했습니다.

• Hero 영역은 CSS 애니메이션으로 첫인상을 만들었고,
• 스크롤 등장 효과는 Intersection Observer를 활용해 자연스러운 흐름을 구현했습니다.
• 카드 선택은 DOM 조작으로 인터랙션을 만들었고,
• 상담 스타일 좌표는 JavaScript 이벤트로 사용자의 선택에 따라 변화하도록 구현했습니다.
• 풍경별 설명은 객체(Object)를 활용해 데이터를 관리했습니다.

이처럼 수업에서 배운 기술들을 하나씩 활용했지만, 목표는 기능을 보여주는 것이 아니라 하나의 이야기를 전달하는 것이었습니다.

이번 프로젝트를 통해 가장 크게 느낀 점은,

웹은 단순히 정보를 전달하는 공간이 아니라, 한 사람의 생각과 태도, 그리고 철학까지도 표현할 수 있는 매체라는 것입니다.

그리고 좋은 웹사이트는 기능이 많아서 완성되는 것이 아니라,

방문자가 무엇을 느끼고 어떤 경험을 하고 돌아가는지를 고민하는 순간부터 완성되기 시작한다는 것을 배울 수 있었습니다.

 

 

 

---

작은 회고

쓰려다가 만 이미지들.. 슬라이드 형식으로 사진이 옆으로 움직였으면 좋겠다 싶어서 만들어봤는데,

기존의 디자인과 너무 어울리지 않아 쓰지 못했다. 

나를 계속 발전하게 만드는 수강생과 내담자분들을 마음깊이 사랑한다.

나는 내가 타로를 하지 않았다면 ,평생 내가 잘 할수 있는게 아무것도 없다고 생각하고 살뻔했다.

https://ss-1324.github.io/tarot22/

소르지낙 슈룹 마음연구소

 

 

수고했다. thak u , next