동글

이 글은 동글이 반응형을 도입한 과정입니다. 1. 도입 계기 첫 배포를 마친 동글이 서비스로서 성공하려면 사용자가 있어야 한다. 그래서 다양한 루트로 홍보를 진행했는데, 페이스북 노션 그룹, 블로그, 카페, 카카오톡 오픈채팅방, 에브리타임, 인스타그램 등 많은 환경에서 홍보를 진행했다. 이전 글에서 확인할 수 있듯이 동글은 원래 PC 타깃으로 개발되었다. 하지만 카카오톡, 에브리타임, 인스타그램 등으로 유입된 사용자들은 모바일로 들어와서 첫 화면을 본다는 게 문제였고, 그 결과 첫인상이 좋지 않았다. 위 사진 말고도 반응형에 대한 피드백은 상당히 많았고, PC 퍼스트이긴 하지만 이를 계기로 모바일 지원을 고민하게 되었다. 2. 도입 과정 타겟 기기 선정: 휴대폰, 태블릿, PC 반응형을 코드로 작성하기 ..

이 글을 동글에서 낙관적 업데이트를 도입하기까지의 과정을 담은 글입니다. 1. 문제상황 업로드한 글의 제목을 바꿀 때, 정상 응답이 오기 전까지는 수정 전 제목이 보이는 문제가 있었다. 기능을 사용하는 데는 문제가 없지만 사용자는 불편하게 느낄 수 있고, 인터넷이 느린 환경에서는 더욱 문제가 된다. 그래서 요청이 성공했다고 가정하고 응답이 오기 전 요청 결과를 바로 반영하는 낙관적 업데이트 도입을 고민했다. 2. 낙관적 업데이트.. 꼭 필요할까? 그 전략이 좋아보인다고 해서 무턱대고 도입할 수는 없다. 사용자의 데이터 변경 요청을 빠르게 반영할 수 있다는 장점이 있지만, 서비스에 대한 사용자의 신뢰도 하락으로도 이어질 수 있다. 예를 들어 글 제목 변경 요청 후 재빨리 글 발행을 요청했는데 실제로는 글 ..

이 글은 동글이 서비스 타겟 환경을 PC로 정한 이유와 브라우저 지원 범위에 대한 글입니다. 1. 서비스 타겟 환경: PC 동글은 블로그에 쓸 글을 업로드(import)하고 올라온 글들을 블로그에 포스팅 하는 서비스이다. 모바일 대응도 할 수는 있겠지만 서비스 특성 상 모바일이 핵심 타겟 환경은 아니라고 생각해서 PC 버전을 우선적으로 지원하기로 결정했다. 2. 브라우저 지원 범위: Chrome, Edge, Whale, Ark 브라우저 지원 범위는 Browser Market Share Worldwide 에서의 브라우저 점유율을 참고하여 정했다. 타겟은 개발이며 주변 개발자가 타겟층이 될 확률이 높기 때문에 한국을 기준으로 잡았다. 크게 Top3인 Chrome, Edge, Whale 을 지원하기로 결정했다..

이 글은 동글이 고민한 웹 접근성과 적용 결과에 관한 글입니다. 1. 개선 할 웹 접근성 선정과 개선 과정 모든 사람들이 동글을 차별없이 동일하게 사용할 수 있도록 웹 접근성을 고려했다. 고려해볼 웹 접근성은 다양한데, 그 중 잘 안지켜지는 웹 접근성 TOP8 중에 동글 서비스에 적용하면 좋은 접근성을 우선으로 선정하여 개선하려고 했다. 동글은 글을 관리하고 발행하는 서비스이기 때문에 그 기능을 제공하는데에 중요한 명도대비, 반복영역 건너뛰기, 키보드 사용보장을 선정했다. 텍스트 컨텐츠의 명도 대비 동글은 글을 봐야하기 때문에 글자와 배경의 명도대비가 중요하다. 또한 시각장애인들이 이용하려면 키보드로만 이용할 수 있어야한다. 웹 컨텐츠 접근성 가이드 라인인 WCAG 2.1 에 따르면, 명도대비가 4.5:..

