상세페이지 텍스트화 프로젝트_아서

1. 상세페이지 텍스트화를 위한 솔루션을 결정했습니다. 의견 부탁드립니다.
2. 도입 과정, 적용, 사후 관리 측면에서 비교적 탁월해 보입니다. 의견 부탁드립니다.
3. 이견이 없으시면 6월 안으로 테스트 완료하겠습니다.

• 목표 및 핵심 결과
• 상세페이지 텍스트화의 세부 목표
• 목표 달성으로 얻을 수 있는 결과 (지표)
• 솔루션 탐색 및 결론
• 솔루션의 조건 (내용 작성 / 소스 출력 / cafe24 삽입 / 초기 도입)
• 선택 솔루션 : notion + super 조합
• NEXT
• 진행 단계 및 세부 과업
• 병행 혹은 이후에 진행됐으면 하는 유관 프로젝트
• 기타

목표 및 핵심 결과

상세페이지 텍스트화의 세부 목표

1. 사진+텍스트 이미지를 사진 이미지와 텍스트로 구분
1. 프로젝트의 핵심 목표.
2. 텍스트 배치 형태가 하나로 고정되는 것은 지양해야한다.
2. 텍스트만 있는 이미지의 텍스트화 (ex. point1 같은 usp 파트)
1. 지금도 css 삽입 및 수정으로 가능하다. cafe24 에디터에서 제공하지 않는 폰트 속성인 자간, 장평 등을 지정해 가독성을 높일 수 있다.
2. 프로젝트가 지연될 경우 이것만 먼저 진행할 수 있다.
3. 모바일/데스크탑 구분 없던 텍스트 사이즈를 디바이스별 텍스트 사이즈 최적화
1. 우리 자사몰은 반응형 사이트가 아니다.
2. 현재는 모바일, 데스크톱의 중간 사이즈 정도(모바일에 더 가까움)로 작업해서 양쪽에 일괄 적용하는 경우가 대부분
3. 텍스트에 반응형 class를 적용해, 일괄 적용을 해도 디바이스별로 다른 사이즈로 출력되도록 할 수 있다.
4. 도입부터 작성, 셋팅까지 쉽고 빠르고 단순하고 명확한 방법 확보
1. 현재는 작성(텍스트 작성, 이미지 삽입)과 셋팅이 cafe24 한 곳에서 진행된다.
2. 텍스트화를 위해 이 단계를 나누는 것은 불가피하다.
3. 그 과정과 방법이 간결해야한다.

목표 달성으로 얻을 수 있는 결과 (지표)

1. 전체 이미지 수와 용량을 줄여서, 자사몰 로딩 속도 개선 (속도 체크 사이트 지표 / 부정적 voc 횟수 / 페이지 체류 시간)
2. 목표 1,2 부분은 사후에 사진 이미지만 교체하거나 텍스트만 수정할 수 있도록 해서, 디자이너 리소스 최소화 (상세페이지 제작, 수정 소요 시간)
3. 그 외의 복잡한 디자인 이미지에 디자이너 리소스가 집중될 수 있도록 해서, 후킹 파트 퀄리티 향상 (구매 전환율)
4. 디바이스별 텍스트 사이즈 최적화를 통해서, 상세페이지 가독성 개선 (구매 전환율 / 페이지 체류 시간)
5. 대부분의 정보를 텍스트로 삽입해서, SEO 최적화 개선 (검색 키워드 종류/유입량..?)
6. 모바일, 데스크톱 상세페이지를 구분하지 않도록 해서, 상세페이지 셋팅 및 수정 리소스 최소화 (상세페이지 제작,수정 소요시간 / 휴먼 에러 횟수)
7. 목표 달성 기간 최소화, 관련있는 팀원들의 사용성 증대 (실제 소요 기간 / 유관 팀원 사용성 평가)

레퍼런스1 : 안OO

1. 폰트의 자간, 장평 속성까지 지정해 본고딕(noto sans kr)만으로 가독성, 심미성 확보
2. 이미지 위의 텍스트 구현
3. 대부분의 페이지를 텍스트화
4. 단순한 구조와 섹션 구분만으로 전달력 높은 상세페이지
5. 대형 쇼핑몰 중에서 상대적으로 빠른 속도

레퍼런스2 : 2OOO

1. 일부 페이지 텍스트화 및 웹표준화를 시도
2. 국내 커머스 기업 중, 가독성과 심미성 선두주자

솔루션 탐색 및 결론

솔루션의 조건 (내용 작성 / 소스 출력 / cafe24 삽입 / 초기 도입)

1. 작성과 수정이 쉬워야한다. (html 스크립트를 보지 않아도 작성이 가능해야한다.)

→ webflow는 탁월하지만 html/css가 조금이라도 익숙하지 않으면 집입장벽이 너무 높고 인터페이스가 어렵다.



