ESClien 앱 개인 수정본에 대한 이미지를 포함한 추가 설명을 위한 글입니다.

앱 다운로드를 원하시는 분은 아래 링크를 이용해주세요.

해당 게시물로 이동

ESClien 앱 개인 수정본을 다운받았다면, 다음과 같이 세팅을 하는것을 권장합니다.

가장 먼저 설정에 들어가서 '기본 브라우저 설정'에서 주로 사용하는 브라우저를 선택해줍니다.

오른쪽 사진과 같이 '커스텀 탭 사용' 역시 체크해줍니다.

크로미움 브라우저들이 커스텀 탭을 지원하므로, 가급적이면 크로미움 브라우저를 기본 브라우저로 설정해주시기 바랍니다. (확인한 앱들: 크롬, 키위브라우저, 삼성 인터넷, 예외적으로 파이어폭스)

일부 브라우저들은 커스텀 탭을 지원하지 않습니다. (확인한 앱들: 네이버앱, 스타곤 브라우저)

이때 기본 브라우저로 설정한 브라우저는 클리앙 모바일 페이지에서 로그인이 된 상태여야 합니다.

이 과정은 '새 글 쓰기 (웹)'과 '글 수정 (웹)'을 보다 편하게 하기 위함입니다.

'새 글 쓰기'를 눌렀을때 나오는 화면입니다.

오른쪽 하단을 보시면 이미지 첨부 버튼을 없앴고,

ESClien 앱에서는 더이상 이미지를 첨부할수 없으니, '새 글 쓰기 (웹)'과 '글 수정 (웹)' 을 이용해달라는 문구로 대체된것을 볼수 있습니다.

(기존에 ESClien 앱 내에 있던 이미지 첨부를 이용할 경우 이미지 첨부 오류가 나기 때문에 없앴습니다.)

이미지만 첨부할수 없다 뿐이지, 카테고리 지정은 가능하기 때문에 글 작성 자체는 가능합니다.

텍스트로만 된 글을 쓸때만 '새 글 쓰기' 메뉴를 이용해주세요.

'새 글 쓰기 (웹)' 를 눌렀을때 나오는 화면입니다.

오른쪽 사진을 보시면 알수 있듯이, 클리앙 모바일 페이지의 글 작성 페이지로 연결됩니다.

기본 브라우저 설정을 삼성 인터넷으로, 커스텀 탭 사용에 체크를 하였기 때문에

오른쪽 사진처럼 삼성 인터넷 앱이 인앱 브라우저로 열리게 됩니다.

모바일 페이지에서 글을 작성하는것이기 때문에 이미지 첨부를 포함한 모든 기능을 정상적으로 이용하실수 있습니다.

글 작성이 끝나면 왼쪽 상단에 있는 X를 눌러서 인앱 브라우저를 닫아주시면 됩니다.

'글 수정' 을 눌렀을때 나오는 화면입니다.

마찬가지로 오른쪽 하단을 보시면 이미지 첨부 버튼이 없어져 있는것을 볼수 있으며

글 작성과 마찬가지로 이미지만 첨부할수 없다 뿐이지, 카테고리 지정은 가능하기 때문에 글 수정 자체는 가능합니다.

텍스트로만 된 글을 수정할때만 '글 수정' 메뉴를 이용해주세요.

'글 수정 (웹)' 을 눌렀을때 나오는 화면입니다.

오른쪽 사진을 보시면 알수 있듯이, 클리앙 모바일 페이지의 글 수정 페이지로 연결됩니다.

모바일 페이지에서 글을 편집하는것이기 때문에 이미지 첨부, 삭제를 포함한 모든 기능을 정상적으로 이용하실수 있습니다.

글 수정이 끝나면 왼쪽 상단에 있는 X를 눌러서 인앱 브라우저를 닫아주시면 됩니다.

내가 쓴 댓글에 첨부한 이미지가 이제 보이게 됩니다.

다만, 댓글 이미지 역시 수정이나 삭제가 불가능하오니, 댓글에 첨부된 이미지를 삭제하려고 시도할 경우

오른쪽 사진과 같은 경고 문구를 띄우게 바꾸었습니다.

댓글에 첨부한 이미지를 수정하려면 왼쪽 사진과 같이 '이 댓글 웹에서 열기' 를 이용해주시기 바랍니다.

마찬가지로 모바일 페이지에서 열리게 되며, 오른쪽 사진과 같이 내가 쓴 댓글 위치로 이동하게 됩니다.

저기서 수정 버튼을 눌러서 댓글 이미지를 수정해주시면 되겠습니다.

댓글 이미지 수정이 끝나면 왼쪽 상단에 있는 X를 눌러서 인앱 브라우저를 닫아주시면 됩니다.

댓글의 텍스트만 수정할때에는 오류가 발생하지 않기 때문에, 기존과 마찬가지로 앱 내에서 수정하시면 됩니다.

댓글에 이미지를 첨부하는것 역시 오류가 발생하기 때문에

이미지 첨부 버튼을 왼쪽 사진과 같이 웹으로 연결되는 버튼으로 바꾸었습니다.

해당 버튼을 클릭할 경우 모바일 페이지에서 열리게 되며, 오른쪽 사진과 같이 댓글 작성창으로 이동하게 됩니다.

이미지를 포함한 댓글 작성이 끝나면 왼쪽 상단에 있는 X를 눌러서 인앱 브라우저를 닫아주시면 됩니다.

이미지를 포함하지 않는 댓글을 작성할때는 오류가 발생하지 않기 때문에, 기존과 마찬가지로 앱 내에서 작성하시면 됩니다.

왼쪽사진은 플레이스토어에 올라온 ESClien 앱에서 회원중고장터 글을 띄웠을때 화면이고,