1. 동글 첫 릴리즈 드디어 동글 v1.0.0 버전을 배포했다! 두 달간 열심히 개발하여 드디어 메이저 버전을 출시했다. 배포한 뒤 첫 화면을 본 순간 알 수 없는 벅차오름이 느껴졌다. 아이를 낳는다면 이런 기분일까..? 2. 4차 스프린트 구현 내용 우리는 3차 데모데이까지 주요기능들을 개발해냈다. 4차 데모데이(론칭 페스티벌)까지는 OAuth, 회원 페이지(인증, 인가)를 만들어 사용자가 자신의 공간에서 서비스를 이용할 수 있게 했고 전반적인 디자인 개선으로 앱을 매력적이게 만들어 사용하고 싶게 만들었으며 에러처리, 버그 수정을 통해 사용성을 개선했다. 이외에도 프론트엔드 기준으로 서버 상태 관리를 위해 tanstack-query, e2e 테스트를 위한 cypress 를 도입했다. 도입으로 느낀 장점..

1. 동글 진행상황 동글은 지난 데모데이에서 마크다운 파일을 업로드해서 그 글을 볼 수 있고, medium으로 발행할 수 있는 기능까지 완성하였다. 그 이후로 동글은 다음 기능들을 추가했다. 노션에서 글 불러오기 카테고리 기능 티스토리로 글 발행하기 사이드바 열고 닫기 발행에 필요한 정보 추가하기 (태그) 2. 도메인 추가 및 정식 배포 가비아 등에서 도메인을 찾아 실제 서버에 적용했다! .tv, .me, .io 등 많은 후보가 있었지만 가격과 다른 요소들을 생각해서 최종 승자는 .blog가 되었다. https://donggle.blog 블로그 포스트 관리 툴, 동글 donggle.blog ip주소로 접속하다가 도메인이 생기니까 더 벅차오르는 느낌이다😆 3. CI/CD 구축 동글은 github actio..

1. 1차 데모데이 회고 1차 데모데이가 끝난 후 우리는 프로젝트 방향성에 대해 논의하느라 정작 회고는 하지 못했었다. 그래서 그 다음주 월요일에 짧게나마 회고를 진행했다. 아쉬웠던 점 ppt를 시간 쫓겨서 한 것이 조금 아쉬웠다. 하루 전날 모두 완료해 놓자. ppt를 빠르게 완성하고, 시나리오를 붙여 완성하자. 앞으로 역할 분담을 해서, 어떤 것을 할지 명시하자. 우선순위를 정해서 todo를 작성하고 체크하자. 데모데이마다 팀 회식을 하자! 2. 프로젝트 방향성 재정의 밑 두 문장은 실제로 우리가 1차 데모데이때 받은 피드백이다. "글을 단순히 다른 블로그 플랫폼들에 포스팅하는 수준의 프로젝트라면 그냥 개인 프로젝트로 진행해도 되지 않느냐" "개발자를 타겟으로 한다면 그냥 툴로 만들어도 되지 않느냐,..

1. 안녕 "동글" 우아한테크코스 레벨3부터는 프론트엔드와 백엔드가 힘을 합쳐 팀 프로젝트를 진행한다. 제목에 있는 "동글"은 내가 앞으로 참여하고 개발할 프로젝트 이름이다. 프로젝트 이름은 서로 의견을 내고 내부 투표를 통해 결정했다. 6월 27일 화요일 동글 팀원인 에코, 토리, 헙크, 비버, 파인, 아커와 인사하고 서로 자기소개를 했다. 그리고 바로 팀 그라운드 룰을 정했다. 적당하고 깔끔하게 잘 정한 것 같다. 특히 회의시간에 존댓말하기와 하이파이브가 마음에 든다! 2. "동글" 이란? "동글"은 기획자인 에코가 낸 아이디어인데, 여러 에디터에서 작성한 글을 한번에 관리하고 다양한 블로그 플랫폼으로 배포할 수 있는 기능을 제공한다. 나는 기여자로서 "동글"이 되게 맘에 들었다. 왜냐하면 나도 현재..