→ figma는 포토샵 등의 디자인툴이 익숙하지 않으면 처음에 어려울 수 있다.


2. 출력된 소스 구조가 단순하고 명확해야 한다.

→ 프레임 워크에 특화된 figma는 작성 단계에서는 직관적일 수 있으나 출력된 코드가 복잡하고, 연속성 확보가 어렵다. (직관적이고 웹지향적인 포토샵 정도의 사용에 적합) → webflow는 참고 및 수정할 수 있는 템플릿이 많지만, 알맞는 형태가 없고 복잡하다.

3. cafe24에 삽입할 때 쉬워야 한다.

→ 어떤 방식을 사용해도, html/css가 전혀 익숙치 않다면 어려울 수 있다.

4. 초기 도입 단계(class 지정, css값 지정 등)가 쉽고 빨라야한다.

→ webflow는 탁월한 편이지만, class 지정 단계부터 직접 해야한다. (템플릿으로부터 수정 가능)

선택 솔루션 : notion + super 조합

1. notion은 작성이 쉽고 진입장벽이 낮다.

→ 복잡한 블록이 존재하지만(데이터베이스), 상세페이지용으로 사용되는 블록은 한정적이고 단순하다. → 타이핑, 드래그앤드롭만으로도 상세페이지에 필요한 작업을 진행할 수 있다.

2. notion은 블록 구분이 단순-명확하고, 각 블록에 class 및 id 가 지정된다.

→ 구조화하는 노력을 하지 않아도 된다. 무료. (→ id 는 상세페이지 삽입시 필요없을 수 있다.)

3. super의 css 링크를 cafe24에 삽입하고, 아티클이 포함되어있는 상위 div를 통채로 붙여넣으면 된다.

→ cafe24 에디터의 코드 수정 부분은 아티클 섹션만을 포함하기 때문이다. → 그러나 이 부분은 html/css가 전혀 익숙치 않다면 어려울 수 있다. 매뉴얼 필요.

4. super에서 제공하거나 기존 유저가 수정한 css 템플릿을 수정하는 것만으로 간단하게 초기 도입 단계를 완료할 수 있다.
💡

(예시 1. https://blankmov.notion.site/Owl-97951b7312964dd6b627352313e7ba65 → https://owl.super.site/ )

(예시 2. https://blankmov.notion.site/LINK-d32d4eb826b1478ba8cd6e2afe6d25a5 → https://thez.am/link )

(예시 3.)

This page is password protected



thez.am

→ super는 notion이 가진 1,2의 특징을 이용하여 껍데기를 바꾸는(css값을 지정하는) 솔루션이다. (입력은 notion, 출력은 super)

→ super의 인터페이스를 이용하면, css 수정시나 내용 작성시에 css가 적용된 모습을 확인할 수 있어 편리하다. 모바일 버전도 미리볼 수 있어서, 작성자가 작성하면서 적정 글자수를 눈으로 확인할 수 있다.



(→ super를 통하지 않고 바로 notion의 소스를 수정, 개입하는 어려운 방법도 있지만 그럴 필요가 없다.)

(→ 그외 특징으로 자바스크립트, 도메인 등을 적용할 수 있다는 장점이 있지만 이 프로젝트에는 해당되지 않는다.)

NEXT

진행 단계 및 세부 과업

1. 상세페이지 가이드라인 기반으로 필요 class 정리 및 구분 (가이드라인 제작 중)
2. Class ↔ notion 블록간 매칭
3. 필수 블록별(class별) x 디바이스별(모바일/데스크탑) 레퍼런스 디자인 (~6/14. 디자인 리소스 확인 후 조정 가능)
4. 3을 바탕으로 css 값 지정 및 css 파일 1차 완성
5. 서버 내 css파일 업로드
6. 상세페이지 적용 및 테스트 (~6/17. 신규 제작 상세페이지부터 적용)
7. 관찰 및 개선, 내부 피드백 (~6/24)
8. 매뉴얼 작성 (~6/30)
9. 전체 상세페이지 적용 (7/1~)

병행 혹은 이후에 진행됐으면 하는 유관 프로젝트

1. 썸네일 화이트 밸런스 통일

→ 웜톤, 쿨톤, 녹색기, 붉은기 너무 중구난방이라 메인페이지에서의 클릭률 개선이 기대됨

2. 서버 내의 불필요한 파일 정리

→ 최근 진행한 “내부 에디터가 아닌 외부ftp를 이용한 내부 서버 업로드” 프로젝트가 단순히 업로드 방식과 업로드 디렉토리 변경일 뿐임에도 불구하고 속도 개선에 효과가 있는 것으로 확인된다면, 서버 내 파일 정리 역시 속도 개선이 기대됨

기타

💡

‣

기타 메모

갤러리 보기 구분으로 여러 텍스트 배치로 구성 가능성 확인

특수한 상황에 개별 css 값 적용 가능성 확인