오른쪽사진은 제가 수정한 ESClien 앱에서 회원중고장터 글을 띄웠을때 화면입니다.

판매자 연락처를 이상하게 파싱해오지 못하는 문제가 있어서 오른쪽 사진과 같이 수정하였습니다.

기존에는 기본 웹브라우저가 크롬 커스텀탭이 아닐때 스토어 링크를 누를 경우

스토어로 넘어가는게 아니라, 왼쪽 사진과 같이 무조건 외부 브라우저로만 열리게 되어있었습니다.

안드로메당의 앱 추천 게시글에 있는 스토어 링크를 누르면 무조건 외부 브라우저로만 열리는게 은근히 거슬리더라구요.

링크를 로드하는 부분에 예외를 추가하여

플레이 스토어 링크 (https://play.google.com/store/apps/details?id=)

갤럭시 스토어 링크 (https://apps.samsung.com/appquery/appDetail.as?appId= )

원스토어 링크 (https://onesto.re/)

를 눌렀을때

각각의 스토어가 기기에 설치되어 있을경우, 스토어에서 열리게끔 수정하였습니다. (오른쪽 사진 참고)

설정에 추가한 '폰트 설정' 기능입니다.

기존에는 본문(웹뷰)에 폰트가 적용되지 않아서 미묘하게 거슬린다고 느꼈던 부분중 하나였습니다.

웹뷰를 로드하는 부분에 폰트 css 스타일을 불러오는 소스를 추가하여 커스텀폰트를 적용할수 있게 바꾸었습니다.

PC버전 크롬에서 확장프로그램으로 css 스타일의 폰트를 강제로 적용시키는 원리랑 비슷하다고 보시면 될겁니다.

현재 지원되는 폰트는 오른쪽 사진에서 볼수 있듯이 고딕체 계열 4종류(나눔고딕, 나눔스퀘어라운드, 제주고딕, IBM Plex Sans KR)와 명조체 계열 2종류(마루부리, 제주명조) 이며

앱 내부에 폰트파일을 전부 저장할 경우 앱 용량이 지나치게 커지기 때문에 css 스타일만 불러오게 하였습니다.

<style>
      @import url(https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@400;700);
      body { font-family: 'IBM Plex Sans KR', sans-serif; }
</style>

이런 식으로요

사용한 폰트들은 상업적으로도 사용이 가능한 무료 폰트들이며,

폰트 css 스타일은 Google Fonts와 네이버 웹폰트 에서 받아옵니다.

아직까지는 css 스타일을 받아오는 방식이여서 본문 폰트 적용시 반박자 늦게 폰트 스타일이 적용되는 문제가 있으며,

더 효율적으로 웹뷰 폰트를 적용할수 있는 방법을 찾게되면 그때 수정해보도록 하겠습니다.

설정 하단에 수정한 날짜를 추가하였으며,

이를 누를경우 오른쪽 사진과 같이 전체 Changelog를 확인하실수 있습니다.

기존에는 ESClien 앱을 통해 로그인 할 경우 Mac OS X/Chrome 으로 표기되는 문제가 있었습니다.

ESClien 앱의 경우 클리앙 데스크톱 도메인(www.clién.net)을 사용하는데, 

데스크톱 도메인에서는 User-Agent가 모바일 기기(Android)로 설정된 경우에는 로그인 오류가 발생합니다.

이때문에 개발자님께서 User-Agent를 Mac OS X로 하드코딩 해놓은것으로 추정됩니다.

로그인을 할 때에만 클리앙 모바일 도메인(m.clién.net)을 이용하도록 수정하여 User-Agent에 모바일 기기(Android)로 표시될수있게끔 수정하였습니다. (오른쪽 사진)

※ 이 문제를 해결하기 위해 Cliendroid 앱의 소스를 참고하였습니다.

앱 아이콘의 경우, Alexis Pie 아이콘팩에 있는 ESClien 아이콘이 마음에 들어서

이 아이콘과 최대한 비슷하게 구현하려고 노력하였습니다.

안드로이드 스튜디오에 있는 Image Asset Studio 를 이용하여 아이콘을 생성하였으며,

사용한 폰트는 무료폰트인 Bebas Neue 입니다.

안드로이드12 이상의 기기에서는 앱 실행시 스플래시 화면(Splash Screen)이 표시되는데,

Splash Screen API가 적용되어 있지 않아서 무조건 오른쪽 사진과 같이 배경이 검은색으로만 출력됩니다.

android:windowBackground를 수정하여서 다크모드가 꺼져있을때에는 왼쪽과 같이 흰색 배경이 보이게, 다크모드가 켜져있을때에는 오른쪽과 같이 검은색 배경이 보이게 수정하였습니다.

안드로이드13 이상의 기기의 경우, 테마 앱 아이콘이 지원됩니다.

별도의 API가 필요한것이 아니라서 안드로이드 스튜디오에 있는 Image Asset Studio 로 간단하게 구현할수 있었습니다.

그외에도 소모임 리스트가 1년전에 머물러 있는 문제가 있어서

소모임 리스트를 최신화하였습니다. 없던 소모임을 추가하였고, 'PC튜팅한당'을 'PC튜닝한당' 으로 수정하였습니다.

(소모임 리스트를 가져오던 링크를 esclien.firebaseapp.com에서 깃허브로 변경)

약 4년간 잘 사용했던 앱이라 어떻게든 사용해 보려고 최대한 수정을 해보았고, 구현하고 싶은 기능들이 더 있었지만

아쉽게도 제가 앱 개발자가 아니다 보니 제 능력으로는 한계가 있었습니다.

긴글 읽어주셔서 감사합니다.