축제를 200% 즐기는 방법, distance

안녕하세요.팀 디스턴스의 프론트엔드 개발자이자 팀 리드를 맡고 있는 노주영입니다. 오늘은 저희가 개발중인 서비스 디스턴스의 팀 빌딩 과정부터 최소 기능 제품(MVP)을 완성하기까지의 과정을 말씀드리고자 합니다. 팀 디스턴스의 시작은 3월부터였는데요, 프로젝트 개발에 치여 글쓰기를 미루다가 이제야 쓰게 되네요 ㅎㅎ 저희 팀의 모든 과정을 기록하고자 세세한 부분까지 작성했습니다. 재밌게 읽어주세요~ 디스턴스 시작 계기웹 프론트엔드 개발자로 취업을 준비하는 저는 취업 전 다음 세가지 경험을 얻고자 했습니다.실제 유저가 단 한 명이라도 있는 서비스 개발그 유저로부터 받은 피드백을 바탕으로 사용자 경험을 개선(유저가 많아진다면) 대규모 유저 트래픽 핸들링고민 당시에 대학생 신분이였던 저는 대학생들을 타겟으로 하는..

기획 2024. 11. 23. 18:49

안녕하세요. 팀 디스턴스의 프론트엔드 개발자 노주영입니다. 디스턴스 앱에서는 가까이 있는 이성과 1:1 익명채팅 기능을 제공하고 있는데요. 채팅방 내 이미지 전송 기능을 도입하기로 하면서 이미지 최적화에 대한 필요성이 대두되었습니다. 팀 디스턴스에서 여러가지 방법을 놓고 고민한 결과, 즉석으로 이미지를 리사이징할 수 있는 CDN을 구축하기로 했습니다. 이 포스트에서는 즉석 이미지 리사이징을 도입하게 된 배경과 구현 결과에 대해 이야기하고자 합니다.(흔히 On-the-fly Image resize라는 이름으로 알려져 있는 방식입니다. 이 포스트에서는 On-the-fly 대신 ‘즉석’이라는 용어를 사용하겠습니다.) 즉석 이미지 리사이징 방식을 선택한 이유팀 디스턴스가 여러 이미지 최적화 방식을 놓고 고민할 ..

프론트엔드 2024. 10. 27. 03:46

안녕하세요. 디스턴스의 프론트엔드 개발자 박솔미입니다.요즘 디스턴스는 9월에 있을 전남대 축제를 위해 기능 확장을 준비 하고 있습니다.🎉 그 중 채팅페이지에서도 '사진 전송 기능'을 추가하려고 합니다.기존에는 채팅페이지에서 다음과 같은 기능들을 제공했었습니다.텍스트 채팅 기능일정 횟수에 도달하면 전화 버튼 활성화 기능신고하기 기능방 나가기 기능욕설 방지 필터링 기능여기서 '사진 전송 기능'을 추가하면서 화면 UI가 다음과 같이 리디자인 되었습니다.위에 사진을 보면 오른쪽 상단에 전화버튼, 나가기 버튼이 있고왼쪽 하단에 신고하기 버튼이 있었습니다. 하지만 바뀐 디자인에서는 오른쪽 상단에 전화 버튼만 남겨두고사진 전송을 포함한 모든 기능을 + 버튼 안에 메뉴로 넣게 되었습니다. 이에 해당 화면을 슬라이..

프론트엔드 2024. 8. 9. 15:23

안녕하세요. distance의 백엔드 개발자 이준석입니다. 이번 블로그에선 총학정보를 수정하는 API를 설계하면서 고민한 내용을 정리해보겠습니다! 우선 총학정보를 수정하는 API에선 제목, 내용, 이미지 총 3가지를 입력할 수 있는데 제가 고민한 내용은 아래와 같습니다.1. 기존에 있던 이미지를 다 지우고 새롭게 등록한 이미지를 저장한다. (V1 API)2. 기존에 있던 이미지와 현재 업로드한 이미지를 비교하여 미사용하는 이미지만 지운다. (V2 API)3. V2 API와 로직은 비슷하지만 삭제를 하지않고 컬럼 중 isUsed컬럼을 true -> false로 변경 후 스케줄러를 통해 삭제 (V3 API) 둘다 장단점이 너무 분명하게 보여서 고민이 되었습니다...첫번째 방안은 코드상에서는 깔끔해져도 매번 ..

백엔드 2024. 8. 5. 20:07

안녕하세요. 디스턴스의 프론트엔드 개발자 박솔미입니다.이전에 모달 컴포넌트를 전역 상태로 리팩토링 한 주영님의 포스팅에 이어이번에는 ‘토스트 메세지’를 전역 컴포넌트로 관리하는 리팩토링 방식에 대해 설명드리려고 합니다. 모달 컴포넌트 리팩토리 기록 : https://dis-tance.tistory.com/3 리액트에서 전역 상태로 모달 관리하기안녕하세요.팀 디스턴스의 프론트엔드 개발자 노주영입니다. 디스턴스 앱에서는 사용자가 한 화면에서 여러 가지 작업을 처리할 수 있게 모달 컴포넌트를 사용합니다. 특히 모바일을 기준으로dis-tance.tistory.com 이전에 구현한 코드가 가지고 있던 문제점토스트 메세지는 사용자에게 간단한 알림이나 경고 문구를 효과적으로 전달하는 방법으로,서비스의 다양한 곳에서 ..

프론트엔드 2024. 8. 2. 16:18

안녕하세요.팀 디스턴스의 프론트엔드 개발자 노주영입니다. 디스턴스 앱에서는 사용자가 한 화면에서 여러 가지 작업을 처리할 수 있게 모달 컴포넌트를 사용합니다. 특히 모바일을 기준으로 디자인된 디스턴스 특성상, 새 창이 열려서 집중을 흐트러뜨릴 수 있는 팝업보다 같은 화면에서 열리는 모달을 적극 활용하고 있습니다. 디스턴스 앱에서 사용되는 팝업의 종류는 총 11가지입니다. 그중에는 상대방과의 통화를 요청할 때 표시되는 모달, 서비스 이용 약관에 동의하기 모달 등이 포함되어 있습니다. 이렇게 많은 모달 종류를 어떻게 잘 관리할 수 있는지에 대해 고민한 내용을 이야기하려고 합니다. 이야기에 들어가기에 앞서, 모달과 팝업이 어떤 차이가 있는지 간략하게 말씀드리려고 합니다. 모달과 팝업인터넷 화면에서 새로운 창을..

프론트엔드 2024. 7. 30. 23:57

디스턴스는 어떤 서비스인가요?디스턴스는 대학축제에서 내 주변의 가까운 우리 학교 이성과 대화를 연결해 주는 모바일 데이팅 서비스예요. 앱에 들어가면 내가 있는 곳 기준으로 1,000m 안에 있는 우리 학교 이성들의 프로필 카드가 표시돼요. 원하는 상대를 찾으면 메시지를 보낼 수 있고, 대화가 잘 통하면 상대에게 통화를 요청할 수도 있어요. 디스턴스는 대학 축제에서 설레는 인연을 만들어 주는 앱이에요.데이팅 앱, 그거 사진 보고 사람 만나는 앱 아닌가요?보통 데이팅 앱을 생각했을 때 사진 보고 만나는 앱을 많이 떠올리죠. 하지만 디스턴스는 사진이나 키 같은 객관적인 정보들이 오히려 앱 사용을 주저하게 만드는 요인이라고 봤어요. 특히 같은 학교 이성끼리만 매칭되는 특성상, 앱에서 아는 얼굴을 만날 수 있으니..

기획 2024. 7. 2. 00:05